4

My question is fairly simple and I just want to figure out the easiest way to do this.

The current iteration of my chrome extension injects a DIV into the webpage with a button, which, when pressed, will execute a function.

I want to do this without injecting DIVs, by executing a function within one of my content scripts when the browser button is pressed in the toolbar. What's the simplest way to go about this? I believe I have to use the background page, and the only thing I see in documentation is registering some listening events on both ends. If this is the only/simplest way, how do I go about doing this?

danmullen
  • 2,556
  • 3
  • 20
  • 28
Thirk
  • 571
  • 1
  • 7
  • 24

2 Answers2

18

Yes, contacting a content script from a browser or page action button is done using messages sent back and forth between the background script and the content script(s)

First step: Tell the background script what to do on browserAction/pageAction button click

chrome.browserAction.onClicked.addListener(function(tab) {
   ...
});

Step 2: Inside the browserAction.onClicked event listener you can then send a message to the content script (in fact to any code listening!):

chrome.tabs.sendMessage(tab.id, {<YOURMESSAGEPAYLOAD>});

Step 3: Inside the content script, you add a listener for incoming messages

chrome.runtime.onMessage.addListener(function(request, sender, callback) {
   // request contains the YOURMESSAGEPAYLOAD sent above as a Javascript object literal
});

You can also go the other way round and send messages from the content script to the background script by using the following inside the content script

chrome.runtime.sendMessage({<YOURMESSAGEPAYLOAD>});

and then use the onMessage listener inside the background script the same way as mentioned above.

devnull69
  • 16,402
  • 8
  • 50
  • 61
  • The documentation doesn't say, but I assume that the `tab` argument to `onClicked` is the active tab. This would let you get `tab.id` without needing `query`. – Teepeemm Sep 10 '14 at 18:16
  • Indeed ... I changed the example accordingly – devnull69 Sep 11 '14 at 07:47
  • I know this is a bit late and thanks a million for this answer but it's addListener rather than addEventListener. – Samuel Willems Apr 19 '15 at 01:19
  • Hey all, can this be done other way round as well? Like from content script I want to call a method in my browser action page JS – Kaushik Ray Mar 13 '16 at 19:24
  • Thanks @devnull69 you nearly suggested me a solution. I am trying to convert chrome extension into safari extension. XCode provides me readymade tools but some bridging knowledge will be required. Thanks again. Hopefully your solution helps here => https://stackoverflow.com/questions/49103924/extensions-stops-execution-on-browser-browseraction-onclicked-addlistenerfunct – Paresh Thakor Jul 08 '20 at 13:28
0

devnull69 is correct, you need to use message passing. Also consider checking out chromeps. It's a small pubsub library I wrote for chrome extensions. Removes a lot of the overhead when writing message passing code.

anderspitman
  • 9,230
  • 10
  • 40
  • 61