How to create an extension for Firefox
If you ever fancied building your own firefox toolbar or extension you’ll find its really easy. However, getting to the stage where you can actually start coding is less so, and its quite hard to find resources. This guide should help you.
The process is as follows:
- build a test firefox profile
- create your extension skeleton
- install your extension in your test firefox profile
- start developing
- publish your extension
Build a test firefox profile
Its not good practice to simply start developing an extension using your existing firefox profile. The extension can easily break your profile if you do something wrong, and you will have to keep restarting firefox to see changes, which isn’t much fun if your reading a tutorial on the same browser.
So we build a test profile, here’s how to do it on a mac. If your on a PC there’s lots of tutorials.
Enter the following code into Terminal
cd /Applications/Firefox.app/Contents/MacOS
./firefox-bin -ProfileManager
This opens the profile manager. Click create profile, read the blurb and click next.
You will be asked to enter a profile name - call it ‘test’ or whatever you want. Then look at the path listed underneath and make a note of it - this where you will need to place your extension later.
Click done.
Now you have a new profile, which can be accessed at anytime through the above command line. Still, it would be easier if we had an icon we could click. If you have a Mac, continue reading to find out how to make one.
Open a text editor and type this in:
#!/bin/sh
/Applications/Firefox.app/Contents/MacOS/firefox -P "test"
Where “test” is the name you gave your profile.
Save it as Firefox.test, making sure line endings are UNIX, and no additional extension is saved. The filetype should be Shell Script if you get to pick one.
Download Launcher, a software which will allow you to launch script files from finder. When its installed it will go into Applications > Utilities.
Place Firefox.test somewhere thats easy to find on your system. E.g. the desktop.
Right click firefox.test and select Open With, and other. Select Launcher and check always open with.
Double click the file, and it should open.
Now you can install extensions in this profile, and quit at any time, without affecting your current browser.
Create your extension skeleton
Now you have your browser, its time to create the skeleton of your first extension.
I’m not going to mess around explaining what files to create and what to call them. There is a free piece of software which does it all for you - Komodo Edit. Its available for PC, Mac and LINUX so there should be no problems.
Install the software and start it up.
Select File -> New -> New Project from template.
In the new window, select the Mozilla category, and the ‘Firefox extension’ template.
Give the template a name, and pick the directory you want to save it in (you should create a new one).
Click open, and fill in the form with the name of your extension and your domain. This doesn’t have to be a real domain. Note down the Extension Id that appears, and click save.
The editor will create all the files for you in the specified folder.
Install your extension in your test firefox profile
The default extension created by Komodo Edit performs a simple Hello World function. Lets now install it in your default profile so we can start editing it and see the changes.
Before continuing you will need the following:
- The path to your test profile which you should have noted when creating the profile
- The path to the extension you just created in Komodo Edit
- The extension id for the extension you just created
If you don’t have any of those, retrace your steps through the previous sections.
Create a file with your text editor, containing one line - the path to the extension you just created. You need to include the folder containing the extension, and you MUST have a forward slash at the end of the path. Mine looks like this:
/Users/mark/Sites/my_extension/
Save this file, naming it with the extension id you just got. e.g. my file is named “my_extension@mark-kirby.co.uk”. This should be saved with UNIX line endings. Save it anywhere you like, perhaps the desktop.
Using finder, or explorer, follow the path to your test profile folder.
Locate the “extensions” folder inside. If there isn’t one, create one.
Place the file you just created inside this extensions folder.
Startup your firefox test profile. Go to Tools -> Add on’s. You should see your extension listed. if it isn’t check everything in this section over.
Start developing
Now you can start, you’ll need to use other resources for this and gain an understanding of whats going on. You have your editor, use that to make changes to the code.
I started with this article - Your first firefox extension, from the Webmonkey site. This explains the following:
- The interface is programmed in XUL - tutorials at XULPlanet and Mozilla.
- The functionality is programmed in Javascript
- Extensions are made of a number of components, compiled into an XPI file which is a bit like a ZIP file
To build a basic extension there is a basic tutorial for Firefox 1.5+ on Mozilla, a comprehensive firefox extension walkthrough on Webgeek, and a very comprehensive firefox extension tutorial on XUL Planet.
The mozilla development center has the most up to date info on Firefox extension development. They also have an excellent list of code snippets showing you how to do a range of tasks.
Publish your extension
When you have finished development, its very simple to publish your extension. There is full documentation on chapter 7 of the born geek tutorial.
In summary:
The name for the jar should be the same as the name of the package.
Ensure the chrome manifest file is updated to include the jar in the paths:
content my_extension jar:chrome/my_extension.jar!/content/
overlay chrome://browser/content/browser.xul chrome://my_extension/content/my_extension.xul
skin my_extension classic/1.0 jar:chrome/my_extension.jar!/skin/
Navigate to the chrome directory in your extensions folder:
cd Sites/my_extension/chrome
Create the .jar file:
zip -r my_extension.jar content/* skin/*
Navigate to the root of the extensions folder:
cd ..
Create the .xpi file:
zip my_extension.xpi install.rdf chrome.manifest chrome/my_extension.jar
Install your extension by going into firefox and selecting File -> Open File… and locating the xpi file.
Done!