Google Chrome Extension- Messages + call to function between popup page and content script

Question

In a Google Chrome extension I want to pass messages between a content script and a popup page. I also want a function in the content script to be fired when a signal to do this is sent by the popup page to the content script.

The section in Google Chrome Extensions developer docs for messages, states that messages can be passed "from your content script to an extension page, or vice versa" (quoted from http://code.google.com/chrome/extensions/messaging.html )

Does this mean that I can send/receive messages between the content script and the popup page? Because the usage I have seen is for communication between background page and content script.

Or do I have to set up a 3 - way message passing route-- viz. content script <--> background page <--> popup page. And if this is the case, how do I set up messaging between background page <--> popup page?

And how do I fire a function in the content script, after sending signal to content script from the popup page? Does this also require background script to be present?

Answer 1

Content scripts can only send a message to the background page. If you want to send a message from a content script to a popup, you have to:

1. Send the message from the Content script to the background page.

   chrome.runtime.sendMessage( ...message... , function() { /*response*/ });
   

2. Receive the message at the background.

   chrome.runtime.onMessage.addListener(function(message, sender, sendResponse) { ... });
   

3. Pass the message to the popup. To get a reference to the global window object of the popup, use chrome.extension.getViews. Note: Unlike most of the other chrome APIs, this method is synchronous:

   var popupWindows = chrome.extension.getViews({type:'popup'});
   if (popupWindows.length) { // A popup has been found
       // details is the object from the onMessage event (see 2)
       popupWindows[0].whatever(message, sendResponse);
   }
   

4. In the popup, define the whatever method.

   function whatever(message, sendResponse) {
       // Do something, for example, sending the message back
       sendResponse(message);
   }
   

5. When sendResponse (4) is called, details.sendResponse (see 3) is called. This, in turn, calls function() { /*response*/ } from 1.

Note: chrome.runtime.sendMessage/onMessage is only supported in Chrome 26+. Use chrome.extension.sendMessage if you want to support older browsers as well.