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

Question

我认为chrome扩展程序总体而言非常简单且非常强大，但始终令我困惑的一件事是尝试在可能运行代码的各种脚本之间进行通信。当从浏览器操作的“default_popup”页面中引用该代码时，“背景”的“脚本”属性中的代码以及内容脚本。

这些类别的脚本在什么情况下运行，每种脚本如何与其他脚本通信？

Answer 1

作为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, use
var 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!!!), use
var 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), use
var 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将消息发送到页面，但这可能导致与不希望发生消息事件的编码错误的页面发生冲突。