为Chrome扩展程序将监听器设置为当前选项卡

Question

我创建的Chrome扩展程序在用户位于非亚马逊网站和Amazon.com上时具有不同的文字和图标。

目前这是我的代码：

chrome.tabs.query({active: true, currentWindow: true}, function(arrayOfTabs) {
    // since only one tab should be active and in the current window at once
    // the return variable should only have one entry
    url = arrayOfTabs[0].url;
    //alert(url);
    console.log(url);
    var hostname = extractHostname(url);
    //ACTIVE
    if (hostname.indexOf("amazon.com") >= 0){
        chrome.browserAction.setIcon({path:"img/color-ddg/logo32.png"});
        window.document.getElementById("headerLogo").src="img/color-ddg/logo48.png";
        window.document.getElementById("activeLogo").style.display = "initial"; 
        window.document.getElementById('activeState').innerHTML = "Active";
        window.document.getElementById("activeState").style.color = "#23BB61"; 
        window.document.getElementById('activeText').innerHTML = "Hey there! Because you’re on Amazon.com right now, this extension is sending your anonymous Amazon browsing information to Data Does Good to generate money for your favorite nonprofit. No personal or sensitive information is being sent - only things like the products that are being examined and products being searched for. You can disable this extension at any time by visiting your Chrome Extension settings. Look at you, you’re doing good and taking control of your data! Love you ❤️";
    }
    //INACTIVE
    else {
        chrome.browserAction.setIcon({path:"img/gray-ddg/logo32.png"});
        window.document.getElementById("headerLogo").src="img/gray-ddg/logo48.png";
        window.document.getElementById("activeLogo").style.display = "none"; 
        window.document.getElementById('activeState').innerHTML = "Inactive";
        window.document.getElementById('activeText').innerHTML = "Hey there! Since you’re not currently on Amazon.com, this extension isn’t doing a single thing. If you go to Amazon.com, this extension will send your anonymous Amazon browsing information to Data Does Good to to generate money for your favorite nonprofit. Look at you, you’re doing good and taking control of your data! Love you ❤️";
    }
});

我希望我在非亚马逊网站上的徽标是灰色的;但是，只有在我首先点击它时才会更改。

我试图使用https://developer.chrome.com/extensions/tabs#event-onActivated;然而，没有运气。

当用户切换标签时，如何创建一个侦听器来专门通过当前标签进行更改？因此，例如，当用户在Amazon.com上时，徽标将更改颜色，如

chrome.browserAction.setIcon({path:"img/color-ddg/logo32.png"}); 

编辑：为了使它成为一个最小，完整和可验证的例子，这里是我的manifest.json

{
    "manifest_version": 2,
    "name": "Data Does Good Amazon Affliate Program",
    "short_name": "DDG Amazon Affliate",
    "description": "This extension makes your Amazon purchases benefit charity through Data Does Good.",
    "version": "1.0",
    "homepage_url": "https://www.datadoesgood.com",
    "author": "Data Does Good, PBC",
    "browser_action": {
        "default_icon": "img/gray-ddg/logo32.png",
        "default_popup": "popup.html",
        "default_title": "Data Does Good"
    },
    "background": {
        "scripts": ["ddg_amazon.js"]
    },
    "content_scripts": [
        {
          "matches": ["http://*/*", "https://*/*"],
          "js": ["contentscript.js"],
          "run_at": "document_end"
      }
  ],
    "icons": {
        "16": "img/color-ddg/logo16.png",
        "32": "img/color-ddg/logo32.png",
        "48": "img/color-ddg/logo48.png",
        "64": "img/color-ddg/logo64.png",
        "128": "img/color-ddg/logo128.png"
    },
    "permissions": ["activeTab" ,"tabs", "webRequest", "webRequestBlocking", "http://www.amazon.com/*", "https://www.amazon.com/*", "http://smile.amazon.com/*", "https://smile.amazon.com/*"]

}