7

I'm building an extension to integrate with Gmail and integrating with Gmail by injecting the gmail.js into the page context, as shown here: https://github.com/KartikTalwar/gmail-chrome-extension-boilerplate/blob/master/content.js

That seems to be the only obvious way to make use of some globals that Google is embedding on the page.

So now, I need to get back to some of the functionality of the extension. Under normal conditions (operating from a content script), I would send a message to the background script, but is that even possible from the context of the tab itself?

Xan
  • 74,770
  • 16
  • 179
  • 206
brandonhilkert
  • 4,205
  • 5
  • 25
  • 38

2 Answers2

20

A page-context script cannot, indeed, use Chrome API.
It can, however, dispatch DOM events that can be caught by the content script.

There is an example in the documentation here. Besides using window.postMessage, you can dispatch custom events.

So, you need to make your content script to work like a proxy between page context and background. Something along these lines:

// Content script
//Listen for the event
window.addEventListener("PassToBackground", function(evt) {
  chrome.runtime.sendMessage(evt.detail);
}, false);

// Page context
var message = {/* whatever */};
var event = new CustomEvent("PassToBackground", {detail: message});
window.dispatchEvent(event);

You can generalize this to pass an answer back.

Community
  • 1
  • 1
Xan
  • 74,770
  • 16
  • 179
  • 206
  • @Xan could you please tell how I would make the script that comes from the page to call the content-script with a callback? Let's say I want to send an http request, and I want the extension to do it for me due to CORS errors. So I'll need to know within my app what the response will be... How would I do that? Thanks! – Emo Oct 05 '17 at 16:25
10

Just to expand on this a bit, when using gmail.js, in order to get a message from main.js to your extension page, you need to use your content script as an intermediary. This diagram will hopefully illustrate. 

main.js
 |
 | window.postMessage();
 |
 V
content.js //window.addEventListener("message", callback, false);
 |
 | chrome.runtime.sendMessage();
 |
 V
background.js //chrome.runtime.onMessage.addListener(callback);
Tom
  • 419
  • 4
  • 5