我正在开发一个 Chrome 扩展程序来增加网站的便利性。
我可以访问该页面的 DOM,但我还需要与该页面上的“第一方”JS 进行交互,而我无法通过我的扩展程序进行交互。
我可以在页面中插入任意标签(最值得注意的还有 <script>
标签),但由于转义字符串如
{
html: '<div onclick="doSomething(this, \'someName\')"></div>'
}
真的很痛苦,我想将注入(inject)的代码保持在绝对最低限度。
我尝试将事件监听器注入(inject)页面以从页面获取 JS 变量,但遇到了问题。
似乎如果一个CustomEvent
从扩展程序传递到网站或返回,如果 CustomEvent.detail
在某处包含某些类型的对象(至少是函数和错误),整个 CustomEvent.detail
将被清除,即设置为空。
例子
脚本(extension.js):
(function()
{
var script = document.createElement('script');
script.innerHTML = [
"window.addEventListener('xyz', function(ev)",
" { ",
" console.log('after dispatch:'); ",
" console.log(ev.detail); ",
" }); ",
].join('\n');
document.head.appendChild(script);
// JSON-serializable data
var e = new CustomEvent('xyz', { detail: { x: 42, name: 'Schroedinger' } });
console.log('before dispatch:')
console.log(e.detail);
window.dispatchEvent(e);
// non-JSON-serializable data
var detail = { x: 42, name: 'Schroedinger' };
detail.detail = detail; // Create circular reference
e = new CustomEvent('xyz', { detail: detail });
console.log('before dispatch:')
console.log(e.detail);
window.dispatchEvent(e);
// data with function
e = new CustomEvent('xyz', { detail: { x: 42, name: 'Schroedinger', func: function(){} } });
console.log('before dispatch:');
console.log(e.detail);
window.dispatchEvent(e);
// data with error object
e = new CustomEvent('xyz', { detail: { x: 42, name: 'Schroedinger', err: new Error() } });
console.log('before dispatch:');
console.log(e.detail);
window.dispatchEvent(e);
})();
输出(为便于阅读而分段):
before dispatch:
Object {x: 42, name: "Schroedinger"}
after dispatch:
Object {x: 42, name: "Schroedinger"}
before dispatch:
Object {x: 42, name: "Schroedinger", detail: Object}
after dispatch:
Object {x: 42, name: "Schroedinger", detail: Object}
before dispatch:
Object {x: 42, name: "Schroedinger", func: function (){}}
after dispatch:
null
before dispatch:
Object {x: 42, name: "Schroedinger", err: Error at chrome-extension://...}
after dispatch:
null
我最初认为 JSON 可序列化是问题所在,但循环引用在事件中传递得很好,如果 JSON 序列化它们会中断。
感觉某些对象以相同的方式“污染”了事件细节 non-crossorigin images taint canvases , 除了控制台中没有任何内容。
我无法找到关于此行为的任何文档,并且(正如 Paul S. 建议的那样),在 Chrome permissions list 上似乎没有针对此行为的“特权” .
在 Chrome 40.0.2214.115m、43.0.2357.124m 和 48.0.2547.0-dev 中测试。
最佳答案
我发现了什么
我最初认为这是一项安全功能,主要是因为 Firefox 的行为方式。
In ran an equivalent test in Firefox by putting the event listener in a separate file that could be loaded via
mozIJSSubScriptLoader
:test.js:
(function() { window.addEventListener('xyz', function(ev) { console.log('after dispatch:'); console.log(ev.detail); }); })();
firefox.js:
(function() { var mozIJSSubScriptLoader = Components.classes["@mozilla.org/moz/jssubscript-loader;1"].getService(Components.interfaces.mozIJSSubScriptLoader); window.addEventListener('load', function load(event) { window.removeEventListener('load', load); window.gBrowser.addEventListener('DOMContentLoaded', function(event) { mozIJSSubScriptLoader.loadSubScript('chrome://my-extension/content/test.js', window.content, 'UTF-8'); // JSON-serializable data var e = new CustomEvent('xyz', { detail: { x: 42, name: 'Schroedinger' } }); console.log('before dispatch:') console.log(e.detail); window.content.dispatchEvent(e); // non-JSON-serializable data e = new CustomEvent('xyz', { detail: { x: 42, name: 'Schroedinger', func: function(){} } }); console.log('before dispatch:'); console.log(e.detail); window.content.dispatchEvent(e); }); }); })();
Result:
(Note that the error occurs twice.)
So in Firefox it doesn't even matter what
detail
contains - as long as it comes from an extension, the page is not allowed to access it.
Looks like a security feature to me.
我之所以将以上内容放在引号中是因为这在 Chrome 中有些不同!
经过更深入的调查后,看起来虽然扩展和页面共享 DOM 树,但它们存在于两个不同的上下文中。
我不知道这实际上是一项安全功能还是仅仅是一种技术后果,但这当然会导致只能来回传递可克隆对象。
但令我困惑的是,根据the HTML standard, §2.7.5 (structured clone),操作无声无息地失败了。 ,整个操作应该失败并出现错误:
↪ If input is another native object type (e.g. Error, Function)
↪ If input is a host object (e.g. a DOM node)
Throw a DataCloneError exception and abort the overall structured clone algorithm.
解决方法
我最终使用了一个相当简单(虽然不是很漂亮)的解决方法:
在 Chrome 中,没有等同于 mozIJSSubScriptLoader
的东西, 但您可以附加 <script>
从您的扩展程序中为页面添加标签(在 FF 中不允许这样做)。
连同chrome.extension.getURL
, 可用于运行在页面上下文中使用扩展名打包的 JS 文件:
(function()
{
var script = document.createElement('script');
script.src = chrome.extension.getURL('extension.js');
document.head.appendChild(script);
})();
当然需要那个
"web_accessible_resources": [ "extension.js" ]
设置在manifest.json
,这不是很漂亮,但不应该是一个实际问题。
这样做的缺点当然是来自 extension.js
内部您不再有权访问您的扩展程序有权访问的任何 chrome API,但就我而言,我不需要它。通过 CustomEvent
设置代理不会太难尽管如此,Chrome API 的最大部分只需要并返回可克隆的数据。
关于javascript - 自定义事件细节 "tainted"?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28699159/