chrome extension : how to display an icon in the toolbar?

Viewed 2064

I've created a simple extension but the icon is not being displayed in the browser's toolbar and in fact I see many other extensions installed but not their icon in the toolbar. What element in the manifest file defines that an icon should display an icon in the toolbar?

Here is the used manifest file and this manifest does not add any icon to the toolbar

{
  // Extension ID: my_id
  "key": ".....my key.......",
  "name": "....any name....",
  "version": "1.0",
  "manifest_version": 2,
  "description": "description",
  "app": {
    "launch": {
      "local_path": "main.html"
    }
  },
  "icons": {
    "128": "icon-128.png"
  },
  "permissions": [
    "...."
  ]
}
2 Answers

I ran into this exact same problem and found this question on the top search results. The answer I needed is in the comment by wOxxOm on this question so in case it helps, I'm promoting it to an answer:

The icon is available by default but it may not be visible due to the toolbar width made available to icons. You can edit this by clicking on the "puzzle piece" in the extension toolbar and then picking on the "pushpin" next to the extension you want to be made visible.

image of "Extensions tooltip interface with options to enable extension icons.

Hope this helps other people who are confused by this.

Sometimes, although adding icons in manifest.json, you cannot view icon on the toolbar. Because you need a browser action.

You can try adding in this manifest.json;

"browser_action": {
        "default_icon": "icon.png",
        "default_popup": "popup.html"
}

Also, you should generated .html file and .png image

In Brief,

Chrome extension include third parts.

  • Background script
  • Content script
  • Browser action(popup)

If you want see icon on toolbar, you should set a browser action in manifest.json

Related