CODEWITHSUNDEEP
javascriptjsongoogle-chrome
Johnny Harrison
Johnny Harrison

Reputation: 11

Chrome Extension icon doesn't show up

I'm trying to make my first Chrome Extension. It's supposed to read and modify text on specific webpages. It works fine, except the icon never shows up.

It just shows the default puzzle peice icon on both the chrome developers page and in the Chrome toolbar.

I'm using the following in my manifest.json file.

"page_action": { "default_icon": "favicon2.jpg", "default_title": "Portal.io Deposit Calculator" }

favicon2.jpg exists in the same directory as manifest.json. I've tried resizing the image, using .ico and .jpg. The image isn't perfectly square (32x33) but I thought it would resize itself anyway, right?

Upvotes: 1

Views: 2815

Answers (3)

Joshua Wolff
Joshua Wolff

Reputation: 3409

Make sure to add icons in both locations --- in the "icons" key and in the "default_icon" key embedded in the "action" value, as shown below.

"icons": {
    "16": "/images/icon-16x16.png",
    "32": "/images/icon-32x32.png",
    "48": "/images/icon-48x48.png",
    "128": "/images/icon-128x128.png"
},
"background": {
    "service_worker": "background.js"
},
"action": {
    "default_popup": "popup.html",
    "default_icon": {
        "16": "/images/icon-16x16.png",
        "32": "/images/icon-32x32.png",
        "48": "/images/icon-48x48.png",
        "128": "/images/icon-128x128.png"
    }
}

Upvotes: 1

Shubham Jain
Shubham Jain

Reputation: 930

Try adding this in your manifest file: 

"icons": {
    "16": "image16.png", //for 16x16 pixels
    "48": "image48.png", //for 48x48 pixels
    "128": "image128.png" // for 128x128 pixels
},

Make sure all the icons are in .png format.

Upvotes: 1

Frankusky
Frankusky

Reputation: 1083

Try adding "icons" key at the top level:

"icons": {
    "16": "image16.png", //for 16x16 pixels
    "48": "image48.png", //for 48x48 pixels
    "128": "image128.png" // for 128x128 pixels
},
"browser_action": {
    "default_icon": "image16.png",
    "default_popup": "popup.html"
},

Icons documentation here: https://developer.chrome.com/extensions/manifest/icons

Upvotes: 1

Related Questions