如何更改Chrome扩展程序图标以指示它已成功在URL中放置了特定的查询字符串？

Question

创建了我的第一个Chrome扩展程序。 首先发布在这里。

单击图标后，可将其用于在特定网站中放置搜索参数。 这很粗糙，但是它可以正常工作并成功更新搜索条件，并返回所需的结果，这是我们的核心目标。 （我不是程序员，这无疑是显而易见的！）

我正在使用页面操作来一次在适用的站点上取消图标的灰色显示。 我用Onclick将查询字符串附加到URL并通过popup.js刷新。 这似乎是一种非常粗糙的方法，但是它可以工作。

我该如何安排事物，以便扩展图标在视觉上发生变化，以指示查询字符串已放置在URL中并且仍然存在于URL中。 如果用户操纵站点的常规搜索条件，则该特定网站随后会刷新我的搜索字符串。 因此，我希望该图标具有动态性，当我的查询字符串到位时会更改，而在网站将其清空后再更改回去。 而且还保留了页面操作意识，因此它在离开网站时显示为灰色且处于非活动状态。

Manifest.json

{
  "manifest_version": 2,
  "name": "Filter",
  "description": "Filter a site for something.",
  "version": "1.4",

  "page_action": {
    "default_title": "Filter website for an item",
    "default_icon": {
      "16": "get_started16.png",
      "32": "get_started32.png",
      "48": "get_started48.png",
      "128": "get_started128.png"
    }
  },
  "icons": {
    "16": "get_started16.png",
    "32": "get_started32.png",
    "48": "get_started48.png",
    "128": "get_started128.png"
  },
  "background":{
    "scripts":["background.js", "backgroundicon.js"]
  },

  "permissions": ["activeTab", "tabs", "declarativeContent"]

}

background.js

chrome.pageAction.onClicked.addListener(function(tab) {
  chrome.tabs.executeScript(null, {
    "file": "popup.js"
  }, function(){ 
    "popup.js";
    console.log("Script Executed ...");
  });
})

backgroundicon.js

// When the extension is installed or upgraded ...
chrome.runtime.onInstalled.addListener(function() {
  // Replace all rules ...
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    // With a new rule ...
    chrome.declarativeContent.onPageChanged.addRules([
      {
        // That fires when a page's URL contains text 'airbnb' ...
        conditions: [
          new chrome.declarativeContent.PageStateMatcher({
            pageUrl: { urlContains: 'website.com'},
                }),
           new chrome.declarativeContent.PageStateMatcher({
             pageUrl: { urlContains: 'website.co.uk' }
          })
        ],
        // And shows the extension's page action.
        actions: [ new chrome.declarativeContent.ShowPageAction() ]
      }
    ]);
  });
});

popup.js

// Change the url to include item Socks when clicked

window.location.search += '&socks3B%2D=22'

我使用过popup.js，因为它可以工作。 我收集到的信息确实应该使用某种形式的错误检查，以查看字符串是否存在，因此它不会重复。 还可以放吗？ 而不是＆来进行单独的查询，但现实情况是，该站点始终具有某种形式的搜索查询。

现在，我真的只是在尝试找出如何更改图标以反映我的自定义搜索参数的位置。 网站目前不允许用户放置此特定查询。 因此需要扩展。

我该如何实现？