javascript - 如何为 chrome 扩展制作开/关按钮/图标？

Question

我想让用户决定何时运行脚本，这样当浏览器打开时，会显示“关闭”图标并且没有脚本运行；但是当用户单击它时，它会变为“打开”图标并执行用户脚本，直到用户单击关闭。我有两个 png 图标，每个图标都是 32x32：on.png和off.png.

我的两个问题：

1. 如何将默认图标设置为我的 off.png？我在我的尝试过，manifest.json但它没有设置图标，而是显示了一个拼图（我假设是默认值）：

   ...
   "browser_action": {
      "default_icon": {
          "32": "off.png"
          },
      "default_title": "icon"
   },
   "icons": {
      "32": "on.png",
      "32": "off.png"
   },
   "background": {
      "scripts": ["background.js"] 
   }, 
   "content_scripts": [{ 
      "js": ["SCRIPT.user.js"]
   ...
   

2. 这是我的background.js，我暂时做了一个快速功能来尝试根据onClicked

   var status = 0;
   
   function toggle() {
   if (status == 0){
       chrome.browserAction.setIcon({path: "on.png", tabId:tab.id}); // so it's set for the tab user is in
       chrome.tabs.executeScript(tab.id, file:"SCRIPT.user.js"); //execute for this tab
       status++;
   }
   if (status == 1){
       chrome.browserAction.setIcon({path: "off.png", tabId:tab.id});
       chrome.tabs.executeScript(tab.id, code:"alert()"); // execute nothing when off
       status++;
   }
   if (status > 1)
       status = 0; // toggle
   }
   
   chrome.browserAction.onClicked.addListener(function(tab) {
       toggle();
   });
   

（我应该提到，当我在“加载解压扩展”中加载包含我的脚本、图标和清单的文件夹，然后选择“检查视图”以检查是否有任何立即错误时，我Uncaught SyntaxError: Unexpected token :在 background.js 中看到，虽然我没有不知道它指的是什么）......而且它似乎没有在脚本文件夹中显示我的用户脚本

那么，有什么想法，有帮助吗？

Answer 1

好的，让我对您的清单和背景页面进行一些更改。

清单.json

"browser_action": {
  "default_icon": "off.png",
  "default_title": "icon"
},

这将成为默认值off.png。至于图标部分，请阅读文档以了解它的用途，但现在只需将其完全删除。还要删除您在 contentScripts 部分中的内容。如果您想以编程方式注入它，则无需在清单中列出它。

接下来对背景页面进行一些更改，使其更加干净：

背景.js

var toggle = false;
chrome.browserAction.onClicked.addListener(function(tab) {
  toggle = !toggle;
  if(toggle){
    chrome.browserAction.setIcon({path: "on.png", tabId:tab.id});
    chrome.tabs.executeScript(tab.id, {file:"SCRIPT.user.js"});
  }
  else{
    chrome.browserAction.setIcon({path: "off.png", tabId:tab.id});
    chrome.tabs.executeScript(tab.id, {code:"alert()"});
  }
});