三种不同的背景
作为Chrome扩展程序开发人员,您可以区分三种不同的环境。
- 扩展程序代码,在您的Chrome扩展程序中运行
- 背景 / 事件页面
- 浏览器动作 / 页面动作弹出
- 信息栏中的页面。
- 其顶级框架是扩展程序中的文档的选项卡,例如选项页面。
- 内容脚本,在选项卡的过程中运行。
- 选项卡流程中运行的非扩展代码(由内容脚本注入)。
请注意,
<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将消息发送到页面,但这可能导致与不希望发生消息事件的编码错误的页面发生冲突。



