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

我有一个自己的脚本和variables,我需要执行和检索我的扩展的Background.js返回值的网页。

我明白(我想!)为了与网页交互,它必须通过chrome.tabs.executeScript或ContentScript完成,但是因为代码必须在原始页面的上下文中执行(为了有范围到脚本和variables),它需要首先注入页面。

在Rob W的这篇伟大的文章之后,我可以调用页面级脚本/variables,但是我正在努力理解如何以这种方式返回值。

这是我到目前为止…

网页代码 (我想与之交互):

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

我意识到代码目前只是“提醒”favColorvariables(这只是一个testing,以确保我能看到它的工作)。 但是,如果我尝试返回该variables(通过将其作为最后一个语句或通过说“返回favColor”),executeScriptcallback从不具有该值。

所以,这里似乎至less有三个层次:

  1. background.js
  2. 内容脚本
  3. 实际的网页 (包含脚本/variables)

…我想知道从1级到3级(上面)交谈的build议方式和返回值是什么?

在此先感谢:o)

在理解三层上下文分离方面,你是完全正确的。

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

为了沟通,这些图层使用不同的方法:

背景< – >通过Chrome API进行内容交谈。
最原始的是executeScript的callback,但对于其他任何东西都是不切实际的。
常用的方法是使用消息 。
不常见,但可以使用chrome.storage及其onChanged事件进行通信。

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

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

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

    好处是直接与扩展相关联,但不利的一面是需要将您使用的域名专门列入白名单 ,并且需要跟踪您的扩展ID(但由于您正在注入代码,因此您可以提供带有ID的代码)。 如果你需要在任何领域使用它,这是不合适的。

  2. 另一个解决scheme是使用DOM事件。 由于DOM是在内容脚本和页面脚本之间共享的,所以一个事件产生的事件对另一个事件是可见的。

    该文档演示了如何使用window.postMessage来达到这个效果。 使用自定义事件在概念上更清楚。

    我再一次回答了这个问题 。

    这种方法的缺点是要求内容脚本充当代理 。 内容脚本中必须包含以下内容:

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

    而后台脚本使用chrome.runtime.onMessage监听器来处理这个chrome.runtime.onMessage

我鼓励你编写一个单独的内容脚本,并用file属性而不是code调用executeScript ,而不要依赖它的callback。 消息更清晰,并允许不止一次地将数据返回到后台脚本。

Xan的答案中的方法(使用事件进行交stream)是推荐的方法。 然而,实施这个概念(并且以一种安全的方式!)是比较困难的。

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

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

 // 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 (eg no permission to access page), or // when you're executing in multiple frames (via allFrames:true). console.log('Result = ' + result[0]); }); 

这个例子是可用的,但并不完美。 在你的代码中使用这个之前,确保你实现了正确的error handling。 目前,当favColor未定义时,脚本会引发错误。 因此,脚本文本不会更新,并且返回的值不正确。 在实现适当的error handling之后,这个例子将会非常稳固。

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

actualCode变得比几行更长时,我build议把代码包装在一个函数文字中,并用'('')();连接起来')(); 让你更容易编写代码,而不必在actualCode代码中添加引号和反斜杠( 在问题中引用的答案基本上是“方法2b” )。