CODEWITHSUNDEEP
google-chrome-extension
Thang Coder
Thang Coder

Reputation: 141

Chrome Extension icon not having color

I just create my first Chrome extension. My extension's icon shows correctly (with color) in the extension manager page: Icon with color

But Chrome shows a grayscale version of my icon in the extension bar: Icon without color

Here's the manifest of my extension:

{
  "name": "__MSG_appName__",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "__MSG_appDescription__",
  "icons": {
    "16": "images/icon-16.png",
    "128": "images/icon-128.png"
  },
  "default_locale": "en",
  "background": {
    "scripts": [
      "scripts/chromereload.js",
      "scripts/background.js"
    ]
  },
  "permissions": [
    "tabs",
    "http://*/*",
    "https://*/*",
    "contentSettings"
  ],
  "content_scripts": [
    {
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "js": [
        "scripts/contentscript.js"
      ],
      "run_at": "document_end",
      "all_frames": false
    }
  ]
}

What can I do to make Chrome show my icon with color next to the address bar?

Thanks

Upvotes: 10

Views: 4881

Answers (3)

ac23
ac23

Reputation: 91

The other responses are working, but only for manifest_version <= 2. for version 3, instead of browser_action just action. for more details on other keywords check here

Upvotes: 0

fiatjaf
fiatjaf

Reputation: 12159

Based on my experience and on Noam's answer I'm tempted to say that it is because your extension doesn't have a "browser_action" defined. In other words: its icon is there to show it is installed, but it doesn't do anything, so it had its colors removed.

This is just a guess not confirmed by any documentation or test.

Upvotes: 2

Noam Hacker
Noam Hacker

Reputation: 4825

That is odd behaviour, I don't know why it's happening but I know the solution: you should be using default_icon instead of icon:

"browser_action": {
    "default_icon": "icon.png"
}

Note that the icon needs to be 19x19 or 38x38 pixels.

You've defined the larger icon correctly though so you could leave that as is.

See here for more info.

Upvotes: 15

Related Questions