Question

我有一个网页，其中包含我自己需要执行的脚本和变量，并从我的扩展程序的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);
} );

我意识到代码目前只是警告＆＃34; favColor变量（这只是一个测试，以确保我可以看到它工作）。但是，如果我尝试返回该变量（通过将其保留为最后一个语句或者说＆＃34;返回favColor＆＃34;），则executeScript回调永远不会有值。

所以，这里似乎（至少）有三个级别：

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

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

提前致谢：o）

Answer 1

理解3层上下文分离是完全正确的。

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

要进行沟通，这些图层使用不同的方法：

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

Page＆lt; - ＆gt;扩展不能使用相同的技术由于注入的页面上下文脚本在技术上与页面自己的脚本不同，因此您正在寻找网页与扩展程序通信的方法。有两种方法可供选择：

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

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

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

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

再次，我answered about this before。

此方法的缺点是要求内容脚本充当代理。这些行中的某些内容必须存在于内容脚本中：
```
window.addEventListener("PassToBackground", function(evt) {
  chrome.runtime.sendMessage(evt.detail);
}, false);
```
，而后台脚本使用chrome.runtime.onMessage侦听器对其进行处理。

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

Answer 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）。

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

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

3 个答案:

＃index.js