window.postMessage 的 DOM 异常 12 [英] DOM Exception 12 for window.postMessage

问题描述

我正在学习构建 Chrome 扩展程序，我正在尝试按照官方指南中的说明之一操作 此处.

I'm learning to build Chrome Extensions, and I'm trying to follow one of the instructions in the official Guide here.

我想要完成的是:

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

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

So far, so good! I use the following script to inject into the page.

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'));

现在，我希望注入的脚本能够与扩展进行通信.
似乎我正在寻找的是文档中描述的内容.

Now, I want the injected script to be able to communicate back to the extension.
It seems like what I am looking for is what's described in the documentation.

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

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

The problem is, when I try to do window.postMessage the console shows an error "DOM Exception 12".

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

The first problem running the sample code was solved.
The other error I get, from the smae code is from port.postMessage:

未捕获的错误:尝试使用断开连接的端口对象

代码如下:

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

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

Basically I'm trying to persist some data temporarily while a page reloads. The content script/injected script collects the data, and then loads the next page. The background script should hold the results until all the pages have been loaded.

推荐答案

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

Don't confuse the port.postMessage in the contentscript.js example with window.postMessage.

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

port.postMessage is a Chrome extension-specific API, intended to pass messages around within the extension, while window.postMessage is a JavaScript method used for communicating with frames. The second argument to window.postMessage is required, and is used to validate whether the target is allowed to receive the message or not.

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

In your case, using a wildcard is probably sufficient, because you're sending a message from a page to itself:

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

这篇关于window.postMessage 的 DOM 异常 12的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！