Firefox Extension Development

Of all the Web browsers that are challenging the multi-year dominance of Microsoft's Internet Explorer (IE), the one that has the best chance of unseating IE from its throne, is Mozilla Firefox. Like the other alternatives, Firefox continues to eat away at IE's market share. Firefox 3.5, the latest version, has alone been downloaded over 214 million times (as of this writing). Back in April 2009, the browser with the foxy mascot had almost 24% market share — more than double all the other non-IE browsers combined.

According to the Mozilla Awards page, Firefox has garnered no fewer than 38 awards. In contrast, it is difficult to imagine Internet Explorer winning any awards, aside from such hypothetical categories as: The Most Egregious Violator of Web Standards, or perhaps The Biggest Security Headache Since Outlook, or, my favorite, The Ultimate Shortener of Developer's Lives. Fortunately, the latest version, Internet Explorer 8, is apparently much better than its predecessors, and is intended to rectify most of the types of damage it has caused in the past. (If only Microsoft could return to designers and developers everywhere their countless lost hours wrestling with IE's idiosyncrasies.)

So what is it that makes Mozilla's browser so popular? Fans can provide any number of answers to that question — ranging from ad-blocking to password management. The official feature list is quite impressive. Yet the source for such enthusiasm cited most frequently, is the way that Firefox has been designed so that its functionality can be supplemented with what are known as "extensions", which are small modules that can be plugged into it by the end user. They are a type of add-on, and make it possible for independent programmers to enhance the baseline Firefox with whatever functionality they would like to see in it, or that they suspect other users would find valuable. Because each extension is packaged as a complete and single file (ending with ".xpi"), any non-techie user can benefit from that introduced functionality, with no need for programming knowledge on their part.

Considering how much time people now spend on the Web, it should come as no surprise that there are now thousands of handy Firefox extensions that allow you to: block ads and Flash videos embedded in Web pages; manage multiple Gmail accounts; download and upload files; change the styling of a page; add entries to your blog without having to navigate to the site; communicate using VoIP, SMS, and instant messaging; edit browser cookies; customize the Firefox menus; manage tabs; control your multimedia player without leaving the browser; instantly look up dictionary and Wikipedia entries for words; read RSS news feeds; check for viruses and spoofed sites; share BitTorrents; and even change the rendering engine to Internet Explorer (which is very useful for Web developers who do not want to start up IE, but still need to check how IE is ruining the styling of Web pages they have crafted).

Roll Your Own

Even though there is so many capabilities offered by these available extensions, it is possible that you have some new functionality in mind that you would like to see in Firefox, or a variation on an extension that currently exists. You could try to create your own. If you are knowledgeable of JavaScript and XUL (pronounced "zool"), or you are willing to put in the effort to learn them, then you certainly can write your own Firefox extension, and then share it with others. Even though the online resources for learning XUL are fewer than the plethora of such resources dedicated to JavaScript, they do exist and are freely available. You would also need to be familiar with XML and CSS, but you probably already are if you are ready to tackle JavaScript and XUL.

In addition, there are a number of resources focusing entirely on Firefox extension development: A terrific one is the Firefox Extension Development Tutorial, which offers clear explanations and many screenshots. The information is organized into nine sections: overview, environment setup, configuration files, creating GUIs, back-end, preferences, localization, distribution, and security. Note that several of the sections contain links to other valuable reference materials on the Web. This guide is clearly one of the more complete ones out there.

Another step-by-step tutorial is "Make Your Own Firefox Extensions", which also contains screenshots. It teaches through demonstration, by showing how to create a simple extension that searches Wikipedia for any text that you have selected on the current page. This tutorial focuses mainly on the testing and packaging of your new extension, and as such should not be the first one you read, because it does not delve into any of the details of JavaScript and XUL programming. Sadly, as with most if not all PC Magazine articles, the content is broken up into multiple small Web pages, forcing you to wade through all their advertisements — unless you have Firefox set to block ads!

Do not miss the Lifehacker article titled "How to build a Firefox extension", because it contains many links to other tutorials, as well as an important warning regarding the backing up of your Firefox profile before commencing work. Perhaps the best part of the article is its advice on how to begin understanding XUL as quickly as possible.

Programmer Eric Hamiter has written a promising tutorial, "How to create Firefox extensions", whose material is grouped into a dozen sections, covering: an illustrative example; implementing a simple "Hello, world" extension; inside the XPI; re-configuring your extension's installation; Firefox chrome; skin files; packaging an extension using a GUI or using the command line; how to start over if you inadvertently corrupt your Firefox profile; installing your new extension on a local Web server; links to outside resources; and feedback from other readers of the tutorial.

Learn by Example

Getting your head around a new programming language, or a new programming technique, is usually best accomplished by reading the code written by others (provided that the authors of that code are knowledgeable, and have made an effort to write quality code — extensive comments are a bonus!). In that spirit, I will take a brief look at one of the many Firefox extensions already built. Even though space limitations do not permit us to step through the code, I can at least examine the components that make up the extension. That alone can make the prospect of writing your own extension, far less intimidating.

The particular extension that I will use as an example, is Copy URL+, which copies the current page's title and URL into your system clipboard. The version available at https://addons.mozilla.org/en-US/firefox/addon/129 was last updated in November of 2005, and is not compatible with the latest versions of Firefox. However, it can be made to run just fine in 3.0.x, simply by disabling Firefox's add-on compatibility checking. Newer versions can be found on pages linked near the bottom of the author's dedicated page.

This extension was chosen because it is simpler and involves less code than most of them. Yet to the uninitiated, the extension filename itself, "Copy URL+ v1.3.2.xpi", may appear cryptic, especially as there is typically no application in Windows associated with the file extension ".xpi". But you will see how to open up this installation file for inspection. Its file structure is the same as your everyday Zip archive file, so you only need to change the extension from ".xpi" to ".zip", to make it recognizable by your favorite archive management program. (If you have no such favorite, check out 7-Zip, which is free and quite capable.)

When you open up "Copy URL+ v1.3.2.zip", you should find that it contains two installation files (install.js and install.rdf), three text files (CHANGELOG, README, and TODO), and, most important of all, a directory named "chrome", which contains a single file, copyurlplus.jar. This is a Java archive file, and like its parent XPI file, also has a Zip archive structure. So rename it to copyurlplus.zip, and open it with your archive program. When you expand all of the directories, you should see a structure as seen in the screenshot below.

The "content" directory has a "copyurlplus" subdirectory containing the primary JavaScript and XUL code that powers the extension. The "locale" directory contains three subdirectories — for English, Italian, and Japanese — which contain files that allow the user interface to be language-specific. Finally, the "skin" directory contains the files for styling the appearance of the extension when it is listed in the Firefox add-ons menu (Tools > Add-ons). It does this through the use of a couple PNG image files, a CSS stylesheet, and an RDF file.

As noted earlier, I will not be going into the details of the JavaScript and other code, but at least you can see how to explore the code on your own, and perhaps use it as a reference, while you are reading the tutorials and other learning resources mentioned above. Once you get the hang of the technologies required, you may decide to create your own Firefox extensions, and share them on the Web with other Firefox enthusiasts.