1

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.

Improve this question

1 Answer 1

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 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!" }, "*"); ^^^
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thank You, that was exactly it! I should have paid more close attention to the sample. One more question, if you don't mind. Continuing on with the same code, the port.postMessage portion isn't working now. My listener script runs, and I log the data to verify that it does exist, but it's now saying that the port is closed.
Then one of the ends died. Can't tell the exact reason without seeing your code.
I updated the original post with some additional details, if that helps.
@MatthewLucas What about the other side of the channel?
Please excuse me, I clearly haven't had my coffee! That was the problem, I didn't add code on the background end at all. I literally started out by re-typing the code on the sample page, and it didn't even cross my mind to add that. Thank you for all your help!

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.