9

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?

tempcode
  • 175
  • 1
  • 2
  • 11

1 Answers1

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()"});
  }
});
BeardFist
  • 8,031
  • 3
  • 35
  • 40
  • 1
    @tempcode I had just copied your code before, but when I look at it again I see that you missed the `{}` surrounding the `code` and `file` parts of `executeScript` try adding those and see if the error is gone. – BeardFist Apr 21 '13 at 22:49
  • Ok that hurdle jumped, we're almost there. That fix allowed me to switch from off to on *(on my first test I encountered `"Extension manifest must request permission to access this host"` - since you suggested removing the `content-scripts` section in `manifest` where I had `matches` and `excludes`, I added a `permissions` to fix that error)*, but there's one final minor issue: once I turn it "on" I can't click to turn it off, it just stays "on" until the page is reloaded (at least we know that unique `tab.id` works). But that aside, the rest seems to be working. Thanks for your help so far! – tempcode Apr 21 '13 at 23:11
  • 1
    @tempcode Alright, so it seems the problem was that `status` is some sort of keyword so `var status = false` didn't assign `false` but rather `"false"` because status was already defined to be a string. Change the variable name to something like `toggle` instead. – BeardFist Apr 21 '13 at 23:29
  • I didn't know status was a keyword either, but that did it! thanks for your help! – tempcode Apr 21 '13 at 23:34
  • Note that your icon must be sufficiently small (or else setIcon will fail silently): https://stackoverflow.com/questions/37599144/chrome-browseraction-seticon-not-doing-anything – cssndrx Nov 26 '17 at 21:42