您对 3 层上下文分离的理解非常正确。

• 背景页面是一个单独的页面，因此不会与可见页面共享 JS 或 DOM。
• 内容脚本与网页的 JS 上下文隔离，但共享 DOM。
• 您可以使用共享 DOM 将代码注入到页面的上下文中。它可以访问 JS 上下文，但不能访问 Chrome API。

为了进行通信，这些层使用不同的方法：

背景 <->通过 Chrome API 进行内容对话。
最原始的是 的回调executeScript，但除了单行之外，它对任何东西都是不切实际的。
常用的方法是使用Messaging。
不常见，但可以使用chrome.storage它的onChanged事件进行通信。

Page <-> 扩展不能使用相同的技术。
由于注入的页面上下文脚本在技术上与页面自己的脚本没有区别，因此您正在寻找网页与扩展程序对话的方法。有2种方法可用：

1. 虽然页面对chrome.*API 的访问非常非常有限，但它们仍然可以使用 Messaging 来联系扩展。这是通过"externally_connectable"方法实现的。

   我最近在这个答案中详细描述了它。简而言之，如果您的扩展程序声明允许域与其通信，并且域知道扩展程序的 ID，则它可以向扩展程序发送外部消息。

   好处是直接与扩展程序交谈，但缺点是需要将您正在使用的域从 专门列入白名单，并且您需要跟踪您的扩展程序 ID（但由于您正在注入代码，您可以提供带 ID 的代码）。如果您需要在任何域上使用它，这是不合适的。

2. 另一种解决方案是使用 DOM 事件。由于 DOM 在内容脚本和页面脚本之间共享，因此一个生成的事件将对另一个可见。

   文档演示了如何使用window.postMessage此效果；使用自定义事件在概念上更清晰。

   再次，我之前回答过这个。

   这种方法的缺点是需要一个内容脚本作为代理。内容脚本中必须存在以下内容：

   window.addEventListener("PassToBackground", function(evt) {
     chrome.runtime.sendMessage(evt.detail);
   }, false);
   

   而后台脚本使用chrome.runtime.onMessage侦听器处理它。

我鼓励您编写单独的内容脚本并executeScript使用file属性而不是调用code，而不是依赖其回调。消息传递更干净，允许多次将数据返回到后台脚本。

Xan 的回答中的方法（使用事件进行通信）是推荐的方法。然而，实现这个概念（并以安全的方式！）更加困难。

所以，我会指出，这是可以同步从页面返回值的内容脚本。当<script>页面中插入带有内联脚本的标签时，脚本会立即同步执行（在.appendChild(script)方法返回之前）。

您可以通过使用注入的脚本将结果分配给内容脚本可以访问的 DOM 对象来利用此行为。例如，通过覆盖当前活动<script>标签的文本内容。<script>标签中的代码只执行一次，因此您可以将任何垃圾分配给<script>标签的内容，因为它不会再被解析为代码。例如：

// background script
// The next code will run as a content script (via chrome.tabs.executeScript)
var codeToExec = [
    // actualCode will run in the page's context
    'var actualCode = "document.currentScript.textContent = favColor;";',
    'var script = document.createElement("script");',
    'script.textContent = actualCode;',
    '(document.head||document.documentElement).appendChild(script);',
    'script.remove();',
    'script.textContent;'
].join('\n');

chrome.tabs.executeScript(tab.id, {
    code: codeToExec
}, function(result) {
    // NOTE: result is an array of results. It is usually an array with size 1,
    // unless an error occurs (e.g. no permission to access page), or
    // when you're executing in multiple frames (via allFrames:true).
    console.log('Result = ' + result[0]);
});

这个例子是可用的，但并不完美。在您的代码中使用它之前，请确保您实现了正确的错误处理。当前，当favColor未定义时，脚本会引发错误。因此，脚本文本不会更新并且返回的值不正确。在实施了正确的错误处理之后，这个例子将非常可靠。

这个例子几乎不可读，因为脚本是由一个字符串构造的。如果逻辑相当大，但内容脚本在一个单独的文件中并使用chrome.tabs.executeScript(tab.id, {file: ...}, ...);.

当actualCode超过几行越长，我建议包装在一个函数文字代码，并串连它'('，并')();允许您无需添加引号和反斜线更轻松地编写代码actualCode（基本答案，你的“方法2b”已经在问题中引用了）。

chrome.browserAction.onClicked.addListener(function(tab) {
  // No tabs or host permissions needed!
  console.log('Turning ' + tab.url + ' red!');
  chrome.tabs.executeScript({
    file: 'index.js'
  });
});

这里 index.js 是在浏览器中注入的普通 js 文件

#index.js

alert("Hello from api");