Firefox Extensions: Add Button to Nav Bar

The new Add-On SDK for Firefox rocks! It is so easy to create and test using the cfx command line utility.

One thing that is conspicuously absent is the ability to add a button to the navigation toolbar. You know, the toolbar that holds the URL bar and bookmarks button. It took a fair amount of research and trial and error, but it turns out to be a small bit of code.

The code below should be placed in lib/main.js. It adds a button to the toolbar and removes it when the extension is disabled or uninstalled.

// import the modules we need
var data = require('self').data;
var {Cc, Ci} = require('chrome');
var mediator = Cc[';1'].getService(Ci.nsIWindowMediator);

// exports.main is called when extension is installed or re-enabled
exports.main = function(options, callbacks) {
// do other stuff

// exports.onUnload is called when Firefox starts and when the extension is disabled or uninstalled
exports.onUnload = function(reason) {
// do other stuff

// add our button
function addToolbarButton() {
// this document is an XUL document
var document = mediator.getMostRecentWindow('navigator:browser').document;
var navBar = document.getElementById('nav-bar');
if (!navBar) {
var btn = document.createElement('toolbarbutton');
btn.setAttribute('id', 'mybutton-id');
btn.setAttribute('type', 'button');
// the toolbarbutton-1 class makes it look like a traditional button
btn.setAttribute('class', 'toolbarbutton-1');
// the data.url is relative to the data folder
btn.setAttribute('image', data.url('img/icon16.png'));
btn.setAttribute('orient', 'horizontal');
// this text will be shown when the toolbar is set to text or text and iconss
btn.setAttribute('label', 'My Button');
btn.addEventListener('click', function() {
// do stuff, for example with tabs or pageMod
}, false)

function removeToolbarButton() {
// this document is an XUL document
var document = mediator.getMostRecentWindow('navigator:browser').document;
var navBar = document.getElementById('nav-bar');
var btn = document.getElementById('mybutton-id');
if (navBar && btn) {

17 thoughts on “Firefox Extensions: Add Button to Nav Bar

  1. If you replace the line:
    var document = mediator.getMostRecentWindow(‘navigator:browser’).document;

    var enumerator = mediator.getEnumerator(“navigator:browser”);
    while(enumerator.hasMoreElements()) {
    var document = enumerator.getNext().document;

    And add:


    at the function´s end, it puts the icon in every window…
    I hope this is useful for others :)

  2. I know this is an old thread and I know I am not adding any value to the theme of how to code the button but I have searched high and low and this is the only place I have come across where the posters are smart and knowledgeable in the NavBar realm, which is where my problem/question is.

    My problem is that I put some add-on buttons on the NavBar toolbar via the typical “Customize” route and they randomly disappear and end up back in the customize dialog. From reading this thread it appears to me that dragging a button onto the NavBar is not the same as doing the same on any other toolbar. If this is true, then I can only surmise that the NavBar is restricted in some way and that a person shouldn’t try to drag a common add-on button to that bar.

    Following alone that line of thought, I would expect FF to block a drag-and-drop to the NavBar, but it doesn’t. Thinking further, I would have expected some mention of this limitation in the docs or somewhere, yet I have been unable to Google any such information.

    So, am I missing something? Is there a restriction or should any button stay happily on the NavBar? I am more than willing to entertain any idea that there is something amiss with my FF config or a conflicting add-on but this problem occurs maybe once a day and I can’t run in Safe Mode or with add-ons disabled for that long.

    Again, I’m sorry that I am clearly asking this in the wrong place but I couldn’t come up with the right phrase in Googleeze that would lead me in the right direction. I feel a little less guilty figuring all I’m asking for is a couple of yes/no answers.

    Thank you very much for listening and in advance for any help!

  3. Hello!
    Your code has been very helpful!!!I have a piece of my code here:

    function addTabMenu() {
    var navBar = document.getElementById("tabContextMenu");
    if (!navBar) {
    var menuItem = document.createElement("menuitem");

    menuItem.setAttribute('id', 'myitem');
    menuItem.setAttribute('label', 'My App');

    menuItem.addEventListener('command', function(event) {
    //How will I know over which tab was the menu popped and clicked?
    }, false);

    When my menu item is clicked, how do I get the tab clicked? I need the tab’s url when my menu item is clicked over the tab context menu.


  4. using the Add-on Builder that is easy: use the method activeTab
    For example:

    var tabs = require("sdk/tabs");
    console.log("title of active tab is " + tabs.activeTab.title);

Comments are closed.