sending message to chrome extension from a web page

Question

I want to send message from the console of the random web page to my chrome extension. chrome.extension.sendMessage doesn't seem to work.

Answer 1

According to the official docs you should use postMessage in the sender and message event listener in the receiver.

Here is an example:

Your website's page.html

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

Content script: (injected using chrome.tabs.executeScript(tabid, {code:...)

window.addEventListener("message", function(event) {     // We only accept messages from ourselves     if (event.source != window)         return;      if (event.data.type && (event.data.type == "FROM_PAGE")) {         console.log("Content script received message: " + event.data.text);     } }); 

Here page.html (which is not a part of the extension) posts messages to itself, which are intercepted and inspected by the content script. The reverse is possible through similar means.

To pass from content script to extension, you will have to use one of the available message-passing techniques.

It looks complicated and it is somewhat complicated but all this mumbo-jumbo is very secure.

Answer 2

Here's a quote from the latest http://developer.chrome.com/extensions/messaging.html, It's much simpler to support this kind of feature now, here's how:

Sending messages from web pages

Similar to cross-extension messaging, your app or extension can receive and respond to messages from regular web pages. To use this feature, you must first specify in your manifest.json which web sites you want to communicate with. For example:

"externally_connectable": {   "matches": ["*://*.example.com/*"] } 

This will expose the messaging API to any page which matches the URL patterns you specify. The URL pattern must contain at least a second-level domain - that is, hostname patterns like "", ".com", ".co.uk", and ".appspot.com" and <all_urls> are prohibited. From the web page, use the runtime.sendMessage or runtime.connect APIs to send a message to a specific app or extension. For example:

// The ID of the extension we want to talk to. var editorExtensionId = "abcdefghijklmnoabcdefhijklmnoabc";  // Make a simple request: chrome.runtime.sendMessage(editorExtensionId, {openUrlInEditor: url},   function(response) {     if (!response.success)       handleError(url);   }); 

From your app or extension, you may listen to messages from web pages via the runtime.onMessageExternal or runtime.onConnectExternal APIs, similar to cross-extension messaging. Only the web page can initiate a connection. Here is an example:

chrome.runtime.onMessageExternal.addListener(   function(request, sender, sendResponse) {     if (sender.url == blacklistedWebsite)       return;  // don't allow this web page access     if (request.openUrlInEditor)       openUrl(request.openUrlInEditor);   });