window.postMessage的DOM异常12

问题描述

我正在学习构建Chrome扩展程序，并试图按照官方指南。

我试图完成的是：

1. background.js显示目标网址的页面操作。


2. 页面操作在单击时执行脚本。 >已执行的脚本在页面上注入JavaScript。

到目前为止，太棒了！

  var injectJS =函数（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'））; 
  

现在，我希望注入的脚本能够传回给扩展名。

看起来我正在寻找的是文档中描述的内容。

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

---

编辑：运行示例代码的第一个问题已解决。

我从smae代码得到的另一个错误来自 port.postMessage ：

$ b

未捕获错误：试图使用断开的端口对象

$ b


$ b $ var port = chrome.runtime.connect（）;

//响应来自注入脚本的消息以收集结果
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）;


基本上，我试图在页面重新加载时暂时保留一些数据。内容脚本/注入脚本收集数据，然后加载下一页。后台脚本应该保存结果，直到所有页面都被加载完毕。 不要混淆 content.postMessage 在contentscript.js例子中用 window.postMessage 。

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

在你的情况下，使用通配符可能就足够了，因为你是从页面发送消息给自己的：

  window.postMessage（{type：FROM_PAGE，text：Hello from the webpage！}，*）; 
  ^^^   

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

What I am trying to accomplish is:

1. background.js shows page action for targetted URLs.
2. Page action executes a script when clicked.
3. Executed script injects javascript on page.

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

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

---

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

Uncaught Error: Attempting to use a disconnected port object

Here's the code:

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.

解决方案

Don't confuse the port.postMessage in the contentscript.js example with 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！