如何为Chrome扩展程序打开/关闭按钮/图标？

Question

我想让用户决定何时运行脚本,以便在浏览器打开时显示"off"图标并且没有脚本运行; 但是当用户点击它时,它会变为"on"图标并执行用户脚本,直到用户点击为止.我有两个png图标,每个32x32:on.png和off.png.

我的两个问题:

1. 如何将默认图标设置为my 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 :在后台看到.虽然我不知道知道它指的是什么... ...它似乎没有在脚本文件夹中显示我的用户脚本

那么,任何想法,有帮助吗？

Answer 1

好吧,让我对您的清单和背景页面进行一些更改.

的manifest.json

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

这将成为默认值off.png.至于图标部分,请阅读文档以查看它的用途,但现在只需将其完全删除即可.同时删除contentScripts部分中的内容.如果要以编程方式注入它,则无需在清单中列出它.

接下来对您的后台页面进行一些更改,使其更加干净:

background.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()"});
  }
});