从 Background.js 在页面级别执行代码并返回值答案

【问题标题】：Executing code at page-level from Background.js and returning the value从 Background.js 在页面级别执行代码并返回值
【发布时间】：2014-10-01 11:35:24
【问题描述】：

我有一个包含自己的脚本和变量的网页，我需要执行这些脚本和变量，并从我的扩展程序的 Background.js 中检索返回值。

我了解（我认为！）为了与网页交互，必须通过 chrome.tabs.executeScript 或 ContentScript 完成，但因为代码必须在原始页面的上下文中执行（按顺序要对脚本和变量有作用域），需要先将其注入页面。

按照great post by Rob W，我可以调用页面级脚本/变量，但我很难理解如何以这种方式返回值。

这是我到目前为止所得到的......

网页代码（我想与之交互）：

<html>
<head>
<script>
    var favColor = "Blue";

    function getURL() {
      return window.location.href;
    }
</script>
</head>

<body>
    <p>Example web page with script content I want interact with...</p>
</body>
</html>

manifest.json：

{
  // Extension ID: behakphdmjpjhhbilolgcfgpnpcoamaa
  "name": "MyExtension",
  "version": "1.0",
  "manifest_version": 2,
  "description": "My Desc Here",
  "background": {
    "scripts": ["background.js"]
  },  
  "icons": {
    "128": "icon-128px.png"
  },
  "permissions": [
    "background",
    "tabs",
    "http://*/",
    "https://*/",
    "file://*/",           //### (DEBUG ONLY)
    "nativeMessaging"
  ]
}

background.js

codeToExec = ['var actualCode = "alert(favColor)";',
                  'var script = document.createElement("script");',
                  ' script.textContent = actualCode;',
                  '(document.head||document.documentElement).appendChild(script);',
                  'script.parentNode.removeChild(script);'].join('\n');
chrome.tabs.executeScript( tab.id, {code:codeToExec}, function(result) {
   console.log('Result = ' + result);
} );

我意识到代码目前只是“提醒”favColor 变量（这只是一个测试，以确保我可以看到它工作）。但是，如果我尝试返回该变量（将其保留为最后一条语句或通过说“return favColor”），executeScript 回调永远不会具有该值。

所以，这里似乎（至少）有三个层次：

background.js
内容脚本
实际网页（包含脚本/变量）

...我想知道从第 1 级到第 3 级（上图）和返回值的推荐方式是什么？

提前致谢：o)

【问题讨论】：

您非常正确地理解了上下文分区，对此表示赞赏和 +1。答案即将到来。
（...感谢您的信心助推器！）

标签： javascript google-chrome google-chrome-extension

【解决方案1】：

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

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

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

背景内容 通过 Chrome API 讨论。
最原始的是executeScript的回调，但除了单行之外，它是不切实际的。
常见的方式是使用Messaging。
不常见，但可以使用chrome.storage 及其onChanged 事件进行通信。

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

虽然页面对chrome.* API 的访问非常非常有限，但它们仍然可以使用消息传递来联系扩展程序。这是通过"externally_connectable" method实现的。

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

好处是直接与扩展程序对话，但坏处是要求将您正在使用的域明确列入白名单，并且您需要跟踪您的扩展程序 ID（但由于您'正在注入代码，您可以提供带有 ID 的代码）。如果你需要在任何域上使用它，这是不合适的。
另一个解决方案是使用 DOM 事件。由于 DOM 在内容脚本和页面脚本之间共享，因此一个生成的事件将对另一个可见。

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

再次，我answered about this before。

这种方法的缺点是要求内容脚本充当代理。内容脚本中必须包含这些内容：
```
window.addEventListener("PassToBackground", function(evt) {
  chrome.runtime.sendMessage(evt.detail);
}, false);
```
后台脚本使用chrome.runtime.onMessage 侦听器处理此问题。

我鼓励您编写一个单独的内容脚本并使用file 属性而不是code 调用executeScript，而不是依赖它的回调。消息更简洁，允许多次向后台脚本返回数据。

【讨论】：

感谢 Xan 这么详细的回答，太好了！我现在已经让它工作了（虽然比我想要的要多，但至少它有效！）:)

【解决方案2】：

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（基本上是"Method 2b" of the answer that you've cited in the question）。

【讨论】：

插入<script> 会阻止执行内容脚本上下文的有趣信息。
谢谢 Rob W，我知道必须有一种同步方式（如果有必要的话）。我在考虑类似的路线（例如，将结果放在隐藏的 DOM 字段中），但这要好得多。如果您不介意，我会将 Xan 的回复标记为答案，因为它（如您所说）是“推荐”方法。再次感谢各位！ :o)
@PaulNicholas 我主要推荐 Xan 的方法，因为使用异步事件编码的一个优点是，如果需要，您的代码可以更容易地重构为使用异步 API。如果您确定您总是想要同步访问数据，那么您完全可以使用我的回答中的同步方法。事实上，实现它更简单、更容易，因此更不容易出错。
@RobW 感谢您的进一步澄清。希望所有这些信息都能帮助像我这样的其他 Chrome 新手！ ;o)

【解决方案3】：

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");

【讨论】：