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

问题描述

我想让用户决定什么时候运行脚本，这样当浏览器打开时，显示关闭"图标并且没有脚本运行；但是当用户点击它时，它会变成一个开"图标并执行用户脚本，直到用户点击关闭.我有两个 png 图标，每个 32x32:on.png 和 off.png.

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.

我的两个问题:

1. 如何将默认图标设置为我的 off.png?我在我的 manifest.json 中尝试了这个，但它没有设置图标，而是显示了一个拼图(我认为是默认值):

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

这是我的 background.js，我临时做了一个快速函数来尝试根据 onClicked

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

(我应该提到，当我在加载解压扩展"中加载包含我的脚本、图标和清单的文件夹时，然后选择检查视图"以检查是否有任何立即出错的地方，我看到 UncaughtSyntaxError: Unexpected token : in the background.js，虽然我不知道它指的是什么)......它似乎没有在脚本文件夹中显示我的用户脚本

(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.

ma​​nifest.json

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

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

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屋！