default_icon vs. icon creating Chrome Extension

Question

I am attempting to build a Chrome extension, and I was confused about how to properly display the extension icon on the unibar.

I have found multiple tutorials that explain to define the default_icon within the browser_action object:

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

However, according to the documentation it is preferrable to use the object icons:

"icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
}

The documentation explains that the first method is still supported: the 19x19 icon is edited to for particular displays, which can cause the image to look pixelated.

My issue is that not all icons are displaying. My Pastebin has my manifest.json file where the extension manager does not show the 48px image.

I have answered a question of mine writing this all out: the default_icon is 19x19 only so it still needs to be added to the manifest. The icons array only allows developers to show top quality logos no matter what devices users are using.

Answer 1

I did not add all the icon values, specifically the

"icons" : { "icon48.png" }

from my code. I only added the 128 pixel image to the icon array so the icon is visible in the extensions manager. This resulted that the default icon never displayed after I added the icons array. Once I finished adding all the image sizes needed then the default item appeared again.

It all comes down to the basic principle that there is an unlimited amount of ways to solve a problem. The method Scott sharedI did not even know you could change it that way.

• Here is one way.
• Another way.
• My way.
• And of course the method Scott shared.

Thank you!

Answer 2

The icons that you're mentioning inside browser_action, page_action are shown in the toolbar while the icons that are mentioning outside is shown on the chrome://extensions page

"browser_action":{
    "default_popup":"auth_popup.html",

     "default_icon": {
  "16": "images/bridgeglobal16.png",
  "32": "images/bridgeglobal32.png",
  "48": "images/bridgeglobal48.png",
  "128": "images/bridgeglobal128.png"
    }
},

 "icons": {
  "16": "images/salimeyes16.png",
  "32": "images/salimeyes32.png",
  "48": "images/salimeyes48.png",
  "128": "images/salimeyes128.png"
},