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

Question

创建了我的第一个 Chrome 扩展程序。第一次在这里发帖。

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

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

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

清单.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"]

}

背景.js

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

背景图标.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，因为它有效。我认为我真的应该使用某种形式的错误检查来查看字符串是否存在，因此它不会重复。还要放置？而不是 & 用于单独的查询，但实际情况是该站点始终具有某种搜索查询。

现在我真的只是想弄清楚如何更改图标以反映我的自定义搜索参数。该网站目前不允许用户提出此特定查询。因此需要扩展。

我如何实现这一目标？

标签： javascripturldynamicgoogle-chrome-extensionicons