{"id":6518,"date":"2014-04-20T07:19:43","date_gmt":"2014-04-20T07:19:43","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2014\/04\/20\/how-to-make-on-off-buttons-icons-for-a-chrome-extension-collection-of-common-programming-errors-2\/"},"modified":"2014-04-20T07:19:43","modified_gmt":"2014-04-20T07:19:43","slug":"how-to-make-on-off-buttons-icons-for-a-chrome-extension-collection-of-common-programming-errors-2","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2014\/04\/20\/how-to-make-on-off-buttons-icons-for-a-chrome-extension-collection-of-common-programming-errors-2\/","title":{"rendered":"how to make on\/off buttons\/icons for a chrome extension?-Collection of common programming errors"},"content":{"rendered":"<ul>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/5f96304f9bbdaa5f5c87e363ac1a210e?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\ntempcode<\/p>\n<p>I want to let the user decide when they want to run a script, so that when the browser opens, the &#8220;off&#8221; icon is showing and no script runs; but when the user clicks it, it changes to an &#8220;on&#8221; icon and executes a userscript, until the user clicks off. I have two png icons which are 32&#215;32 each: <code>on.png<\/code> and <code>off.png<\/code>.<\/p>\n<p>My two questions:<\/p>\n<ol>\n<li>\n<p>How can I set the default icon to my off.png? I tried this in my <code>manifest.json<\/code> but it didn&#8217;t set the icon, instead showed a puzzle piece (I presume a default):<\/p>\n<pre><code>...\n\"browser_action\": {\n   \"default_icon\": {\n       \"32\": \"off.png\"\n       },\n   \"default_title\": \"icon\"\n},\n\"icons\": {\n   \"32\": \"on.png\",\n   \"32\": \"off.png\"\n},\n\"background\": {\n   \"scripts\": [\"background.js\"] \n}, \n\"content_scripts\": [{ \n   \"js\": [\"SCRIPT.user.js\"]\n...\n<\/code><\/pre>\n<\/li>\n<li>\n<p>Here&#8217;s my <code>background.js<\/code>, where I&#8217;ve temporarily made a quick function to try and toggle the on\/off based on an <code>onClicked<\/code><\/p>\n<pre><code>var status = 0;\n\nfunction toggle() {\nif (status == 0){\n    chrome.browserAction.setIcon({path: \"on.png\", tabId:tab.id}); \/\/ so it's set for the tab user is in\n    chrome.tabs.executeScript(tab.id, file:\"SCRIPT.user.js\"); \/\/execute for this tab\n    status++;\n}\nif (status == 1){\n    chrome.browserAction.setIcon({path: \"off.png\", tabId:tab.id});\n    chrome.tabs.executeScript(tab.id, code:\"alert()\"); \/\/ execute nothing when off\n    status++;\n}\nif (status &gt; 1)\n    status = 0; \/\/ toggle\n}\n\nchrome.browserAction.onClicked.addListener(function(tab) {\n    toggle();\n});\n<\/code><\/pre>\n<\/li>\n<\/ol>\n<p><em>(I should mention that when I load the folder housing my scripts, icons and manifest in &#8220;load unpacked extension&#8221; and then select &#8220;inspect views&#8221; to check if there&#8217;s anything immediately wrong, I see <code>Uncaught SyntaxError: Unexpected token :<\/code> in the background.js, though I don&#8217;t know what it&#8217;s referring to)&#8230; and it doesn&#8217;t seem to show my userscript in the scripts folder<\/em><\/p>\n<p>So, any ideas, help?<\/p>\n<\/li>\n<li><img decoding=\"async\" src=\"http:\/\/www.gravatar.com\/avatar\/2b1863fb11b0da73d6f487b540369f2d?s=32&amp;d=identicon&amp;r=PG\" \/><br \/>\nBeardFist<\/p>\n<p>Alright, so let me make a few changes to your manifest and background pages.<\/p>\n<p><strong>manifest.json<\/strong><\/p>\n<pre><code>\"browser_action\": {\n  \"default_icon\": \"off.png\",\n  \"default_title\": \"icon\"\n},\n<\/code><\/pre>\n<p>That will make the default <code>off.png<\/code>. 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.<\/p>\n<p>Next some changes to your background page to make it a bit more clean:<\/p>\n<p><strong>background.js<\/strong><\/p>\n<pre><code>var toggle = false;\nchrome.browserAction.onClicked.addListener(function(tab) {\n  toggle = !toggle;\n  if(toggle){\n    chrome.browserAction.setIcon({path: \"on.png\", tabId:tab.id});\n    chrome.tabs.executeScript(tab.id, {file:\"SCRIPT.user.js\"});\n  }\n  else{\n    chrome.browserAction.setIcon({path: \"off.png\", tabId:tab.id});\n    chrome.tabs.executeScript(tab.id, {code:\"alert()\"});\n  }\n});\n<\/code><\/pre>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>tempcode I want to let the user decide when they want to run a script, so that when the browser opens, the &#8220;off&#8221; icon is showing and no script runs; but when the user clicks it, it changes to an &#8220;on&#8221; icon and executes a userscript, until the user clicks off. I have two png [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-6518","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/6518","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=6518"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/6518\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=6518"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=6518"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=6518"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}