How to create Firefox extensions
Everyone has a good idea at one time or another to implement a new feature in a web browser. Well, with the goodness that is Mozilla Firefox, now you can do just that. You need to have a vague understanding of XUL and Javascript, but you certainly don’t need to be a master of either. When I started, I knew nothing about either one, really. I had seen some bookmarklets here and there, and tried to figure out just how they worked. Well, that’s how I made my first extension, BugMeNot.
Contents
- Learn By Example
- Hello, world!
- Looking inside the XPI
- Re-configuring your extension’s installation
- Chrome is more than a shiny bumper
- Skin that cat
- Pack it up and try it out
- An easier way to re-build
- My Firefox got completely hosed up
- Ensure server compatibility
- Additonal help and information
- Comments / Feedback
Learn by example
Everyone has a good idea at one time or another to implement a new feature in a web browser. Well, with the goodness that is Mozilla Firefox, now you can do just that. You need to have a vague understanding of XUL and Javascript, but you certainly don’t need to be a master of either. When I started, I knew nothing about either one, really. I had seen some bookmarklets here and there, and tried to figure out just how they worked. Well, that’s how I made my first extension, BugMeNot.
Basically, this tutorial will show you how to create your first extension from scratch. Since every programmer always learns from the famous “Hello, world!” example, I figured that would be a good way to introduce you to developing extensions.
Xul Planet has a nice little tutorial which will show you the basics of creating a menu. Mozilla also has a very handy DOM Window Interface reference if you’d like to take a look through that. They’re both geared toward an audience that has a good feel for programming, though, so it’s not necessary to understand everything going on to follow this tutorial.
Hello, world!
Our extension will be a nice simple one that will pop up a window proclaiming “Hello, world!” after we select it either in a right-click menu, or under the Tools menu. Both of these places are very popular positions, and it’s relatively easy to stick something in there.
Let’s see what the end result looks like, so you know what to expect. First, here are the two ways to access our extension:
Right-clicking will get us this:
The tools menu looks like this:
The end result of our extension’s efforts:
What it looks like in the extension manager:
Clicking on the “About…” in the extension manager will get us this:
Looking inside the XPI
Here’s how the extension breaks down in a nutshell, using a pre-made Hello, world! extension as an example:
(You can download it here, just right-click and save, then you can follow along.)
helloworld.xpi is the packaged extension. XPI is just an file format that your browser will recognize as a browser extension. In reality, it’s just a zipped up file. So you can rename the XPI to ZIP or even JAR if you want, then open it up using an archive program, like 7-Zip or WinRAR. So, once that’s opened up, you’ll see:
- chrome
- install.js
- install.rdf
A folder and two files. install.js was all you used to need for the installation, but now that the extension manager has changed (since Firefox 0.9), the install.rdf is used instead. Now, the install.js is used purely for earlier versions of Firefox/bird, Mozilla, and Netscape. If you want to make this extension solely for 0.9+ versions of Firefox, then you can omit this file if you’d like. I tend to keep it in because it only take a second to make, and assures a wide audience compatibility. Some extensions simply aren’t backwards-compatible, though, for example my ListZilla extension, since it gathers all information from 0.9’s extensions manager. A nice simple “Hello, world!” prompt shouldn’t present any problems, though.
If you open up install.js, you’ll see that it’s very basic, in terms of what you need to modify to make your own install script:
// --- Editable items begin --- extFullName: 'Hello, world!', // The name displayed to the user extShortName: 'helloworld', // The leafname of the JAR file extVersion: '0.1', extAuthor: 'Eric Hamiter', extLocaleNames: null, // e.g. ['en-US', 'en-GB'] extSkinNames: null, // e.g. ['classic', 'modern'] extPostInstallMessage: 'Success! Please restart your browser to finish the installation.' // Set to null for no post-install message // --- Editable items end ---
So all the hard work is done for you. I’m not going post the rest of the code, but you’ll see quite a lengthy amount of work that is fully automated.
Now if you open install.rdf. you’ll see this:
<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:em="http://www.mozilla.org/2004/em-rdf#">
<Description about="urn:mozilla:install-manifest">
<em:id>{9AA46F4F-4DC7-4c06-97AF-5035170633FE}</em:id>
<em:name>Hello, world!</em:name>
<em:version>0.1</em:version>
<em:description>Displays an alert message via right-click
or Tools menu.</em:description>
<em:creator>Eric Hamiter</em:creator>
<em:homepageURL>http://extensions.roachfiend.com</em:homepageURL>
<em:iconURL>chrome://helloworld/skin/helloworld.png</em:iconURL>
<em:aboutURL>chrome://helloworld/content/about.xul</em:aboutURL>
<em:file>
<Description about="urn:mozilla:extension:file:helloworld.jar">
<em:package>content/helloworld/</em:package>
<em:skin>skin/classic/helloworld/</em:skin>
</Description>
</em:file>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>0.7</em:minVersion>
<em:maxVersion>9.9</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>
Re-configuring your extension’s installation
Ok, whoa.. what is all this crap? The first thing you’ll see is the <em:id> tag. This is your very own generated id that will separate your extension from anyone else’s. There are a few ways to make it. You can either use an online perl script to randomly generate one, or if you use Windows, you can use a program called guidgen, brought to us by Microsoft. How deliciously ironic. Or am I misuing the term irony here? Whatever. So if you download that, then you’ll see this when you run it:
So choose 4. Registry Format, then hit New GUID a few times for good measure, then Copy. That’s it, now your new spiffy id is in your clipboard. Replace the old one with this, and you’re set.
Name, version, description, creator, and homepageURL are all self-explanatory. The iconURL and aboutURL are what shows up if someone right-clicks your extension and chooses “About Extension…”. You can leave these blank, it’s not mandatory, but it’s nice to have a little flash every now and then.
Underneath file, this is standard stuff. Just replace all instances of “helloworld” with your extension name. This is where the installation will try and find your files and folders. If you have any icons, you’ll include the skin folder. Again, it’s not mandatory.
Target application is what you’re gearing this for. The ec8030f7… is unique to Firefox, so leave that alone. The minversion and maxversion is what versions of Firefox it will be compatible with. There was a big stink about this recently, since the developers introduced 0.9.1, shortly after telling us to make sure and only put a maxVersion of 0.9. This does not compute. So I recently modified mine to go to 9.9, which will ensure compatibility through the next few versions of Firefox. This isn’t the type of thing that mozilla will support, since they can only recommend keeping the maxVersion to the current release, but it’s the best way to keep you sane, so you don’t have to update your extensions every few weeeks.
Chrome is more than a shiny bumper
Ok, now open up the chrome folder. In there you’ll find another archived file, helloworld.jar. Open it up and extract the files. You’ll now have content and skin folders. Let’s explore content first. In there, we have a helloworld folder, and under that, these files:
- about.xul
- contents.rdf
- helloworldOverlay.js
- helloworldOverlay.xul
about.xul is the file you see when you click “About Hello, world!…” in the extensions menu. It’s pretty self-explanatory, and you’ll see that a nice man named Jed Brown wrote the template for it, so all the hard work has been done for you. Again. So just fill out the info, and that’s it.
helloworldOverlay.xul and helloworldOverlay.js are what make things happen. They’re the brains behind the outfit, so to speak. And you’ll be amazed at how simple they are. Here’s helloworldOverlay.xul:
<?xml version="1.0"?>
<overlay id="helloworldOverlay"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<!-- This imports our javascript. -->
<script type="application/x-javascript"
src="chrome://helloworld/content/helloworldOverlay.js">
</script>
<!-- This is for the right click menu. -->
<popup id="contentAreaContextMenu">
<menuitem id="helloworld" label="Hello, world!" accesskey="H"
insertafter="context-stop" oncommand="hello();"/>
</popup>
<!-- This is for the Tools menu. -->
<menupopup id="menu_ToolsPopup">
<menuitem insertafter="devToolsSeparator" label="Hello, world!"
accesskey="H" oncommand="hello();" />
</menupopup>
</overlay>
So all it says to do is to insert the javascript file, helloworldOverlay.js, and to create a context menu entry called Hello, world! accesskey=”H” underlines the “H”, since it’s the first letter that wasn’t taken by any other options. insertafter=”context-stop” places the option directly underneath the Stop label. oncommand makes it launch the window with the function hello, which is located in the javascript file we imported earlier. The second part of the overlay tells it we also want to place an option in the Tools menu. Same logic as the context menu, just a different place to stick it. Here’s what helloworldOverlay.js looks like:
// This is our javascript, which will pop up our message
// in an alert box.
function hello(){
alert("Hello, world!");
}
Now for contents.rdf. This is the file that tells the browser where to store this overlay information. Here’s what it looks like:
<?xml version="1.0"?>
<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
<RDF:Seq RDF:about="urn:mozilla:package:root">
<RDF:li RDF:resource="urn:mozilla:package:helloworld"/>
</RDF:Seq>
<RDF:Seq RDF:about="urn:mozilla:overlays">
<RDF:li RDF:resource="chrome://browser/content/browser.xul"/>
<RDF:li RDF:resource="chrome://navigator/content/navigator.xul"/>
</RDF:Seq>
<RDF:Seq RDF:about="chrome://browser/content/browser.xul">
<RDF:li>chrome://helloworld/content/helloworldOverlay.xul</RDF:li>
</RDF:Seq>
<RDF:Seq about="chrome://navigator/content/navigator.xul">
<RDF:li>chrome://helloworld/content/helloworldOverlay.xul</RDF:li>
</RDF:Seq>
<RDF:Description RDF:about="urn:mozilla:package:helloworld"
chrome:displayName="Hello, world! 0.1"
chrome:author="Eric Hamiter"
chrome:authorURL="mailto:ehamiter@gmail.com"
chrome:name="helloworld"
chrome:extension="true"
chrome:description="Displays an alert message via right-click
or Tools menu.">
</RDF:Description>
</RDF:RDF>
You’ll notice the address chrome://browser/content/browser.xul up there. This is mozilla’s internal frame of reference. browser is the actual browser, and navigator works for non-Firefox builds, like Netscape or Mozilla. The only part you’d need to modify is the descriptions. The rest of it just implements the extension into the browsers.
Skin that cat
Now let’s backtrack to the skin folder. In it, we’ll find a few more folders: classic and helloworld. This is just the traditional layout, and if it ain’t broke, then hey, don’t fix it. In helloworld, we find three files: helloworld.png, helloworldb.png, and a contents.rdf file.
helloworld.png:
helloworldb.png:
These are called from about.xul mentioned previously, for use in the extension menu and the about menu. contents.rdf simply maps out the paths to the skin files, so the only modification you need to change for your own extension is in the last line, which points to the folder helloworld.
Pack it up and try it out
So now that you see how the files work, and where they’re packaged, you can modify them to your whims, and try out new things. Once you modify them, just pack them up in reverse order. Using your archive program, you would navigate back up to the chrome folder, and add content and skin into a zipped archive, then rename it to extension.jar. After that, navigate up another folder, and add chrome, install.rdf, and install.js into another zipped archive, then rename it to extension.xpi.
You’re ready to test it out in your browser now. Open up Firefox, and hit CTRL-O, or Open File. Load up your xpi file, and say yes to the installation. Restart Firefox, and hopefully you’ll see your new extension in the menu, and it does whatever you had hoped it would do.
An easier way to re-build
After a while, it gets tiresome to select your files, your folder, archive them, rename them, move them, delete them, rename them… you get my point. If you have 7-Zip installed, you can use the command line feature, so you can have this all fully automated. Here’s what you need to do:
Copy C:\Program Files\7-Zip\7z.exe to C:\WINDOWS\system32 (This will put 7z.exe in your system’s path, which will make it accessible from the command prompt).
It’s a good practice to build your extensions somewhere far away from random scripts and clutter, so create a new folder somewhere and call it whatever your extension is named. Make sure it matches the internal .jar file that you previously referenced in your install.rdf file. You can always rename the final xpi to something more intricate afterward, but for packaging, it’s best to keep it simple.
Copy the following script and paste it in a text editor and save it as build.bat in your newly-made folder:
set x=%cd% md build\chrome cd chrome 7z a -tzip "%x%.jar" * -r -mx=0 move "%x%.jar" ..\build\chrome cd .. copy install.* build cd build 7z a -tzip "%x%.xpi" * -r -mx=9 move "%x%.xpi" ..\ cd .. rd build /s/q
Now, you can build or modify your extensions easily. Just use the new folder as your base of creation, so that would contain the install files and chrome folder. Whenever you want to create your new file, just double-click build.bat, and your new extension will pop out in the same folder. Each time you use the build.bat script, it will delete your old file and create a new one.
My Firefox just got completely hosed up
Worst case scenario: upon restarting Firefox, it hangs with a “Firefox is still installing an extension, this may take a minute…”. This means you borked it up somehow. Don’t panic! A super easy way of uninstalling it without hosing the rest of your shit up is as follows:
Start » Program Files » Mozilla Firefox » Mozilla Firefox (Safe Mode)
Then go to Tools » Extensions » [right-click on your extension] » Uninstall
Restart Firefox, and it’ll be gone. Then modify your files and try again.
Ensure server compatibility
If it works, and you want to put it on your web server, but find out that it won’t install directly, and your browser is treating it as “Save File As..” then you need to modify your .htaccess file. You can learn more about it here, but for brevity’s sake, you need your server to run on Apache for it to work. If you have no problem modifying the file, here’s the information you need to add:
Add this to your .htaccess file:
AddType application/x-xpinstall xpi
And you should be set.
Additional help and information
If you want to take a look at any other files I’ve created, they’re on my main extensions page, and I’ll list them directly here for convenience as well:
- Allow Right-Click
- Alt-Text for Links
- Always Remember Password
- BugMeNot
- Ext2Abc
- Google Images Re-Linker
- Goon Menu
- ListZilla
- Teleflip
- Word Count
If you’d like to put a certain snippet of Javascript on every page, Allow Right-Click or Always Remember Password is the way to go. Alt-Text for Links uses javascript to control tooltips. If you’d like to create your own links menu, then Goon Menu is good to learn from. BugMeNot uses complex regular expressions, ListZilla deals with setting options and using the extension manager, and WordCount is a good way to learn how to take a bookmarklet and use it as an extension.
The Mozillazine extensions forum is a great place to learn more about creating extensions. They’re under heavy loads from time to time, so they might be down when you read this, but try back again if they are, because they have a lot of useful information there.
Loads of other useful extensions can also be found at Mozilla Update, and there’s another place called My Extensions Mirror that has forums as well as tons of extensions.
Well, that’s it. Hopefully this has been helpful to at least a few ambitious people, as well as a look into what goes into making one for the non-technical types. So get off your ass and make something useful!
-->
March 8th, 2005 at 5:55 pm
Hi!
you are inspiring others to write tutorials. way to go! and i quote
‘Heavily inspired by roachfiend.com’
http://www.gmacker.com/web/content/tutorial/firefox/firefoxtutorial.htm
March 9th, 2005 at 7:54 am
Hi,
Thanks for a great tutorial. Helped me a lot.
Can you re-post you tutorial about updating extensions, or point to where I can find info about it?
Thanks.
March 9th, 2005 at 11:09 am
Ilan, I’ll probably end up re-writing that tutorial today, so check back soon.
Edit: it’s up now.
March 9th, 2005 at 10:16 pm
Thanks for the quick response :)
March 13th, 2005 at 4:15 pm
Thanks for the great tutorial!
March 14th, 2005 at 11:49 am
hi!
i have advanced the build.bat :
http://kb.mozillazine.org/Talk:Dev:Extensions:Windowscmdbuild_script
now it works too in subdirectories with the pure foldername, stripped from path (%CD%).
March 15th, 2005 at 10:23 am
You shouldn’t write such a kind of guides if you can’t even add a locale to your extensions.
March 15th, 2005 at 10:51 am
Feel free not to read it, then.
March 16th, 2005 at 1:24 am
Nice guide man. Just give me a bit to think of what I want to write an extension for, :).
March 16th, 2005 at 10:59 pm
Thank you for taking the time to write this. I found it useful.
March 17th, 2005 at 6:43 am
Hello!
I need to write a FireFox extension.
The extension must have an access to DOM of each opened document (am I wright, that each opened document must have one copy of my extension “object”?).
I’ll try to describe my problem:
I have standalone application, which keeps the logins & passwords in it’s database. The purpose of FireFox extension is autofill the web-form with specified login & password.
So when user select any login & password, my application fill the file-mapping structure with selected login & password & send the certain message to FireFox window (for example WM_USER + 13).
The FireFox window must get login & password from file-mapping stucture & autofill the web-form of current document.
On initialization extension must set hook to current FireFox window. If certain message will be received by hook, extension must fill the web-form with login and password (wich it get from file-mapping from standalone application).
How can I realize this functionality in extension for FireFox? May be you have any samples or code?
I will very appritiate for any help!!!
March 22nd, 2005 at 3:40 pm
Awesome man! This guide is crisp and clear and is a good start for beginners who want to implement their own extensions to FF. Thanks for writing this up.
March 23rd, 2005 at 7:35 am
Great tutorial! I want to make a plugin for something at work but I’ll need to put 2 input boxes into the toolbar, do you know of any examples I could follow? I guess it would be similiar to the google toolbar because it will be posting to an internal app.
March 24th, 2005 at 8:21 pm
[…] fox Extensions Want to learn how to make your own Firefox extensions. Here is a cool tutorial from RoachFiend.com. T […]
March 25th, 2005 at 12:08 pm
I’m interested in extending Mozilla more than Firefox, but still this tutorial really is great. I thank you very much for sharing it. I second what Raghu said. I’m well on my way to making an extension of my own thanks to you.
March 26th, 2005 at 10:14 am
[…] iter has written a tutorial showing you how to write a simple “Hello World” extension. http://roachfiend.com/archives/2004/12/08/how-to-create-firefox-extensions/ Comments » The URI to Tra […]
April 4th, 2005 at 2:14 am
Hi,
Great tutorial…
The last time ( an year ago ) when i tried following a tutorial for making a simple extension, it took me a couple of days, doing everything by hand. It was hell, really.
This time, it was 15 minutes…
Thanks again :)
April 6th, 2005 at 10:45 am
Excellent tutorial! I’m wondering if you can write extensions for firefox running on linux/bsd, as well. Any thought?
thanks for sharing the tutorials :)
April 6th, 2005 at 3:46 pm
[…] ow to create Firefox extensions
Filed under: ramblings — mike @ 4:46 pm
roachfiend.com » How to create Firefox extensions Thought this migh […]
April 7th, 2005 at 8:59 am
Could you post (or direct me to) newb directions on using the command line feature to zip everything up?
April 8th, 2005 at 9:52 am
Thank you! You rock.
April 11th, 2005 at 3:14 pm
Cool tutorial! Thanks for making it easy. I just want to do a few extensions for my own use and this is sufficient to get me going.
April 12th, 2005 at 4:25 am
[…] Create a FF extension yourself
How to create Firefox extensions
…this tutorial is just so cool, […]
April 12th, 2005 at 9:17 am
Many Many Thanks for the toturial …
It was easy to follow and clear enough..
I started to think about making an extension after I read it ..
Thank you again ..
April 15th, 2005 at 11:37 am
Great tutorial! But I’ve a problem, when I open the xpi file in firefox and on install now click:
Firefox could no download the file at [uri] because: Install script not found
I use linux, this is the reason. Firefox can’t read the zip file correctly. I don’t know how I should create the zip file Can someone help me?
April 15th, 2005 at 4:15 pm
why do i get a update available notice after i remove all update urls from this extansion?
April 23rd, 2005 at 11:53 am
[…] 7;t too painful, though. Then it came time to modify the wikalong extension. I found the roachfiend site on Firefox extension development. I don’t blam […]
April 28th, 2005 at 12:38 am
Cool tutorial, but I have this one problem with it, you mention that “Clicking on the “About…? in the extension manager will get us this” I’m looking at your picture of the extention manager above… (and the window that pops up when I got tools->extensions) and I don’t see an about button… perhaps I’m just stupid, but I don’t seem to be able to figure out how to get the about window you show to pop up.
April 28th, 2005 at 10:44 am
Tearfang, try right-clicking on an extension in the extension manager. Then you’ll see the about option.
April 29th, 2005 at 8:12 pm
Cool tutorial!
Can you recpmmend some pages handling JS for firefox plugins?
April 30th, 2005 at 7:45 am
Thanks a lot.
May 2nd, 2005 at 4:44 pm
Thanks for the excellent tutorial, it has been extremely informative, not to mention concise.
Thanks again!
May 4th, 2005 at 9:19 am
If you plan to make the extension available for linux don’t use the guid provided by the perl-script, it won’t work! (It took me some hours to figure that out). I think the reason is that your GUID does not contain any capital characters.
May 5th, 2005 at 4:56 am
Sorry I think something else went wrong. Thank you for this excellent guide.
May 5th, 2005 at 9:55 am
Is this tutorial similar to what you would need to create a Thunderbird extension as well? Great tutorial. Thanks.
May 5th, 2005 at 3:12 pm
Hi,
thanks for this!
It would be EXTREMELY helpful to extension newbs like myself if you would include that package names(in chrome/contents/extension_name/contents.rdf) MUST be lowercase. NO MIXED CASE!
Spent way too much time trying to figure out why my extension wouldn’t install, and worse, why it would disable my browser - until I came accross this juicy little tidbit.
May 5th, 2005 at 6:19 pm
you made bugMeNot?
omg - you rock!
thanks!
May 10th, 2005 at 2:17 am
that great thanks
May 12th, 2005 at 4:45 pm
Excellent Tutorial! Many thanks. Think I now get an idea what the hell is going on with extensions.
May 15th, 2005 at 1:49 pm
Great Tutorial and nice extensions. VERY helpful.
May 16th, 2005 at 9:30 pm
Could you write a tutorial on how to make your extension’s command show up in the “This Frame” sub menu?
May 20th, 2005 at 7:25 am
I never knew about that thing either! That tells me a lot.
May 26th, 2005 at 5:23 am
SPOCK - “Captain! We should identify the species first then select a language to communicate!”
CAPTAIN KIRK - “Mr. Spock. Are you saying that this is a new species?”
SPOCK - “No Captain! Just unidentified.”
……………………………..
I enjoyed the tutorial. It was not on my list of goals. This was a delightful distraction from my endeavors. Upon the conclusion, I pondered the thought of how I surfed over to the other side of CYBERSPACE UNIVERSE and confronted by this alien topic.
I for unknown reason I will probably always remember this tutorial when all my other memories become mush!
I blew the time in this tutorial in nothing flat. I glanced at the time and warped 1.5 hours into the future without a good excuse for the lost time. It was then I recalled a comparative anomally from a forgotten TV episode space exploration series.
WITHOUT HESITATION I ADMIT THAT A GOOD TRAINING PROGRAM/INSTRUCTOR AND OR TUTORIAL THAT CONSUMS THE STUDENT’S/READER’S/AUDIENCE’S THOUGHT, TIME, FOCUS, AND ATTENTION, IS WRITTEN WELL. WHATEVER THE SUBJECT MATTER/LANGUAGE MIGHT BE!!!!!
David Grice Orlando
May 26th, 2005 at 2:55 pm
Well thanks, David… I think.
May 31st, 2005 at 1:22 pm
I didn´t work here. Firefox 1.0.4 won´t install it here. It says: “install-ibf.rdl” and other files are malformed !
May 31st, 2005 at 10:34 pm
What a great tutorial! You are really good at writing tutorials! Keep up your good work!
June 12th, 2005 at 12:00 pm
Hello,
This tutorial is very helpfull. Thanks for that.
Where can we find other tutorials about firefox extensions ?
June 14th, 2005 at 11:11 pm
What is the date on this tutorial? According to “Writing Firefox/Thunderbird Extensions” by Ben Goodger (05/02/2004), the installation file should be “.rdf”, not “install.rdf”.
Which is correct (or are they both acceptable)?
Thanks for a great tutorial!
June 17th, 2005 at 1:14 pm
I had the same problem ‘NOBO’ reported on Linux.
Firefox could no download the file at [uri] because: Install script not found
The solution is to re-zip the file correctly.
In my broken zipfile, items listed out with a preceding period. e.g “./chrome”. This was created by ‘jar’ In the fixed version, they are not: “chrome/”. This fixed zip was from ‘zip’
June 17th, 2005 at 9:27 pm
Its great that people like you are supporting open source and free coding like this. Good job.
June 20th, 2005 at 8:33 am
[…] ybe I’ll make up for it and you’ll get two links today. For now you can learn roachfiend.com » how to create Firefox extensions. Enjoy.
Brad 2: […]
June 22nd, 2005 at 6:15 pm
This tutorial rocks!
June 25th, 2005 at 7:01 pm
Thanks a lot for the tutorial. I love firefox.
June 26th, 2005 at 9:07 am
Thanks for the tutorial. I am trying to write a firefox extension and this is a big help.
June 27th, 2005 at 1:26 pm
Hey.. Great tutorial!
How do you make a dialog come up when the user presses the “Options” button from the Extensions window?
June 28th, 2005 at 2:44 am
I’ve modified and rewrittend some parts of the example to get it to work with Thunderbird (1.0.2).
Hello Thunderbird - Extension: http://voidmachine.org
June 29th, 2005 at 4:44 am
Nice tutorial…
something weird happend to my build.bat “\par” was pasted on every line, not sure how that happened…
Keep an eye out for that.
July 2nd, 2005 at 1:06 am
Hey If you study my logs, I’ve been getting random requests from Googlebot, It’s always in the root or in relevant subdirectories (usually /blog and forum or similar). All of these sites are with Word Press, and I can promise there is no mention of or links or anywhere. This means Googlebot is guessing that these files will be there. Now I’ve come to expect random flailing for syndication files from Feedster and Kinja, but Google? Et tu, Googlebot? Google pr updation is neer by in this month, so get your way……..
July 2nd, 2005 at 1:34 pm
Grat Tutorial!!
Thanks a lot!
July 2nd, 2005 at 7:39 pm
[…] te Firefox Extensions
Eric of roachfiend.com has two helpful tutorials up on How to Create Firefox Extensions and Enabling Extension Updates. These […]
July 3rd, 2005 at 2:22 am
G’day i followed the tutorial but just a it was installing it said”sorry Extension not compatible”
Whats wrong?
July 3rd, 2005 at 2:56 am
Great information ! :-)
July 4th, 2005 at 3:26 pm
Realy great tutorial.
July 10th, 2005 at 6:53 pm
[…] fox extensions. Maybe if I can find some free time I’ll take a crack at making one. Link. […]
July 11th, 2005 at 8:18 pm
Thank you for taking the time to make this tutorial. I however, cannot open the “helloworld.jar” file under the “chrome” subfolder.
Please help if you can. Thanks.
July 11th, 2005 at 8:25 pm
How do I read/write to/from local files?
Thanks
July 12th, 2005 at 11:05 am
Hey Eric! Mind emailing me :P? I had a question about a small thing related to your tutorial which I can’t seem to work out.. I am totally stuck at a step. Thanks :)
July 17th, 2005 at 4:32 pm
nice words… very helpful!
July 19th, 2005 at 7:09 am
Excellent guide. I wish I’d read this before I started on my own extension travels about a week ago!
I also produced a batch file packager, which you can find
here
July 19th, 2005 at 5:35 pm
Thanks for all the help.
It helped me to achive writting my own extenstions.
July 22nd, 2005 at 6:43 pm
Nice tutorial
Thank you for help
July 26th, 2005 at 8:08 pm
It says “Invald XPI install” or something of that sort.
July 27th, 2005 at 4:59 am
Wonderful. Now I have a better understanding of how an extension is built. Thanks.
July 29th, 2005 at 2:47 am
[…] ing at a serious level. Thought some people might like to have a look at this article. read more | digg story This entry […]
September 10th, 2005 at 12:05 pm
I updated the maxVersion number on this so the latest Firefox release will work.
September 11th, 2005 at 4:42 am
Excellent tutorial! Thanks you very much!
October 13th, 2005 at 10:33 am
Where could I find an API for Firefox extensions?
October 14th, 2005 at 11:41 am
Good article, could the author or someone point out to some article that halps me write a Java extension in Firefox? Basically I want the extension to invoke my java code and execute something.
Thanks,
October 17th, 2005 at 6:15 pm
Hi,
first thank’s by the tutorial and i asking your help if you can.
I can’t install the extension, it ask to restart the firefox, and to be sure i have restart the pc and cannot see the option Tools->HelloWorld and it says thath i have to restart firefox.
I have to make a extension for project at university and it’s a good idea if I can do a hello world.
Thanks,
Aníbal (Portugal)
October 19th, 2005 at 10:25 am
I just found your tutorial (thank you).
I have not been thorough yet and might have missed the answer but …
My question is: can a plugin access a local hardware device, get information from it and return it to the server ?
October 19th, 2005 at 4:59 pm
Awesome. This is just what people like myself need to create their own extensions for Firefox. Thanks!
October 20th, 2005 at 9:11 pm
Yo, I was wondering if you could tell me, how do you get a context menu item in an extension to only show up when right-clicking on a link?
October 21st, 2005 at 7:09 pm
Thanks for the tutorial! Very useful.
October 22nd, 2005 at 9:34 am
XerBlade:
function OnlyShowOnLink() {var cm = gContextMenu;
document.getElementById("object") = cm.onLink;
}
October 25th, 2005 at 10:45 am
Hi, hope someone replies to this.
I wanna make a Quicktime plug-in for Firefox.
Yes, I know about Quicktime Alternative. But I think I
could put together an app that leaves an even SMALLER
footprint than that.
The Quicktime standalone is 19.2 MB (over 60MB installed). Quicktime ALternative is 10.5MB, but still over 30MB installed.
I got Media Player Classic and a codec installed on my system. Together, they only take up 6MB!
Only problem is… NO plug-in.
Any ideas?
Please e-mail me at gerzean@gmail.com
October 25th, 2005 at 5:07 pm
Nice tutorial, i’ve looked at some more tutorials but have run into a problem now: this tutorial explains how you can have an ‘about’ with your extension but it doesn’t cover the ‘options’ form.
Can anyone link me to a page that explains how to make an options menu for my extension in a way the options will be saved and reloaded next time the extension needs the settings.
Thanks in advance,
Scorpie
October 26th, 2005 at 6:29 am
nice! One question though:
what are the .DSStore files, and the _MACOSX folder?
some files mac’s need? how do you create them?
October 26th, 2005 at 3:36 pm
Can we Call ANY FIREFOX EXTENSION from Linux Command Line
I tried SCREENGRAB Extension to Run from Command Line i dont know…ANY Body would like to Share ideas??
October 28th, 2005 at 10:53 am
I will now write extension in my sem brek
October 28th, 2005 at 12:14 pm
Hello Eric! Great tutorial!
I did a bat file to automatic create the .xpi extension. You just need to create the directory structure as:
basedir/packager.bat
basedir/extensionname
basedir/extensionname/chrome
basedir/extensionname/chrome/extensionname/.
To create package, run packager.bat and provide the name of your extension.
It will create all the structure on Windows TMP folder and move the .xpi to the basedir.
You can download this example and the packager.bat on http://simplesideias.com.br/extension/extension.zip
October 30th, 2005 at 4:38 pm
Can you make an extension for firefox that can show nfl scores of certain teams of your choice that will be seen either in a tool bar above or down by the status bar?
November 2nd, 2005 at 2:05 pm
Excellent tutorial. even for beginners like me. :)
November 6th, 2005 at 2:11 pm
Thanks a lot, this tutorial was very useful.
November 10th, 2005 at 5:28 pm
Very interesting tutorial. Very useful.
November 16th, 2005 at 6:44 am
Is there a way to make money off writing extensions?
November 21st, 2005 at 10:15 pm
I need help for “how to create FireFox Extension” in spanish please, sombody helpme?
November 23rd, 2005 at 2:54 pm
First of all, thanks for the excellent tutorial!
My question is, is there any way for an extension to directly edit the preferences of firefox? For example, changing the network settings (pipelining, etc).
I don’t think directly editing the preferences file will work, because firefox rewrites it when it closes.
Any help you can give me will be much appreciated.
November 26th, 2005 at 5:48 am
Greetings one and all,
And thanks for the tutorial!
I am not a developer (yet) (unfortunately).
However, I have a great idea for the aspiring info-preneur (ie firefox extension developer).
Go check out the (brand new) website:
http://www.unifiedroot.com/registrars/
(and No! I don’t work for them; I actually have some gripes).
The solution/app. should be obvious from that point (go visit the link).
Someone needs to build a Firefox patch/extension that does this…resolution (and ones like ti) automatically.
There could eventually be several competing unifiedroots and the one that is the most fair, just and equitable…should/will/can win…
That is the future of the Web!
THEN: Firefox users need to develop a “coop” version of what is going on here…. UnifiedRoot has basically just made an unjustified and unfair GRAB of internet real estate that will likely be a) successful (!?)-ish and b) widely (if not wildly) imitated and copied….
We need to make a forum about this and develop alternatives… UNFORTUNATELY, I don’t have the SKILLS to do this (yet), but I know some of you out there, have both the SKILLS and INTEREST to help sort out this huge profitable (if UNFAIR!) new phenomenon.
One of my favorite quotes, I think it’s in William Gibson’s “The Princess Bride”:
“Life isn’t fair. It’s just fairer than death, that’s all.”
Ain’t it true?
November 27th, 2005 at 1:46 pm
Instead of using a batch file to recompile the xpi try 7-zip. Its freeware and lets you drill down directly through the xpi and compressed jar, recompiling any changes you make on the fly.
November 30th, 2005 at 1:54 am
http://www.chadhaajay.net
December 14th, 2005 at 4:11 am
Thanks for a great tutorial!
December 14th, 2005 at 11:26 pm
Good info, thanks. I don’t have time now but I will definetly try to make one, at least Hello world :)
December 15th, 2005 at 3:42 am
good info. your tutorial is very clear.
December 15th, 2005 at 10:33 pm
Hi! Nice site. Check site about phentermine - http://phentermine.home.ph
December 16th, 2005 at 10:13 pm
Hi! Nice site. Check site about viagra - http://best-meds.test.punkt.pl/viagra/
December 19th, 2005 at 2:52 pm
I think that i easily get this extensions from official & fan’s sites.
But, i respect thing, what you did!
December 21st, 2005 at 7:31 pm
Hey there. I know this is maybe an old thread, but it is still getting lots of attention. I have my extensions development files in a SVN directory. Is there a way for 7z.exe to ignore the “.svn” folder when running the bat files. This adds an extra meg to the .xpi in the end. Thanks in advance. :)
December 22nd, 2005 at 2:00 am
I am just learning how to do this, and I think that I may take up to a week for me to be able to get one right.
Anyway, my question is - is it possible to extract data from websites? Let’s say I want to extract data or something from a webpage and utilize it in my extension, how would I go about this?
December 22nd, 2005 at 9:45 pm
Hi, the packaging script you included in this tutorial works great and very fast,
however i came to the conclusion it does not implement
directory’s you add under the root directory of the extension directory.
Like in my case i was in need to add a defaults folder in my .xpi file,
so i added the following line to make it work.
This includes the default directory and it’s underlying directory’s into the .xpi
Here’s my version:
Hope this is a help to all you out there facing the same needs :-)
December 24th, 2005 at 11:09 am
Great site and you are the only site that told me to change the .htaccess file to:
AddType application/x-xpinstall xpi
Thank YOU!
December 29th, 2005 at 6:29 am
Thanks , i am searching for this tutorial long time ago… thanks for sharing
January 2nd, 2006 at 11:32 pm
thanks alot men, this tutorial help me alot. Thanx again
January 4th, 2006 at 6:25 am
Thanks very much for the tutorial, i made good use of it, except that i dont know enough javascript yet :)
I put a link to it on my blog, hope u dont mind
http://atariboy.wordpress.com/
January 4th, 2006 at 2:37 pm
Nice tutorial. I’ve started writing an extension based on what I’ve learned here.
January 10th, 2006 at 10:38 pm
Thanks Eric, this looks extremely helpful. But since i’m popping the proverbial cherry here, i’ve got a question. Can i write an extension to open up other program windows into a firefox tab? kind of like the pdf viewer extension?
What i want to do is write an extension for Isilo document reader so i can have access in firefox
is that possible at all? for a novice?
thanks, josh
January 10th, 2006 at 11:15 pm
iacchi said,
“You shouldn’t write such a kind of guides if you can’t even add a locale to your extensions.”
You shouldn’t post comments like that if you can’t even use proper grammar, you retarded troll.
January 10th, 2006 at 11:26 pm
Thats funny . . .i didn’t realize that this was an english paper . . . maybe you’re right, maybe i am a retarded troll . . . .maybe i should drop out of medical school. . . .or maybe i’ll stick with it and keep the 6 figure income. . ..
thanks though
January 11th, 2006 at 6:03 pm
Eric has clearly put time and effort into producing a tutorial for those of us who have a genuine interest in creating FireFox extensions.
If you really are as intelligent as you claim to be then you could perhaps put your time to better use.
As you can see from the comments posted so far, most people have been helped and inspired by the tutorial.
If you believe you can create a more superior tutorial then contribute something useful to the community and do so.
January 11th, 2006 at 7:07 pm
Hey Paul,
My apologies, I honestly didn’t mean to offend anyone. My sole purpose was to mock Rick’s comments about grammar. In no way did I intend to insult anyone else.
I was thrilled when I saw this tutorial because I would like to learn more about programming.
If I offended anyone, I apologize. Except for Rick - he’s still a douche
January 12th, 2006 at 1:10 am
phpkb Knowledge Base Software Script
January 13th, 2006 at 12:26 pm
Oh man, I just finished my first extension! I know its just a simple extension but its a neat feeling. I can see thought that i’m a long ways from the extension i want to right!
January 17th, 2006 at 12:57 pm
I have an updated helloworld.xpi for firefox 1.5.
It is more of an application than the original.
- command line handling
- chrome.manifest rather than contents.rdf
- includes locale
- includes default preferences
Probably time this tutorial was updated ;-)
January 18th, 2006 at 4:07 am
Good tutorial , thanks for info
Regards,
Jam
January 20th, 2006 at 2:14 am
was thrilled when I saw this tutorial because I would like to learn more about programming.
January 21st, 2006 at 10:00 pm
Hallo evrybody.. nice place here :) Feel free to visit my website
http://home.arcor.de/ativan/ativan.html
January 22nd, 2006 at 1:02 am
I have a navigation menu extension but dont know how to add a link in menu.xul that contains the “&” symbol.
For instance
&t=33258′);” oncommand=”tsg_ope
Any help for this?
January 22nd, 2006 at 1:14 am
oopss here it is
onclick=”mboopen(event, ‘http:// folding.extremeoverclocking.com/userlist.php?s=andsrt=1&t=33258′);” oncomma … etc
January 28th, 2006 at 7:51 am
i am making an extenion that is a dropdown menu. i have it all working and fine. but does anyone know how to get it to use an RSS bookmark?
like a standard live bookmark. i know it can be done. hell, firefoxes ‘go’ dropdown can have those.
but does anyone know how to define them in an extention? (used as a news update for my site that broadcasts rss)
January 28th, 2006 at 3:02 pm
and to add links with a & in it. replace the & with this & that will make it work
February 5th, 2006 at 1:57 am
lol doesnt show up
February 5th, 2006 at 11:25 pm
Awesome!
Thank you for information!
Best Regards,
Catalin
February 6th, 2006 at 11:23 pm
You may use this tool to create a Firefox extension.
http://www.arantius.com/misc/greasemonkey/script-compiler.php
February 7th, 2006 at 12:23 am
thanks for your info :)
February 7th, 2006 at 6:50 am
Hi,
Nice tutorial.
Does anyone know if it’s possible to install xpi without user interaction? I’m willing to include my extension to external installation.
February 8th, 2006 at 8:05 am
Hey, i released Anti-Paranoia:
https://addons.mozilla.org/extensions/moreinfo.php?id=2001
It bases very much on this Hello world example and could be the next step for starters. You can look at the code at http://johbuc6.coconia.net/doku.php/anti-paranoia
Enjoy!
February 13th, 2006 at 7:47 pm
sweet tutorial, too bad it sucks
-impossible to follow
-partial codes cause ur a lazy fuck
-doesnt teach u anything about creating extensions, just tells u how to make the ever so usefull “hello world”
February 15th, 2006 at 3:58 am
nice tutorial, thanks for info
jimmy
February 15th, 2006 at 4:02 am
cool tutorial, thanks for helping.
February 15th, 2006 at 9:31 am
Someone wrote how the tutorial sucks because it’s…
“-impossible to follow
-partial codes…
- doesn’t teach you about creating…”
First off the tutorial is one of the best and easiest to follow I’ve found on the net thus far.
Well since the code is downloadable, it provides all the information.
It DOES teach you how to create a “Hello World” extension; however, you have to know how to program to make something that you want to make. If you want to make an extension that utilizes javascript-rpc or ajax in order to do some form of database transactions with in your extension, you’ll need to know how to do the javascript for that.
This was a tutorial for how to make a general extension, and not a tutorial on how to write xul files for chrome. It succeeds very well in it’s purpose.
Again, a VERY good guide.
February 17th, 2006 at 3:12 am
I agree with you the way you view the issue. I remember Jack London once said everything positive has a negative side; everything negative has positive side. It is also interesting to see different viewpoints & learn useful things in the discussion.
February 18th, 2006 at 5:12 pm
This tutorial seems great, but I really want to hone in on creating extensions for Thunderbird.
Does anyone know of a Thunderbird version of this or a similar tutorial that works on 1.5?
February 27th, 2006 at 2:51 pm
Man I got tired scrolling to the last line! HOOOOOF!
March 3rd, 2006 at 3:54 pm
the roach keeps following me.
March 6th, 2006 at 2:21 am
cool tutorial, thanks for helping.
March 6th, 2006 at 2:22 am
thanks for your info :)
March 10th, 2006 at 6:39 pm
“Copy C:\Program Files\7-Zip\7z.exe to C:\WINDOWS\system32 (This will put 7z.exe in your system’s path, which will make it accessible from the command prompt).”
A better way do to this is to add “C:\Program Files\7-Zip\” to your Environment Path. Go to your system control panel or press WIN+BREAK. Click the Advanced tab. Click the Environment Variables button. Under System Variables, find “PATH”, click it, and click Edit. Add it to the end of the path. It should look something like “C:\Perl\bin\;C:\WINDOWS\system32;C:\WINDOWS;C:\Program Files\7-Zip”. Notice the semicolons.
That way when you update 7-Zip, you don’t have to recopy that binary each time.
March 11th, 2006 at 12:55 am
Could I translate this page to Chinese, and post it in Mozilla Taiwan Wiki?
March 12th, 2006 at 11:06 pm
i don’t think the webmaster will answer us… it is in archieves folder
March 13th, 2006 at 7:38 pm
Fantastic tutorial! I was looking for a way to add an external language translator (English Spanish) to firefox and this goes a long way to answering the firefox mechanics!
March 16th, 2006 at 1:46 pm
enlargement pills for penis….This site is about penis enlargement methods:pills,exercises,device,patch,information and news.All for a bigger penis.
March 17th, 2006 at 11:12 pm
Finally I got out of sizegenetics, and ambled downstairs to the bathroom. After relieving myself, I turned around to see a sizegenetics hamper. The roommate’s clothing hamper.
March 17th, 2006 at 11:13 pm
I immediately began jerking off, thinking of her penis enlargement lovely pussy, and how it’s dry yet heady juices were rubbing against my nose, knowing from experience that penis enlargement the scent would somehow remain there on my face all day.
March 21st, 2006 at 10:43 am
This is amazing! I wish there was an easy way to get this to also work in IE. Oh well, I will keep searching.
March 21st, 2006 at 1:09 pm
Does anyone know why this will not register in Firefox 1.5.0.1? I tried changing the install.rdf but still seems to be a problem.
March 21st, 2006 at 8:43 pm
Google has an extension that will enable one to type a US cell phone number chose from about 10 major service providers and type a brief message, this message will then be sent as an SMS message to the cell phone. (See http://www.google.com/tools/firefox/sendtophone/index.html)
It would be great if I could create a simple calendar that will just store some basic dates (something like ReminderFox https://addons.mozilla.org/extensions/moreinfo.php?id=1191&application=firefox), but rather than remind me through a browser message have it send a SMS message to my cell phone using the google-sendtophone extension. (This supposes that I leave my computer on and my browser running, but am not necessarily at my computer.)
Both extensions exist, how do I take two installed extensions and open them up to learn enough to integrate them and then install them as a single integrated extension?
Thanks for any ideas.
March 22nd, 2006 at 3:42 pm
I know all it. But big thanks ;)
Added in bookmark
March 22nd, 2006 at 4:34 pm
May The Force Be With You!
March 23rd, 2006 at 2:06 am
thanks for the info.
:P
March 23rd, 2006 at 3:35 pm
great site, thanks
March 23rd, 2006 at 11:43 pm
great tutorial !
March 26th, 2006 at 5:34 am
Repol PHP
nothing more [url=http://webobzor.h12.ru]php[/url]
Term asked
March 27th, 2006 at 4:35 am
This is amazing! I wish there was an easy way to get this to also work in IE. :)