It’s not very easy to start writing an extension in Firefox. There’s a bunch of configuration to do. It usually takes a while to even make your extension display an alert box. So, I have outlined in brief the steps to get a basic working skeleton of a Firefox extension. And then, you can work your magic.
First, you need to create a new profile for your extensions so that your extension will not mess up your bookmarks, etc. The new profile will be completely separate. So, quit Firefox and open the Profile Manger (for other OSes, instructions here). For Mac OS X, type this in the terminal:
/Applications/firefox.app/Contents/MacOS/firefox -profilemanager
Follow the steps to create a new profile and start Firefox in that profile. Once you download this basic skeleton, you need to modify the install.rdf
<!– Required Items –>
<em:id>extensionname@websitename.com</em:id>
<em:name>Extensionname</em:name>
<em:version>1.0</em:version>
As shown in the snippet above, change the id to something that will uniquely identify your extension. By convention, most developers set the id to be extensionname@websitename.com Also, change the name. But don’t modify anything inside <em:targetApplication></em:targetApplication> For more options, look here.
In the chrome.manifest file, do a search for “skeleton” and replace all with the name you used in install.rdf.
In order to enable dynamic development (so that you don’t have to keep creating JARs while making changes), you need to create a new file with a single line containing the path to your extension.
For example, I have the skeleton folder in /Applications/xampp/xamppfiles/htdocs/stuff/skeleton/ . So, my file contains this single line:
/Applications/xampp/xamppfiles/htdocs/stuff/skeleton/
Save the file with its name as your id (the above file is called skeleton@foyrek.com). Now, put this file in /User/Library/Application Support/Firefox/Profiles/[profilename]/extensions. If you are not on a Mac, you can find your profile folder location here and then, put the file in ProfileFolder/[profilename]/extensions.
After restarting Firefox, you should see the Addons window popup showing the name of your newly installed extension. You can also check that your basic skeleton is working properly by going to the Tools menu and clicking “Test skeleton”. You should see a message saying “Extension skeleton works!!”
8 Comments
June 14, 2008 at 11:18 am
Very helpful, thanks.
June 14, 2008 at 6:05 pm
Bookmarked
Thanks for the info.
June 16, 2008 at 12:52 am
@jbj @thepuck77, Thanks for reading
June 16, 2008 at 1:48 am
Abi,
It’s really a awesome post. Even I’ve it starred in my Greader. Will have to try writing firefox extensions(which i never tried ) starting from now
Good post mate!!!
June 16, 2008 at 3:38 pm
Try the CustomButtons2 extension. I’m getting a lot of mileage out of it … an easy way to quickly map internal XUL applets to taskbar buttons.
July 25, 2008 at 6:20 am
[...] Writing Beautiful UI with XUL Jump to Comments All of you need to get started is either a simple online XUL editor or XUL Explorer (which is awesome for testing XUL UI). If you want to test the UI right way on Firefox, you can get a simple extension with just a overlay.xul here [...]
December 9, 2008 at 10:43 pm
[...] Creating a Firefox extension is a long and arduous process. Before your extension can even display an alert box, the amount of code you need to write and number of files/folders you need to create is remarkable: [...]
May 16, 2009 at 9:08 am
[...] [upmod] [downmod] Quickstart to Creating Firefox Extensions « chimney (abcdefu.wordpress.com) 2 points posted 5 months ago by jeethu tags firefox javascript [...]