Please Explain Background Communication with Google Chrome Extensions

Question

I have read and re-read this page, as well as run the samples:

http://code.google.com/chrome/extensions/background_pages.html

But I don't seem to grasp how to do the background communication between the background.html, popup.html, and content.js. I want to send messages to trigger functions, get responses, and process those responses. The map sample was sort of close to helping me, but I just need something super simple and not need all that map stuff. (Note, I know jQuery as well as Javascript, so feel free to mix in a bit of jQuery if you want.)

Answer 1

All extension pages (background page, popup, infobar, page action all run inside the same extension. Think of it as a webpage with one domain. And that domain is your extension ID. Each one of those extension pages is like a regular page (similar when you develop a website).

All extension pages (mentioned above) can communicate with each other easily, you have multiple ways doing so:

1. chrome.extension.getBackgroundPage()

   You do it directly! I use this approach whenever I can. Its cleaner in my opinion.

   var bkg = chrome.extension.getBackgroundPage();`  
   bkg.ping();`
   

2. chrome.extension.onRequest.addListener and chrome.extension.sendRequest

   As shown below, you can use extension messaging to pass information as well. I use this approach when I want it to be event oriented. I rarely use this within extension pages.

   popup.html

   chrome.extension.sendRequest({method: 'ping'}, function(response) {
      // response.result
   });
   

   background_page.html

   chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
       if (request.method == 'ping') {
           sendResponse({result: 'pong'});
       }
   });
   

Now there is a difference between "Extension Pages" and "Content Scripts". Please read that document carefully to understand it. A content script is not a extension page, you cannot do what extension pages do. You cannot directly communicate to any of those pages mentioned above. Content Scripts are JavaScript files that run in the context of web pages, not extension pages. Thats an important distinction to recognize.

So in order to communicate between your extension pages and content script, you need to use Messaging. That page has a lot of information, I highly recommend you to read it. It is very similar to how we used messaging (step 2 above), but the only different is how you send a request. You would need to use chrome.tabs.sendRequest, because you need to send a single request to the content script from your extension page (background, popup, page, etc). You would need to know the ID of your tab in order to do that. Please look at the Tab API for more info.

If your extension communicates with your content script very often, you can use Long Lived connections, which is explained pretty well in the Messaging section I liked above.

I have answered many questions and other people too regarding similar questions. Since your experienced in JavaScript, I highly recommend you to read the documentation, it has everything you need. Read the API, and I hope I you now understand the difference between Content Script and Extension Pages, and the communication between them is through Extension Messaging.