Firefox extension not showing icons

问题:

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

回答1:

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

回答2:

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"
}