如何为Chrome扩展打开/关闭按钮/图标？ [英] how to make on/off buttons/icons for a chrome extension?

问题描述

我想让用户决定他们何时想运行脚本，以便在浏览器打开时显示off图标并且不运行脚本;但是当用户点击它时，它会变成开图标并执行一个用户脚本，直到用户点击。我有两个png图标，分别是32x32： on.png 和 off.png 。

我的两个问题：

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

     ... 
   browser_action：{
   default_icon：{
   32：off.png 
   }，
   default_title：icon
   }，
   图标：{
   32：on.png，
    32：off.png
   }，
   background：{
   scripts：[background.js] 
   }，
    content_scripts：[{
   js：[SCRIPT.user.js] 
    ... 
     




2. 这里是我的 background.js ，我暂时做了一个快速的函数来尝试切换on / off基于 onClicked

     var status = 0; 
    
    toggle b（b）{
    if（status == 0）{
    chrome.browserAction.setIcon（{path：on.png，tabId：tab.id} ）; //所以它被设置为标签用户在
    chrome.tabs.executeScript（tab.id，file：SCRIPT.user.js）; //执行这个标签
    status ++; 
   } 
    if（status == 1）{
    chrome.browserAction.setIcon（{path：off.png，tabId：tab.id}）; 
    chrome.tabs.executeScript（tab.id，code：alert（））; //关闭
    status ++时不执行任何操作; 
   } 
    if（status> 1）
    status = 0; //切换
   } 
    
    chrome.browserAction.onClicked.addListener（function（tab）{
    toggle（）; 
   }）; 
     

我在load unpacked extension中加载了包含我的脚本，图标和清单的文件夹，然后选择inspect views来检查是否立即出现错误，我看到未捕获SyntaxError：意外的标记：在background.js中，尽管我不知道它指的是什么）...并且它似乎没有在脚本文件夹中显示我的用户脚本

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

解决方案

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

manifest.json

 browser_action：{
default_icon：off.png，
default_title：icon
}，
  

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

接下来对背景页进行一些更改以使其更清晰：

background.js
$ b

  var toggle = false; 
 chrome.browserAction.onClicked.addListener（function（tab）{
 toggle =！toggle; 
 if（toggle）{
 chrome.browserAction.setIcon（{path：on ; 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（）} ）; 
} 
}）; 
  

I want to let the user decide when they want to run a script, so that when the browser opens, the "off" icon is showing and no script runs; but when the user clicks it, it changes to an "on" icon and executes a userscript, until the user clicks off. I have two png icons which are 32x32 each: on.png and off.png.

My two questions:

1. How can I set the default icon to my off.png? I tried this in my manifest.json but it didn't set the icon, instead showed a puzzle piece (I presume a default):

   ...
   "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. Here's my background.js, where I've temporarily made a quick function to try and toggle the on/off based on an 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();
   });
   

(I should mention that when I load the folder housing my scripts, icons and manifest in "load unpacked extension" and then select "inspect views" to check if there's anything immediately wrong, I see Uncaught SyntaxError: Unexpected token : in the background.js, though I don't know what it's referring to)... and it doesn't seem to show my userscript in the scripts folder

So, any ideas, help?

解决方案

Alright, so let me make a few changes to your manifest and background pages.

manifest.json

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

That will make the default off.png. As for the icons section, read the docs to see what it is used for, but for now just remove it entirely. Also remove what you have in your contentScripts section. If you want to inject it programmatically then there is no need to list it in the manifest.

Next some changes to your background page to make it a bit more clean:

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

这篇关于如何为Chrome扩展打开/关闭按钮/图标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！