Pau*_*las 3 javascript google-chrome google-chrome-extension
我有一个网页,里面有我自己需要执行的脚本和变量,并从我的扩展的Background.js中检索返回值.
我理解(我认为!)为了与网页进行交互,必须通过chrome.tabs.executeScript或ContentScript来完成,但因为代码必须在原始页面的上下文中执行(为了具有范围)对于脚本和变量),需要先将其注入页面.
在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回调永远不会具有该值.
所以,这里似乎有(至少)三个级别:
... ...我想知道从1级到3级(上图)和返回值的推荐方法是什么？
在此先感谢:o)
你理解3层上下文分离是完全正确的.
为了进行通信,这些层使用不同的方法:
背景< - >内容通过Chrome API进行讨论.
最原始的是回调executeScript,但除了单行之外的任何东西都是不切实际的.
常用的方法是使用Messaging.
不常见,但可以使用chrome.storage及其onChanged事件进行通信.
页面< - >扩展不能使用相同的技术.
由于注入的页面上下文脚本在技术上与页面自己的脚本不同,因此您正在寻找网页与扩展程序通信的方法.有两种方法可供选择:
虽然页面对chrome.*API的访问非常非常有限,但它们仍然可以使用Messaging来联系扩展.这是通过"externally_connectable"方法实现的.
我最近详细描述了这个答案.简而言之,如果您的扩展声明允许域与其通信,并且域知道扩展的ID,则它可以向扩展发送外部消息.
好处是与扩展程序直接对话,但缺点是需要将您正在使用此域名的域名专门列入白名单,并且需要跟踪您的扩展ID(但是因为您注入了代码,您可以提供代码与ID).如果您需要在任何域上使用它,这是不合适的.
另一种解决方案是使用DOM Events.由于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”已经在问题中引用了）。