Building Firefox Extensions
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.
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.
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.
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 firstname.lastname@example.org. I also selected the option to create a context (right-click) menu. Figure 2 shows how I filled in the rest of the fields.
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.
|Designing Electronics with Linux||May 22, 2013|
|Dynamic DNS—an Object Lesson in Problem Solving||May 21, 2013|
|Using Salt Stack and Vagrant for Drupal Development||May 20, 2013|
|Making Linux and Android Get Along (It's Not as Hard as It Sounds)||May 16, 2013|
|Drupal Is a Framework: Why Everyone Needs to Understand This||May 15, 2013|
|Home, My Backup Data Center||May 13, 2013|
- RSS Feeds
- Dynamic DNS—an Object Lesson in Problem Solving
- Making Linux and Android Get Along (It's Not as Hard as It Sounds)
- Designing Electronics with Linux
- Using Salt Stack and Vagrant for Drupal Development
- New Products
- A Topic for Discussion - Open Source Feature-Richness?
- Drupal Is a Framework: Why Everyone Needs to Understand This
- Validate an E-Mail Address with PHP, the Right Way
- What's the tweeting protocol?
- Kernel Problem
6 hours 48 min ago
- BASH script to log IPs on public web server
11 hours 15 min ago
14 hours 51 min ago
- Reply to comment | Linux Journal
15 hours 23 min ago
- All the articles you talked
17 hours 47 min ago
- All the articles you talked
17 hours 50 min ago
- All the articles you talked
17 hours 52 min ago
22 hours 16 min ago
- Keeping track of IP address
1 day 7 min ago
- Roll your own dynamic dns
1 day 5 hours ago
Enter to Win an Adafruit Pi Cobbler Breakout Kit for Raspberry Pi
It's Raspberry Pi month at Linux Journal. Each week in May, Adafruit will be giving away a Pi-related prize to a lucky, randomly drawn LJ reader. Winners will be announced weekly.
Fill out the fields below to enter to win this week's prize-- a Pi Cobbler Breakout Kit for Raspberry Pi.
Congratulations to our winners so far:
- 5-8-13, Pi Starter Pack: Jack Davis
- 5-15-13, Pi Model B 512MB RAM: Patrick Dunn
- 5-21-13, Prototyping Pi Plate Kit: Philip Kirby
- Next winner announced on 5-27-13!
Free Webinar: Hadoop
How to Build an Optimal Hadoop Cluster to Store and Maintain Unlimited Amounts of Data Using Microservers
Realizing the promise of Apache® Hadoop® requires the effective deployment of compute, memory, storage and networking to achieve optimal results. With its flexibility and multitude of options, it is easy to over or under provision the server infrastructure, resulting in poor performance and high TCO. Join us for an in depth, technical discussion with industry experts from leading Hadoop and server companies who will provide insights into the key considerations for designing and deploying an optimal Hadoop cluster.
Some of key questions to be discussed are:
- What is the “typical” Hadoop cluster and what should be installed on the different machine types?
- Why should you consider the typical workload patterns when making your hardware decisions?
- Are all microservers created equal for Hadoop deployments?
- How do I plan for expansion if I require more compute, memory, storage or networking?