0

I'm presently unable to maintain a stateful position with popup.html/popup.js when building a Google Chrome Extension.

I'm currently able to get the triggers/listeners to work so that background.js executes, calls a REST API, retrieves a result. I'm unclear in where I should be saving this variable data so that I can call on it later for the popup. Currently trying storage.sync

Whenever I try to update my popup.html leveraging the DOM to adjust the innerHTML (from popup.js) to reflect the result retrieved - it refreshes the popup.html page on all windows.

For example, if I have 3 windows open, with the Chrome Extensions Popup shown, and I refresh one tab, the body of the popup changes on all 3 windows, rather than on the window that has focus.

Is there a way to ensure that the popup.html only shows content, specific to the tab that it is on. That is to say, have it expanded on X number of windows, with the unique state of that tab shown? I've seen it on a number of extensions like WOT or Wappalyzer but am unable to reproduce.

TLDR; In summary, I simply want to retrieve a result from a REST API, based on the current tab's URL, then have that information shown in the popup and kept there as unique to that tab, or until its forcefully refreshed.

Your assistance is greatly appreciated - thanks in advance.

manifest.json

    "browser_action": {
     "default_icon": "icon.png",
     "default_popup": "popup.html"
    },
    "background": {"persistent": false, "scripts": ["background.js"]},
    "permissions": [
        "webNavigation",
        "notifications",
        "identity",
        "identity.email",
        "storage",
        "tabs"
    ],
    "web_accessible_resources": [
        "/*.png"]
g33k84
  • 138
  • 9
  • In addition to the url also pass the tab id to your background script and add it to the response so your popup script can compare it and skip or process the message accordingly. There can be alternatives depending on how your background script is called from the popup e.g. you can use chrome.runtime.sendMessage + `return true` and sendResponse in the listener so only the original popup gets the response. – wOxxOm May 12 '20 at 14:42
  • I believe you could set-up a listener for a new tab in background.js then send a message to popup.js which in turn updates popup.html. See if this thread helps, it's pretty comprehensive: https://stackoverflow.com/questions/13546778/how-to-communicate-between-popup-js-and-background-js-in-chrome-extension – Yakko Majuri May 12 '20 at 14:43

0 Answers0