chrome extension changing icon not working as expected

Question

manifest.json

{
  "manifest_version": 2,

  "name": "Project",
  "description": "Chrome Extension for sending messages",
  "version": "1.0",

  "browser_action": {
    "default_icon": "red_dot.png"
  },
  "permissions": [
    "activeTab",
    "https://ajax.googleapis.com/",
        "storage"
  ],

  "background" : {
    "scripts" : ["background.js"]
  },
    
    "content_scripts": [
      {
      "matches":["https://www.website.com/*"],
      "js":["keypress.js", "jquery.js", "js_file.js"],
            "run_at": "document_end"
        }
    ]
}

background.js

var running = false

chrome.browserAction.onClicked.addListener(function(tab) {
    if (running) {
        alert('script is running, turning off');
        chrome.browserAction.setIcon({path: "red_dot.png"})
        running = false
    } else {
        alert('script is not running, turning on');
        chrome.browserAction.setIcon({path: "green_dot.jpg"})
        running = true
    }
});

When I click on the icon, I get the popup as expected, but the icon itself isn't changing.

I'm getting this error:

Unchecked runtime.lastError: Icon invalid.

but I don't understand why. The code seems valid.

`green_dot.jpg` is jpg, not png? I think you should use png. — wOxxOm, Sep 10 '20 at 13:28
Just in case, simply renaming won't help, you need to convert the format. Also make sure to click the reload icon on the extension's card in chrome://extensions page. — wOxxOm, Sep 10 '20 at 13:49
i downloaded a different icon that is a png. to check, i removed the extension and re-uploaded it — Morgan Allen, Sep 10 '20 at 14:03
Debug it then: [Accessing console and devtools of extension's background.js](https://stackoverflow.com/a/10258029) — wOxxOm, Sep 10 '20 at 14:14

score 0 · Answer 1 · answered Sep 11 '20 at 07:00

0

use this api and carefully enter params specifically path https://developer.chrome.com/extensions/browserAction#method-setIcon

answered Sep 11 '20 at 07:00

Sarfraz Akhtar

21
5

score 0 · Answer 2 · edited May 13 '23 at 20:41

0

I had a similar issue with the invalid icon error message. The problem was in the size of the icon I wanted to use: It was more than 48px x 48px. I manually resized the icon and saved it; after that, everything worked as expected

Solution: Ensure your icon is precisely 48px x 48px in size.

edited May 13 '23 at 20:41

Adrian Mole

49,934
160
51
83

answered May 13 '23 at 15:41

Yuriy

1

chrome extension changing icon not working as expected

2 Answers2