Firefox addon toolbar button disappears after first run

Question

I have a Firefox addon made with the add-on SDK.

https://addons.mozilla.org/es/firefox/addon/board-notes/

To add a toolbar button I use a popular library for the SDK toolbarbutton.js:

https://github.com/erikvold/toolbarbutton-jplib/blob/master/lib/toolbarbutton.js

I only want to add the icon when it first installs and it works, the icon appears but after restarting the browser the icon disappears. The user has to use the right click button to open the setup browser bar and drag the icon again to the bar. Then if he restarts the icon continue correctly in its place.

I want to fix this behaviour because the most part of users probably don't know that they can recover the icon with the setup options.

I've tested some functions to detect if the icon is not in his place to move again, but by doing this if the user hides the icon, when he restarts it will appear again. And this is forbidden by Firefox policies.

I'll appreciate any help, I'm going crazy.

The code I use is this:

 button = createButton(options);

 if (options.loadReason == "install")
 {
    button.moveTo({
       toolbarID: "nav-bar",
       insertbefore: "home-button"
    });
 }

 function createButton(options) {
   return toolbarbutton.ToolbarButton({
     id: "NoteBoard",
     label: "Note Board",
     tooltiptext: "Note Board",
     image: data.url("noteboardMini.png"),
     onCommand: function() {
         openPopup();
     },
     onContext: (function () {
       var installed = false;
       return function (e, menupopup, _menuitem) {
       //Install command event listener
         if (!installed) {
            menupopup.addEventListener("command", function (e) {
               var link = e.originalTarget.value;
               if (link) open(link.replace(/\?.*/ , ""));
            });
            installed = true;
         }
         var temp = (function (arr) {
            arr.forEach(function (item, index) {
               for (var i = index + 1; i < arr.length; i++) {
                  if (arr[i] && item.label == arr[i].label) {delete arr[index]}
               }
            });

         return arr.filter(function (item){return item});
    })(loggedins);
    //remove old items
     while (menupopup.firstChild) {
      menupopup.removeChild(menupopup.firstChild)
     }
     function addChild (label, value) {
      var item = _menuitem.cloneNode(true);
      item.setAttribute("label", label);
      item.setAttribute("value", value);
      menupopup.appendChild(item);
    }
    if (temp.length) {
      temp.forEach(function (obj) {
        addChild(obj.label, obj.link);
      });
    }
    else {
      addChild(_("context"), "");
    }
  }
 })()
 });
}

Answer 1

You could use the library Toolbar Button Complete, which is my fork of toolbarbutton.js.

Using the library

You can use this library the same way as the original toolbarbutton.js, but it also has more options and features.

In your main.js file:

button = createButton(options);

// On install moves button into the toolbar
if (options.loadReason == "install") {
    button.moveTo({
        toolbarID: "nav-bar",
        insertbefore: "home-button",
        forceMove: true 
    });
};

You can find a working example of the library here, but it is a bit out of date.

Installing the Library

If you are using the add-on SDK on your computer:

1. Download Toolbar Button Complete from github.com.
2. add it to your packages directory. (Either under your SDK directory or under your add-on's directory.)

If you are using the Add-on Builder to create your add-on:

1. Click the plus button next to your library folder:

   

2. Type in Toolbar Button Complete.

3. Click on the Add Library button:

   

Updating the Library

The library is hosted on github.com here.

If you are using the Add-on Builder for your add-on, you can simply click the little refresh button when there is an update available.