Firefox extension not showing icons

Question

I have implemented sample mozilla firefox extension to display firefox icon (action button) on toolbar and it will open "http://www.mozilla.org/". It is working fine in jpm run, then I have created package of that using jpm xpi and created xpi file. Then I have installed it in my firefox browser and successfully installed but did not work. It couldn't add firefox icon (action button) on toolbar (There is no error in console).

Below is the code.

index.js

var buttons = require('sdk/ui/button/action');
var tabs = require("sdk/tabs");

var button = buttons.ActionButton({
  id: "mozilla-link",
  label: "Visit Mozilla",
  icon: {
    "16": "./icon-16.png",
    "32": "./icon-32.png",
    "64": "./icon-64.png"
  },
  onClick: handleClick
});

function handleClick(state) {
  tabs.open("http://www.mozilla.org/");
}

package.json

{
  "title": "Sample",
  "name": "sample",
  "version": "0.0.1",
  "description": "Sample AddOn",
  "main": "index.js",
  "author": "Sample",
  "engines": {
    "firefox": ">=30.0a1",
    "fennec": ">=30.0a1"
  },
  "license": "MIT"
}

I have implemented that using - https://developer.mozilla.org/en-US/Add-ons/SDK/Tutorials/Getting_Started_%28jpm%29

Please Help.

Thanks

Answer 1

You missed one of item in this lesson... You need to create "data" directory in your extension root dir, and all of content you have to put in this folder. In my Example I use it like this:

var button = this.buttons.ActionButton({
            id: "show-panel",
            label: "Show Panel",
            icon: {
                "16": "./icon/x16.png",
                "32": "./icon/x32.png",
                "64": "./icon/x64.png"
            },
            onClick: function(state) {
              // ...
            }
        });

and my structure looks like: MyExtensionName/data/icon/[.png,.ico]

But you can also use internal links of your extension:

resource://extensionname/...

icon: {
  "16": "resource://extensionname/data/icon/x16.png",
  "32": "resource://extensionname/data/icon/x32.png",
  "64": "resource://extensionname/data/icon/x64.png"
}

Answer 2

In order to make the icons visable, you have to create a data directory inside your extension and put your icons there.