javascript - how to make onoff buttonsicons for a chrome extension? - Stack Overflow

admin管理员组

文章数量:1341467

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?

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?

• javascript
• google-chrome
• google-chrome-extension
• content-script

Share Follow edited May 3, 2013 at 22:22 user2348323 asked Apr 21, 2013 at 21:12 tempcodetempcode 17511 gold badge22 silver badges1111 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

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

本文标签： javascripthow to make onoff buttonsicons for a chrome extensionStack Overflow