window.postMessage 的 DOM 异常 12

Question

我正在学习构建 Chrome 扩展程序，并且正在尝试遵循官方指南 here 中的说明之一。

我想要完成的是：

1. background.js 显示针对目标 URL 的页面操作。
2. 页面操作在单击时执行脚本。
3. 执行的脚本会在页面上注入 javascript。

到目前为止，一切都很好！我使用以下脚本注入页面。

var injectJS = function(url, cb) {
    var h = document.getElementsByTagName('head')[0],
        s = document.createElement('script');
    s.type = 'text/javascript';
    s.src = url;
    if (cb)
        s.onload = cb;
    h.appendChild(s);
};
injectJS(chrome.extension.getURL('script/do_something.js'));

现在，我希望注入的脚本能够与扩展程序进行通信。
看来我正在寻找的是文档中描述的内容。

https://developer.chrome.com/extensions/content_scripts.html#host-page-communication

问题是，当我尝试执行window.postMessage 时，控制台显示错误“DOM Exception 12”。

---

编辑：运行示例代码的第一个问题已解决。
我从 smae 代码中得到的另一个错误来自port.postMessage：

Uncaught Error: Attempting to use a disconnected port object

代码如下：

var port = chrome.runtime.connect();

// Respond to messages from the injected script to collect results
window.addEventListener('message', function(e) {
    if (e.source != window)
        return;
    if (e.data.type && (e.data.type == 'FROM_PAGE')) {
        console.log('Content script received: %s', e.data.text);
        port.postMessage(e.data.text);
    }
}, false);

基本上，我试图在页面重新加载时临时保留一些数据。内容脚本/注入脚本收集数据，然后加载下一页。后台脚本应该保存结果，直到所有页面都加载完毕。

Answer 1

不要将 contentscript.js 示例中的 port.postMessage 与 window.postMessage 混淆。

port.postMessage 是特定于 Chrome 扩展程序的 API，旨在在扩展程序内传递消息，而 window.postMessage 是用于与帧通信的 JavaScript 方法。 window.postMessage 的第二个参数是必需的，用于验证是否允许目标接收消息。

在您的情况下，使用通配符可能就足够了，因为您正在从页面向自身发送消息：

window.postMessage({ type: "FROM_PAGE", text: "Hello from the webpage!" }, "*");
                                                                           ^^^