0

Currently, I mainly work with two files, background.js and popup.js. In background.js

I have a bunch of functions that let me store data in an IndexedDB. And in popup.js I call the functions like this:

 chrome.runtime.sendMessage({
    message: "insert",
    payload: [
      {
        url: form_data.get("message"),
        text: form_data.get("message"),
      },
    ],
  });

Depending on the message, a certain function is called. When the function has successfully executed I do this from the background.js file:

chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.message === "insert") {
    let insert_request = insert_records(request.payload);

    insert_request.then((res) => {
      chrome.runtime.sendMessage({
        message: "insert_success",
        payload: res,
      });
    });
});

This is my problem:

How do I send data from background.js to popup.js. What I want is to get the URL of the current page, and then send it to popup.js and store it in the Database.

I have already looked at already existing posts, but none of them really helped.

Can someone please help me out.

Update

Currently I use this is in background.js to get the current URL. It works just fine. But how can I pass the tab.url to my popup.js file?:

let activeTabId, lastUrl, lastTitle;

function getTabInfo(tabId) {
  chrome.tabs.get(tabId, function (tab) {
    if (lastUrl != tab.url || lastTitle != tab.title)
      console.log((lastUrl = tab.url), (lastTitle = tab.title));
  });
}

chrome.tabs.onActivated.addListener(function (activeInfo) {
  getTabInfo((activeTabId = activeInfo.tabId));
});

chrome.tabs.onUpdated.addListener(function (tabId, changeInfo, tab) {
  if (activeTabId == tabId) {
    getTabInfo(tabId);
  }
});
Nick
  • 219
  • 4
  • 15
  • You're half way there. Just use sendResponse as shown in the [documentation](https://developer.chrome.com/extensions/messaging) (pay attention to the note about `return true`, see an [example](/a/59915897)). BTW You probably don't need a background script at all because writing the database can be done directly in the popup script, which will be faster than messaging. See also [How can I get the URL of the current tab?](https://stackoverflow.com/q/1979583) which can be also used directly in the popup. – wOxxOm Sep 18 '22 at 07:20
  • Thanks for the reply, I looked at the documentation and other links you provided. But I am still unsure as to what to do. Can you please provide some code or further explanation? Btw I want to constantly listen for URL updates, does that make a difference?. @wOxxOm – Nick Sep 18 '22 at 08:32
  • To track the URL you can use a chrome.tabs.onUpdated listener in the popup script. – wOxxOm Sep 18 '22 at 09:15
  • I just updated my post. I know I can use that piece of code in my background.js file. But when I paste it into popup.js nothing happens. Any ideas? More importantly, I still dont understand how to pass data. Help Please – Nick Sep 18 '22 at 09:47
  • 1) Note that the popup is a separate window so it has its own separate devtools: right-click inside the popup and select "inspect" in the menu. 2) You already pass data in sendMessage so I guess your popup script doesn't have onMessage to receive it. My first comment suggests a better alternative using sendResponse. – wOxxOm Sep 18 '22 at 10:10
  • Okay, i see. I updated my post once again. I now have a fully working piece of code that gets the current URL, which is great. Now, How do I pass that to my popup.js file? I cant comprehend what to do, so I would really appreciate it if you could provide some specific code i could use. Thank you – Nick Sep 18 '22 at 11:44
  • Simply move this code into popup.js. You don't need background script for this task. – wOxxOm Sep 18 '22 at 11:51
  • When I do so, it doesnt console.log anything. Any ideas? – Nick Sep 18 '22 at 12:30
  • Note that the popup is a separate window so it has its own separate devtools: right-click inside the popup and select "inspect" in the menu. – wOxxOm Sep 18 '22 at 13:11
  • I already did that. still nothing. I simply right-click on the icon and then "inspect". Still not working. But if I were to have the code in background.js how could I pass it to popup.js? – Nick Sep 18 '22 at 13:13
  • We're going in circles but I have a new guess: do you know that the popup runs only when it's shown so it won't show you previous console? If you want to debug it then open devtools for the popup, then navigate in the tab. – wOxxOm Sep 18 '22 at 13:51

0 Answers0