Question

I have been going in circles (probably because I am somewhat new) to how communication takes place in Chrome Extensions.

I am trying to build an extension that:

1) has a popup that interacts with the user
2) based on what the user chooses in the popup, the DOM of the current tab is modified
3) the popup also needs to be able to send and receive information from a remote database server (i.e. an external website w/ database)

For me, it is very unclear as to how to architect the communication between all the pieces: my db, popup, background.html, content scripts, webpage….

any thoughts?
Anthony

Answer 1

I will try to explain in steps what I think the nice way of doing this. It doesn’t mean it is the best way, it just a recommended way 🙂

---

User Story

If I understand the question correctly, you would like to show a popup on the website. Based on what the user chooses in the popup, the websites DOM will be modified. As well, you would like the popup to receive remote data.

The Plan

From the above requirements, you will quickly find out that the following is required:

• Content Script – Because you would need to communicate to the DOM directly.
• Background Pages – You need a single place to do external XHR requests (to communicate to a remote server).
• Message Passing – To communicate between the Content Script and the Background Page.

By using Message Passing mechanisms, you will be able to pass data between two different worlds (Context Menus, and Background Page). Whenever you want to call a remote service, you will request that through Messaging. Below, I will explain each step along the way.

---

Popup

Your popup will just be a normal “div” element that you dynamically create in JavaScript. Something like following:

var overlayDOM= document.createElement('div');
... add your stuff to overlayDOM
document.body.appendChild(overlayDOM);

Or you can use an iframe, to preserve the style. Using CSS techniques, you can style it appropriately to look like a popup. You can do this by using absolute positioning or anything fancy along those lines.

Context Menu

Now there are two ways to use content scripts. The questions that you have to ask yourself is the following:

• Is a user going to activate that popup from the browser process? For example, is the popup going to show up programmatically from any extension UI (context menus, page actions, browser actions, specific events, etc).

or

• The popup will always visible on the DOM, no user intervention is needed to make it visible.

If you choose the former, then you can use the tabs executeScript functionality. It is pretty straight forward, all you need to do is supply the code or the JavaScript file that you want to inject to the DOM (Website). For example:

chrome.tabs.executeScript(tabId, {file: 'popup_overlay.js'});

If you planned to choose the latter (the popup always visible on the page). You can inject that popup_overlay.js in every page by defining it in the manifest.

"content_scripts": [
   {
     "matches": ["http://www.google.com/*"],
     "css": ["mystyles.css"],
     "js": ["popup_overlay.js"]
   }
],

Background Page

The background page will have permission so that it can communicate to the remote database. The first thing you need to do is supply the correct permissions via manifest. Make sure you look at the Match Patterns to make sure your permission is as limited as possible.

"permissions": [
  "tabs",
  "http://www.mywebsite.com/"
],

Once you setup the permissions, you can communicate to the remote service via XmlHttpRequests (XHR). Create your JavaScript service API that uses XHR, feel free to use any design you please. I personally like to use JavaScript objects to organize my code. Your background page will have access to those instantiated service API that you create and that you can use throughout the lifetime of your extension.

// Lives in the Background Page
var service = new RemoteService();

Message Passing

As explained above, Message Passing is used to allow communication between the Content Script and the Background page. In your case, you want the popup to grab some data from the background page (since that is where your JS object lives) and return the results back. When you get those results and display them on the page since your already in the same world as the DOM.

You first need to setup the background page to receive requests, this is how you setup the request listener:

chrome.extension.onRequest.addListener(function(request, sender, sendResponse) {
  if (request.method == 'GetUserList')
    sendResponse({result: db.getGetUserList()});
  else if (request.method == 'GetUser')
    sendResponse({result: db.getGetUser(request.username)});
  else
    sendResponse({}); // snub them.
});

You can make the above fancier, but for the sake of explaining, I am following the Message Passing document, which explains it perfectly. As you see above, we are creating a listener for extension requests. You handle the request within the listener. As you noticed, you can send back a response too. In the above case we are sending back the appropriate result for the method we are requesting.

In your content script you can easily send the request to the background page:

// Retrieve the username called mohamedmansour. Continuation from above.
chrome.extension.sendRequest({method: 'GetUser', username: 'mohamedmansour'}, function(response) {
  console.log(response.result);
});

In the code snippet above, we are sending a request back to the extension from the Content Script to get the user data for “mohamedmansour”. Then the result is printed in the console.

Once you get your mind around Messaging, you will notice how easy it is for sending JSON messages back and fourth.

Hope that helps!