简体   繁体   中英

Chrome Extension Icon Toggle Only Updates Once

I have a toggling function, in background.js: every time a user clicks the icon, if the extension was turned off, it is turned on, and if extension was turned on, is now off, and the icon swaps to reveal which of those states it's in. "image1" revealing that it's turned off and "image2" revealing it's turned on. However, the function only updates icon URL once when clicked, despite the fact that it continually fires from "onclicked" event as evidenced by chrome dev console. Any ideas?

Here is what's in background.js:

var off = true;

function updateIcon() {
    if (off == true) {
        off = false;
        chrome.browserAction.setIcon({path:"image1.png"});
        console.log(off);
    }
    else {
        off = true;
        chrome.browserAction.setIcon({path:"image2.png"});
        console.log(off);
    }
    return;
}
chrome.browserAction.onClicked.addListener(updateIcon);
updateIcon();

And my manifest.json file:

{
   "background": {
      "scripts": [ "jquery-3.1.1.min.js", "background.js" ]
   },
   "browser_action": {
      "default_icon": "image1.png"
   },
   "content_scripts": [ {
      "css": [ "style.css" ],
      "js": [ "jquery-3.1.1.min.js", "content.js"],
      "matches": [ "https://www.facebook.com/*", "http://www.facebook.com/*", "http://facebook.com/*", "https://facebook.com/*"],
      "all_frames" : true,
      "run_at" : "document_start"
   } ],
   "icons" : {
       "64" : "image1.png",
       "64" : "image2.png"
   },
   "description": "Blah blah blah",
   "manifest_version": 2,
   "name": "Working Title",
   "permissions": [ "activeTab", "https://www.facebook.com/*", "http://www.facebook.com/*" ],
   "update_url": "https://clients2.google.com/service/update2/crx",
   "version": "1.0",
   "web_accessible_resources": [ "images/*.png" ]
}

I don't know if there is something wrong with your browser or your computer, but I tested all the code onto different files and it seems to work fine. Unless there is anything clashing with the background.js from the content.js, it isn't the code that's the problem.

Icons were not the proper size of 128 x 128. Working now. Thx!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM