三种不同的背景

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