Add your extension’s toolbar button to Firefox at first run

So, I start working on adapting my deviantArt extension for Firefox to the new ways an extension should look and act on Firefox 4+. One of the requirements is not to use the status bar (add-on bar) because it will be deprecated. So, now I have a toolbar button that can be placed on any toolbar in Firefox.

The problem that most of the extensions like this eventually have, is to place the toolbar button on a toolbar by default, so the users will see it. The user will then decide if they need that toolbar button, or where they need that toolbar button.

The fix for this problem is that, at first run of your extension, it should place the button on a toolbar that Firefox has by default. My choice is the navigation toolbar.

So, after looking around on the internet, I came with this condensed version of the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function installButton()
{
	var id = "YOUR_TOOLBAR_BUTTON_ID_HERE";
	var toolbarId = "nav-bar";
 
	var toolbar = document.getElementById(toolbarId);
 
	//add the button at the end of the navigation toolbar	
	toolbar.insertItem(id, toolbar.lastChild);
	toolbar.setAttribute("currentset", toolbar.currentSet);
	document.persist(toolbar.id, "currentset");
 
	//if the navigation toolbar is hidden, 
	//show it, so the user can see your button
	toolbar.collapsed = false;
}
 
function firstRun(extensions) 
{
    var extension = extensions.get("YOUR_EXTENSION_ID_HERE");
 
    if (extension.firstRun)
    	installButton();
}
 
if (Application.extensions)
    firstRun(Application.extensions);
else
    Application.getExtensions(firstRun);

Hope it helps! ;)

Comments

5 Responses to “Add your extension’s toolbar button to Firefox at first run”
  1. Thank you a lot for this tutorial. I have been searching a lot to find a clear working example, and you have the best!

  2. Paul says:

    I have seen many similar examples, but where do you put the code? The js file referenced in the xul is not run until after the the button is manually added. Nobody ever says where to put the install script!

    • Paul says:

      To answer my own question: Put it in a script tag in the xul. In my case I had:

      Because it was overlaying the Customize Toolbar dialog, it was not obvious that the xul script tag would be run on startup, unlike the .js containing button’s function.

      • Paul says:

        The tags were removed on posting! My xul used this:
        toolbarpalette id=”BrowserToolbarPalette”
        toolbarbutton id=”findButton”
        toolbarpalette

        • Sorry, I saw your question, but I was out of context, not working on the Firefox extension for a while. I wanted to get back in context and answer you, but I’m very busy lately :(.

          Very glad you managed to figure it out !

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!