CustomEvent.detail是否“污染”？

Question

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

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

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

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

我尝试将事件侦听器注入页面中，以便从页面获取JS变量，但是遇到了问题。
看来，如果a 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);
})();

输出（为便于阅读而分类）：

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

我最初以为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（结构化克隆），整个操作应该失败并出现错误：

？如果输入是另一种本机对象类型（例如，Error，Function）
？如果输入是宿主对象（例如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只需要和返回数据的最大部分是可克隆的。