CustomEvent.detail是否“污染”？

Question

我正在开发Chrome扩展程序，以增加网站的便利性。
我可以访问页面的DOM，但是我还需要与该页面上的“第一方” JS进行交互，而我无法通过其扩展程序进行此操作。

我可以在页面中注入任意标签（最著名的是<script>标签），但是由于转义了像

{
    html: '<div onclick="doSomething(this, \'someName\')"></div>'
}

是一个真正的痛苦，我想将注入的代码保持在绝对最低限度。

我尝试将事件侦听器注入页面中，以便从页面中获取JS变量，但是遇到了问题。
看来，如果CustomEvent从扩展名传递到网站或返回，又或者CustomEvent.detail在某处包含某些类型的对象（至少是函数和错误），则将清除整个CustomEvent.detail ，即设置为null。

例

脚本（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序列化会破坏循环引用。
感觉某些对象“污染”事件的细节与非跨域图像污染画布的方式相同，只是控制台中什么也没有。

我找不到有关此行为的任何文档，并且（如Paul S.建议的那样）， Chrome权限列表上似乎没有该权限的“特权”。

已在Chrome 40.0.2214.115m，43.0.2357.124m和48.0.2547.0-dev中测试。

Answer 1

我发现了什么

我最初以为这是一种安全功能，主要是因为Firefox的行为方式如此。

通过将事件侦听器放置在可以通过mozIJSSubScriptLoader加载的单独文件中，在Firefox中进行了等效测试：

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

结果：

（请注意该错误发生两次。）

因此，在Firefox中，甚至包含什么detail都不重要-只要它来自扩展程序，就不允许该页面访问它。
在我看来，这是一项安全功能。

我将以上内容引用为引号的原因是，这在Chrome中有些不同！

经过更深入的研究后，尽管扩展名和页面共享DOM树，但它们存在于两个不同的上下文中。
我不知道这实际上是安全功能还是技术上的后果，但这当然会导致只能来回传递可克隆对象的结果。

不过，令我感到困惑的是，该操作默默地失败了，根据HTML标准§2.7.5（结构化克隆） ，整个操作应该失败并出现错误：

input如果输入是另一种本机对象类型（例如，错误，函数）
input如果输入是宿主对象（例如DOM节点）
引发DataCloneError异常并中止整体结构化克隆算法。

解决方法

我最终使用了一个相当简单（尽管不是很漂亮）的解决方法：
在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中最重要的部分只需要返回的数据是可克隆的。