how to make on/off buttons/icons for a chrome extension?

Question

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?

Answer 1

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