栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

在chrome扩展程序的浏览器操作,后台脚本和内容脚本之间进行通信的上下文和方法?

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

在chrome扩展程序的浏览器操作,后台脚本和内容脚本之间进行通信的上下文和方法?

三种不同的背景

作为Chrome扩展程序开发人员,您可以区分三种不同的环境。

  1. 扩展程序代码,在您的Chrome扩展程序中运行
  2. 背景 / 事件页面
  3. 浏览器动作 / 页面动作弹出
  4. 信息栏中的页面。
  5. 其顶级框架是扩展程序中的文档的选项卡,例如选项页面。
  6. 内容脚本,在选项卡的过程中运行。
  7. 选项卡流程中运行的非扩展代码(由内容脚本注入)。

请注意,

<iframe src="chrome-extension://EXTENSIONID/page.htm">
在非扩展页面中,页面通常被视为情况2(内容脚本),因为该框架是在非特权制表符过程中加载的。由于Chrome 56中针对扩展程序启动了进程外iframe,因此这些页面由扩展程序处理,因此它们可能使用相同的全套扩展程序API。行为上的这种改变(允许扩展框架使用特权扩展API)是有意的。

window在扩展过程中访问对象
因为所有扩展代码都在同一进程中运行,所以它们可以互相访问全局window对象。此功能并不为人所知,但是允许在同一扩展过程中直接操作Javascript和DOM对象。通常最好不要使用此方法,而应使用消息传递 API。

// To access the `window` of a background page, usevar bgWindowObject = [chrome.extension.getBackgroundPage()](https://developer.chrome.com/extensions/extension.html#method-getBackgroundPage);// To access the `window` of an event or background page, use:[chrome.runtime.getBackgroundPage](https://developer.chrome.com/extensions/runtime.html#method-getBackgroundPage)(function(bgWindowObject) {    // Do something with `bgWindow` if you want});// To access the `window` of the badge's popup page (only if it's open!!!), usevar popupWindowObject = [chrome.extension.getViews({type:'popup'})[0]](https://developer.chrome.com/extensions/extension.html#method-getViews);// To access the `window` of the options page (called /options.html), usevar allWindowObjects = [chrome.extension.getViews({type:'tab'})](https://developer.chrome.com/extensions/extension.html#method-getViews);var popupWindowObjects = allWindowObjects.filter(function(windowObject) {    return windowObject.location.pathname == '/options.html';});// Example: Get the `window` object of the first options page:var popupWindowObject = popupWindowObjects[0];

为了使本节简短,我特意将代码示例限制为演示如何访问其他全局

window
对象。您可以使用这些方法来定义全局方法,设置全局变量,调用全局函数等。extension)弹出窗口
window
始终可用。这是不正确的,当关闭弹出窗口时,将丢弃全局对象!

消息通道始终具有两端:发送方和接收方。 要成为接收者,请使用

chrome.runtime.onMessage.addListener
方法绑定事件监听器。这可以通过扩展代码和内容脚本来完成。

要在扩展名中传递消息,请使用

chrome.runtime.sendMessage
。如果要将消息发送到另一个选项卡,请致电
chrome.tabs.sendMessage
。通过将整数(
tabId
)作为第一个参数来指定目标选项卡。请注意,后台页面只能将消息发送到一个选项卡。要访问所有选项卡,必须为每个选项卡调用该方法。例如:

[chrome.tabs.query](https://developer.chrome.com/extensions/tabs.html#method-query)({}, function(tabs) {    for (var i=0; i<tabs.length; i++) {        [chrome.tabs.sendMessage](https://developer.chrome.com/extensions/tabs.html#method-sendMessage)(tabs[i].id, "some message");    }});

内容脚本只能调用

chrome.runtime.sendMessage
以向扩展代码发送消息。如果要将消息从内容脚本发送到另一个内容脚本,则需要后台/事件页面,该页面接收消息并将其发送到所需的选项卡。

这些

sendMessage
方法接受一个可选函数,该函数作为
onMessage
事件的第三个参数接收。

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {    if (message === 'message') sendResponse('the response');});chrome.runtime.sendMessage('message', function(response) {    console('sendResponse was called with: ' + response);});

前面的示例显示了明显的行为。当您要异步发送响应时,例如如果您要执行AJAX请求以获取一些数据,事情就会变得棘手。当

onMessage
函数未调用而返回时
sendResponse
,Chrome将立即调用
sendResponse
。由于
sendResponse
只能调用一次,因此您将收到以下错误:

无法发送回应:如果你要发送的监听器返回后的响应(消息是由扩展发送的chrome.runtime.onMessage监听器必须返回true 扩展ID HERE

根据错误提示进行操作,

return true;
在您的onMessage事件监听器中添加:

chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) {    setTimeout(function() { // Example: asynchronous invocation of sendResponse        sendResponse('async response');    }, 200);    return true;});

内容脚本和页面之间的通信

可以与页面进行通信。Apsillers创建了一个很好的答案,它解释了如何在(非扩展)页面和内容脚本之间建立通信通道。

apsiller的在方法的优势从文档中一个是用于自定义事件。该文档用于

window.postMessage
将消息发送到页面,但这可能导致与不希望发生消息事件的编码错误的页面发生冲突。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/442211.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号