Firefox extension icon not showing

You must know how to add an icon for a firefox extension:

"browser_action": {
  "default_popup": "popup.html",
  "default_icon": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
  "default_title":"hello world",
}

You expect the button of your extension will be shown somewhere on the browser’s toolbar. But soon you will be disappointed because you cannot find the icon on the toolbar, the firefox extension button is missing.

In fact, the firefox addon icon is not missing but hidden in the extensions menu panel. Click the Extensions menu panel button

you’ll see the addon button for your extension is right there:

You can click the gear button to the right of your extension icon and select “Pin to Toolbar” to pin it onto the browser’s toolbar:

Now, you can see the addon button is shown on the browser’s toolbar:

But wait a minute! Why are other extensions’ buttons such as the screenshot addon shown on the toolbar without this manual operation?

Well, you need to do some settings in the manifest.json file of your extension to let it shown on the toolbar automatically, i.e., add a “default_area” property and set its value to “navbar”:

"browser_action": {
  "default_popup": "popup.html",
  "default_icon": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  },
"default_title":"hello world",
"default_area":"navbar"
},

The default value of “default_area” is “menupanel” so you found the firefox addon button was not showing. Note that, after you add default_area property, you need to restart your firefox browser to let the setting take effect. Simply reloading the temporary extension is not enough; the extension button is still in the extensions’ menu panel.

Did you like this?
Tip admin with Cryptocurrency