This post series reflects my article “Developing a Browser Toolbar” published in the ASPects in January 2010 (Volume 23, Issue 1), a magazine of the Association of Shareware Professionals (ASP).

Developing a toolbar for Firefox is quite easy: it’s all done by using XML, a little bit of CSS and especially JavaScript. The last one is also the only crux of the matter, because I really don’t like to develop in JavaScript. But anyway, it’s straightforward in this case.

I found a very good resource in the web. This tutorial explains the development of a Firefox toolbar in detail and saved me a lot of research work. After you went through the online tutorial, you should already have a fully-functional Firefox toolbar. There are only two things left:

Automatic online update

I wanted my toolbar to receive automatic updates from my webserver. But this is also quite easy by using the integrated update system of Firefox. On the same website there is a good tutorial for adding automatic update support, too.

Uninstall button inside the toolbar

The disreputability of toolbars is surely not least based on the fact that most of them are really hard to uninstall. Although Firefox provides uninstall support to the user already by using the add-ons manager, I wanted an uninstall button to be included directly into the toolbar itself. After doing some research in the web and at the Mozilla Developer Center, I got together the following piece of code that first successfully uninstalls the toolbar, second shows a webpage to the user (something like “We’re sad that you uninstalled…”) and finally tells the user that a browser restart is needed to finish the uninstallation:

try {
    var tb = document.getElementById('ABTools-Toolbar');
    var text = ABTools_ToolbarData["msg.uninstallToolbarText"].replace("%name%",
                                   ABTools_ToolbarData["toolbar.name"]);
    if (!window.confirm(text))
        return;

    var gExtensionManager = Components.classes["@mozilla.org/extensions/manager;1"]
                            .getService(Components.interfaces.nsIExtensionManager);
    var rds = gExtensionManager.datasource;
    if (gExtensionManager.uninstallItem) gExtensionManager.uninstallItem(ABTools_id);
    if (gExtensionManager.uninstallExtension)
        gExtensionManager.uninstallExtension(ABTools_id);

    ABTools_guid = "";
    ABTools_saveSettings();

    ABTools_LoadURL(getABToolsHomepageLink(9));

    alert(ABTools_ToolbarData["msg.restartBrowserText"]);
} catch(e) {
    if (ABTools_DebugMode) alert(e);
}

After going through these steps your Firefox toolbar is ready to get installed! It will work on Firefox Version 1.5 or higher, not depending on the version of the operating system.

In the next post I will go to the more complicated browser.

Contents of Post Series “Developing a Browser Toolbar”:

• Introduction
• Mozilla Firefox
• Microsoft Internet Explorer
• Installation System
• Summary

This post is also available in Deutsch.