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 acplish 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 municate back to the extension.
It seems like what I am looking for is what's described in the documentation.

.html#host-page-munication

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.

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 acplish 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 municate back to the extension.
It seems like what I am looking for is what's described in the documentation.

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

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.

• javascript
• google-chrome
• google-chrome-extension

Share Improve this question Follow edited Apr 18, 2013 at 20:26 Matthew Lucas asked Apr 18, 2013 at 1:14 Matthew LucasMatthew Lucas 44311 gold badge55 silver badges1515 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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