How can I make my Firefox extension toolbar button

Question

I've created a firefox extension that consists of a toolbar button. How can I set it up so that when my extension is installed, the button automatically appears in the main toolbar. I don't want my users to have to go to the customize toolbar menu and drag my button over.

Answer 1

Here is a small script snippet I write that adds a button to the Firefox toolbar the first time your extension runs: Add your extension’s toolbar button to Firefox at first run

Answer 2

We're using the following code....

function init() {

    // .... 

    var navbar = document.getElementById("nav-bar");
    if ((myExtensionShared.checkMyBtnInstalled() == false) &&
        (navbar != null && document.getElementById("myExtension-button") == null)) {
        var newset;
            if (navbar.getAttribute('currentset') && 
              navbar.getAttribute('currentset').indexOf('myExtension-button') == -1) {

                navbar.insertItem ('myExtension-button', null, null, false);
                newset = navbar.getAttribute('currentset') + ',myExtension-button';
                navbar.setAttribute('currentset', newset);
                document.persist('nav-bar', 'currentset');
            }
            else if (!navbar.getAttribute('currentset')) {

                navbar.insertItem ('myExtension-button', null, null, false);
                newset=navbar.getAttribute('defaultset') + ',myExtension-button';
                navbar.setAttribute('currentset', newset);
                document.persist('nav-bar', 'currentset');
            }

    }

    // .... 

}



myExtensionShared.prototype.checkMyBtnInstalled = function() {
    var prefs = Components.classes["@mozilla.org/preferences-service;1"]
                                       .getService(Components.interfaces.nsIPrefBranch);
    var btnInstalled = false;
    if (prefs.prefHasUserValue("extensions.myExtension.myBtnInstalled")) {
        btnInstalled = prefs.getBoolPref("extensions.myExtension.myBtnInstalled");
    }
    if (!btnInstalled) {
        prefs.setBoolPref("extensions.myExtension.myBtnInstalled", true);
    }
    return btnInstalled;
}

Answer 3

From https://developer.mozilla.org/En/Code_snippets:Toolbar#Adding_button_by_default --

When you create and deploy your extension and include a toolbar button for it by overlaying the Customize toolbarpalette, it is not available by default. The user has to drag it onto the toolbar. The following code will place your button on the toolbar by default. This should only be done on the first run of your add-on after installation so that if the user decides to remove your button, it doesn't show up again every time they start the application.

Notes

Insert your button by default only once, at first run, or when an extension update adds a new button.

Please only add your button by default if it adds real value to the user and will be a frequent entry point to your extension.

You must not insert your toolbar button between any of the following elements: the combined back/forward button, the location bar, the stop botton, or the reload button. These elements have special behaviors when placed next to eachother, and will break if separated by another element.

/**
 * Installs the toolbar button with the given ID into the given
 * toolbar, if it is not already present in the document.
 *
 * @param {string} toolbarId The ID of the toolbar to install to.
 * @param {string} id The ID of the button to install.
 * @param {string} afterId The ID of the element to insert after. @optional
 */
function installButton(toolbarId, id, afterId) {
    if (!document.getElementById(id)) {
        var toolbar = document.getElementById(toolbarId);

        // If no afterId is given, then append the item to the toolbar
        var before = null;
        if (afterId) {
            let elem = document.getElementById(afterId);
            if (elem && elem.parentNode == toolbar)
                before = elem.nextElementSibling;
        }

        toolbar.insertItem(id, before);
        toolbar.setAttribute("currentset", toolbar.currentSet);
        document.persist(toolbar.id, "currentset");

        if (toolbarId == "addon-bar")
            toolbar.collapsed = false;
    }
}

if (firstRun) {
    installButton("nav-bar", "my-extension-navbar-button");
    // The "addon-bar" is available since Firefox 4
    installButton("addon-bar", "my-extension-addon-bar-button");
}

Answer 4

We are using the following code that will append the button (if already exist somewhere else in the bar).

//...
appendButtonInToolbar:function(buttonId, toolbarId) {
    var toolbar = document.getElementById(toolbarId);
    var button = document.getElementById(buttonId);
    if(button) {
        var parentBar = button.parentNode;          
        if(parentBar && parentBar != toolbar) {
            var newset = this.removeButtonFromToolbarCurrentSet(parentBar,buttonId);              
        }
        toolbar.appendChild(button);
    }else{          
        toolbar.insertItem(buttonId);
    }

    this.appendButtonInToolbarCurrentSet(toolbar,buttonId);
},

appendButtonInToolbarCurrentSet:function(toolbar, buttonId) {
    var oldset = toolbar.getAttribute("currentset");
    var newset = "";
    if(oldset && oldset!="") {
        newset = oldset + ",";
    }        
    newset += buttonId;        
    toolbar.setAttribute("currentset", newset);
    document.persist(toolbar.id,"currentset");
    return newset;
},


removeButtonFromToolbarCurrentSet:function(toolbar, buttonId) {
    var oldset = toolbar.getAttribute("currentset");
    if(!oldset || oldset=="" || oldset.indexOf(buttonId) == -1) return oldset;
    var reg = new RegExp(buttonId+",?", "gi");        
    var newset = oldset.replace(reg,"");
    if (newset.charAt(newset.length-1) == ",") {
       newset = newset.substring(0, newset.length - 1);
    }

    toolbar.setAttribute("currentset", newset);
    document.persist(toolbar.id,"currentset");
    return newset;
}, 
//...