1

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

mhitza
  • 5,709
  • 2
  • 29
  • 52
Jigar Lakhani
  • 11
  • 2
  • Is the profile you are using set to never remember history (Options -> Privacy -> History), or otherwise in [private browsing mode](https://www.mozilla.org/en-US/firefox/private-browsing/). If so, see [Firefox add-on works with “jpm run”, but not whith .xpi file generated with “jpm xpi”](http://stackoverflow.com/a/38793196/3773011). – Makyen Aug 05 '16 at 16:01

2 Answers2

2

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

Christos Papoulas
  • 2,469
  • 3
  • 27
  • 43
  • Thanks for your reply, I thought that Id is not required for JPM. But anyways I have tried it with Id, but still the same issue is there. I am not sure if that issue is regarding JPM or not, becuase I am not using CFX. Please advice. – Jigar Lakhani Oct 05 '15 at 10:39
  • You are right, the `id` is not required for `jpm`. I run your code with jpm and again there is no error and the extension works fine for me. Are you sure that you are not getting any error when you try `jpm xpi`? – Christos Papoulas Oct 05 '15 at 11:04
  • 1
    Yes, There is no error in jpm xpi. As well jpm run is also working fine but when I installed xpi file in my firefox, nothing happen means it doesn't display icon. Can you please send me the xpi file which you have generated? - pateljb90@gmail.com – Jigar Lakhani Oct 05 '15 at 11:20
  • Now I understand your question and I edited my answer. Plz let me know if the problem still remains. If it is still a problem then I will send you the `xpi` – Christos Papoulas Oct 05 '15 at 13:29
  • Yes, I did create directory "data", and added icon to that folder. You can send me the xpi. Thanks. – Jigar Lakhani Oct 06 '15 at 04:45
  • @JigarLakhani Have you found a solution? I seem to have the same problem. – maj Oct 18 '15 at 23:38
  • For some reason, the add-on only works for me as long as private mode is not turned on... – maj Oct 18 '15 at 23:55
  • This is the right answer - you put the icons in a folder called `data` - but you call them in the script as if they were at root: http://stackoverflow.com/a/34322550/1038866 – bgmCoder Dec 16 '15 at 21:42
0

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"
}
Macedonian
  • 47
  • 11