实施例

Question

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

我可以在页面中注入任意标签（最值得注意的是<script>标签），但是因为转义字符串如

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

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

我尝试将事件监听器注入页面以便从页面获取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序列化它们就会中断。
感觉就像某些对象以同样的方式“{3”}“污染”事件细节，除非控制台中没有任何内容。

我无法找到有关此行为的任何文档，并且（如Paul S.建议的那样），non-crossorigin images taint canvases上似乎没有“特权”。

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

结果：

console log

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

所以在Firefox中，detail包含的内容并不重要 - 只要它来自扩展名，就不允许页面访问它。
对我来说看起来像是一个安全功能。

我将上述内容放在引文中的原因是因为Chrome中的情况有所不同！

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

令我感到困惑的是，操作无声地失败，根据the HTML standard, §2.7.5 (structured clone)，整个操作失败时会出现错误：

↪如果输入是另一种本机对象类型（例如，错误，功能）
  ↪如果输入是主机对象（例如DOM节点）
  抛出DataCloneError例外并中止整个structured clone算法。

解决方法

我最终使用了一个相当简单（虽然不那么漂亮）的解决方法：
在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的最大部分只需要并返回可克隆的数据。

CustomEvent.detail“污染”？

实施例

1 个答案:

我发现了什么

解决方法