Building Firefox Extensions

 in
How to create your own Firefox extension.

Like many Linux Journal readers, Firefox is my browser of choice. One of its core strengths is the number of available extensions. Early extensions were focused around merely changing the look of the browser; however, in the past few years, extensions have been used to provide a very rich user experience while straddling the line between desktop and Web applications.

In this article, I explain how easy it is to extend Firefox by building an extension that integrates with a photo editing API provided by Picnik.

Setting Up the Environment

The first thing a new extension developer should do is set up a development profile. Although you can do extension development using your normal Firefox profile, it often is easier to create a new profile dedicated to development. First, start Firefox's profile manager:

$ firefox -ProfileManager

Next, click the Create Profile button. Once the wizard is loaded, click Next to get started. At this point, you should see a window similar to the one shown in Figure 1. Enter a name for your new profile (I used dev). Make sure you write down the path to the folder where your profile will be stored before clicking Finish. You'll be using that path later.

Figure 1. Creating the Profile Named dev

Now that you have a dedicated profile, you should install some extensions that make development easier. The first one you should install is the Extension Developer. This is a compilation of several handy extensions—all designed to make developers' lives easier. See Resources for several other handy extensions. I highly recommend that you install all of them.

Your First Extension

At this point, you're ready to start your first extension. Nearly all extensions start with the same basic boilerplate code, so the same person who made the Extension Developer put together the Firefox Extension Wizard to automate this part of the process. You can find its URL in the Resources for this article.

Most of the required fields should make sense. The main one of note is the Extension ID. This is used to identify the extension uniquely for updates and other purposes. In the past, standard practice was to use a GUID (Globally Unique Identifier). Most developers recently have switched to a format that bears resemblance to an e-mail address. For this example, I used extension@linuxjournal.com. I also selected the option to create a context (right-click) menu. Figure 2 shows how I filled in the rest of the fields.

Figure 2. Navigating the Firefox/Thunderbird Extension Wizard

Once you are satisfied with your choices, click the Create Extension button. After a few seconds, your browser should prompt you to download a zip file. Go ahead and extract it:

$ unzip linuxjournal.zip
Archive:  linuxjournal.zip
  inflating: linuxjournal/install.rdf
  inflating: linuxjournal/chrome.manifest
  inflating: linuxjournal/readme.txt
  inflating: linuxjournal/content/firefoxOverlay.xul
  inflating: linuxjournal/content/overlay.js
  inflating: linuxjournal/skin/overlay.css
  inflating: linuxjournal/locale/en-US/linuxjournal.dtd
  inflating: linuxjournal/locale/en-US/linuxjournal.properties
  inflating: linuxjournal/config_build.sh
  inflating: linuxjournal/build.sh

Before going into the purpose of all those files, you should install it to see what the auto-generated extension actually looks like. Firefox can use extensions installed in two ways. The normal installation method involves opening the extension's .xpi file in Firefox. This is the way most extensions are distributed and installed. The other method is to create a pointer file that tells Firefox where to find your extension's files. With this method, you don't have to re-install the extension every time you want to test a change; all you have to do is create the pointer file:

$ cd linuxjournal
$ pwd > ~jjhuff/.mozilla/firefox/lhn85ppm.dev/extensions/
↪extension\@linuxjournal.com

Of course, you'll want to replace ~jjhuff/.mozilla/firefox/lhn85ppm.dev with your Firefox development profile directory.

Now, go ahead and start up Firefox using your development profile:

$ firefox -P dev

First, check to see that the extension is installed. Select Tools→Add-ons, and verify that LinuxJournal 1.0 is listed. You should see a window like the one shown in Figure 3. While you have the Tools menu open, you probably noticed the new (and red) menu item (Figure 4). Go ahead and right-click in the browser window. You should see a menu similar to the one shown in Figure 5. If everything looks right, your extension is installed properly.

Figure 3. The LinuxJournal extension is installed and ready to go.

Figure 4. The extension can create a custom menu item under Tools.

Figure 5. You also can create a custom right-click menu item.

______________________

Comments

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.

good but not very good. The

Anonymous's picture

good but not very good.

The problem is that the tgz which is for download only contains the 4 listings referenced in the text, but *NOT* the other files like overlay.js and others.
I'd be very happy about a full listing available for download, i. e. with ALL files involved.
Since it's these who evoke the biggest problems for new users, as you must know what to write inside them!

thanks

wow gold's picture

Great,other article for build firefox extension
http://lifehacker.com/software/programming/how-to-build-a-firefox-extens...

I think creating firefox

web hosting's picture

I think creating firefox addins is a good strategy to get traffic to your site, but I think creating wordpress themes or wordpress plugins is more effective way.

White Paper
Linux Management with Red Hat Satellite: Measuring Business Impact and ROI

Linux has become a key foundation for supporting today's rapidly growing IT environments. Linux is being used to deploy business applications and databases, trading on its reputation as a low-cost operating environment. For many IT organizations, Linux is a mainstay for deploying Web servers and has evolved from handling basic file, print, and utility workloads to running mission-critical applications and databases, physically, virtually, and in the cloud. As Linux grows in importance in terms of value to the business, managing Linux environments to high standards of service quality — availability, security, and performance — becomes an essential requirement for business success.

Learn More

Sponsored by Red Hat

White Paper
Private PaaS for the Agile Enterprise

If you already use virtualized infrastructure, you are well on your way to leveraging the power of the cloud. Virtualization offers the promise of limitless resources, but how do you manage that scalability when your DevOps team doesn’t scale? In today’s hypercompetitive markets, fast results can make a difference between leading the pack vs. obsolescence. Organizations need more benefits from cloud computing than just raw resources. They need agility, flexibility, convenience, ROI, and control.

Stackato private Platform-as-a-Service technology from ActiveState extends your private cloud infrastructure by creating a private PaaS to provide on-demand availability, flexibility, control, and ultimately, faster time-to-market for your enterprise.

Learn More

Sponsored by ActiveState