Passing data from background.js to popup.js

[SAI VIJAY KUMAR MAKINEEDI]

Hi,

I am new to chrome extensions. I am developing an extension, I want to send data collected in background.js file to popup.js file. I am unable to find a way to transfer data from background.js to popup.js. 

can someone suggest me how can I send data from background script to popup.js.

manifest version 3.

Thanks in advance.

Regards,

Vijay

[Christian Mariño Alvarez]

You can use BroadcastChannel API is not chrome api but you can use it. 

https://developer.mozilla.org/en-US/docs/Web/API/Broadcast_Channel_API

Is a Api to comunicate windows, tabs or iframe with the same domain. In your case, the extension domain.

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/742afda7-4b60-40dc-a945-bcc70a7f2fb8n%40chromium.org.

[SAI VIJAY KUMAR MAKINEEDI]

Thanks for suggestion.

I have tried using broadcast_channel_api but it didn't work.

if possible can you provide an example code?

[SAI VIJAY KUMAR MAKINEEDI]

Here is my sample code

in background.js i have captured the current tab url and seperated the domain from the url.

chrome.tabs.onActivated.addListener(function(activeInfo) {

chrome.tabs.get(tab, function(tab) {

var link = tab.url;

//console.log(link);

var dmn = extractdomain(link); //domain name saved in the dmn variable

console.log(dmn);

})

})

now i want to send dmn variable to popup.js file so that i can display the domain on popup.html 

[Christian Mariño Alvarez]

You can use the same code that you were using in the background page in the popup. The chrome.tabs is available to use into popup

[Christian Mariño Alvarez]

Return about BroadcastChannel, I shared with you a simple example:

// service worker

const channel = new BroadcastChannel('YOUR_CHANNEL_NAME');

channel.onmessage = (msg) => {

 console.log('message received from popup', msg);

 channel.postMessage({ msg: 'Hello popup from service worker'});

};

// popup.js

const channel = new BroadcastChannel('YOUR_CHANNEL_NAME');

channel.onmessage = (msg) => {

 console.log('message received from service worker', msg);

channel.postMessage({ msg: 'Hello service worker from popup'});

The service worker always wake up when received the message, so the first message should be from popup to service worker.

I hope you understand me the example ;-)

[SAI VIJAY KUMAR MAKINEEDI]

Thanks for clarification.

Your example answers my doubt.

[guest271314]

I suggest making sure to close() the BroadcastChannel when usage is complete, to avoid the BroadcastChannel and ServiceWorker surviving beyond page reload https://bugzilla.mozilla.org/show_bug.cgi?id=1676043.

[Phil Oxnard]

Here's what I'm using in my project to send info from the background to the popup. My event listener is on an updated tab, but I figure you could do whatever listener you want. Note that this only works when the popup is open (a problem I'm trying to fix, but may not be a problem for you):

background.js:

chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab){

   if (changeInfo.url){

      chrome.runtime.sendMessage({

         msg: changeInfo.url

      })

   }

})

popup.js

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse){

   console.log("From popup.js")

   console.log(request.msg)

})

[Jackie Han]

Hi Phil,

Your code can work. But you can listen events on the popup page directly (or any other extension page) , thus no need to send messages. For example, put "tabs.onUpdated.addListener()" in popup.

To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/b4f6f39c-8702-46db-bdc9-491e1c6543fen%40chromium.org.

[Roberto Oneto]

Hi everyone,

With BroadcastChannel I solved a problem of creating and downloading a big file.

I delegate the heavy work to the service worker. This job is to create a very long string from a JSON object (JSON.stringify)

Then this string is transformed into a blob and transferred via BroadcastChannell message to the extension page which creates the download link.

With chrome.runtime.sendMessage you cannot transfer objects like Blob.

With BCC you also free yourself from a one-time requests logic that is often a bit tight.

The only flaw is that BroadcastChannel is not supported by Safari yet.