0

I'd like to understand how to display a different popup for a Chrome extension based on the URL that it is being clicked on. For example, on certain URLs domain-wide, like amazon.com or target.com.

I've added a content.js file that is now properly displaying the content I want upon clicking the extension icon!

index_domains = ['https://www.target.com', 'https://www.amazon.com']

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    var currentUrl = tabs[0].url;

    var domains = ['target.com', 'amazon.com']
    var domainMatch = domains.some(function(domain) {
        return currentUrl.includes(domain);
      });

    if (domainMatch) {
        setTimeout(() => {  console.log("working?"); }, 3000);
        chrome.action.setPopup({
            popup: 'index_state.html'})
    }
    else {
        chrome.action.setPopup({
            popup: 'sleep_state.html'})
    }
})

The issue is that it only does this on the second time I click on the extension icon, not the first time. How do I make sure that this is happening on the first click?

I also do have a part of my manifest.json file that sets a default_popup... I suspect this is part of the issue:

"action": {
    "default_popup": "sleep_state.html",
    "default_icon": "sleeping_state.png"
  },

Edit: Also, it seems like it is only updating the popup window one time. Clicking on other websites where sleep_state.html should trigger does not revert the popup back, even on multiple clicks.

Alex Kim
  • 1
  • 1
  • 1
    Use declarativeContent API to change the icon automatically: [an example](/a/64475504/) and [more](/q/28750081). In popup.js [get the active tab URL](/q/1979583) and simply toggle visibility of html elements in the popup like elem.hidden=true. – wOxxOm Mar 17 '23 at 20:08

0 Answers0