CODEWITHSUNDEEP
javascriptgoogle-chromegoogle-chrome-extension
Matthew Lucas
Matthew Lucas

Reputation: 443

DOM Exception 12 for window.postMessage

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.

Upvotes: 1

Views: 4076

Answers (1)

Rob W
Rob W

Reputation: 348992

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!" }, "*");
                                                                           ^^^

Upvotes: 6

Related Questions