Custom Search

   
       
  Lazy Programmers (LP) Guide To Creating A Firefox Mozilla Extension.  
  Feburary 28, 2005  
  Heavily inspired by roachfiend.com  
     
  Introduction  
 

So you recently downloaded Firefox and are blown away by it. You are impressed by the massive number of plugins that people have written for it. You want to go forth and create your own plugin. If this describes you then fasten your seat belt and get ready for the ride. The following step by step tutorial will walk you through all the steps necessary to write a plugin. The assumption is that you are working on a windows machine and you are writing the plugin for Firefox 1.0.

DISCLAIMER: You are following this tutorial at your own risk. If anything blows up do some meditation before assigning blame.

 
     
  This plugin shows up in your right click menu and it pops up a box saying 'youre hot'.  
     
  Preparation  
 
  • Download 7z. This is a winzip like program but you can manipulate it easily through batch files. Make sure it is in your path. LP way is to put it under c:\windows\system32
 
     
 
  • It is recommended by smart people that you install Firefox in a separate directory (different from your main Firefox installation) where you can play around with it. That way if you hose your installation of Firefox no skin off your teeth. However the LP philosophy dictates that you play around with your main installation of Firefox. As long as you export your bookmarks, and dont mind losing your saved passwords etc then youll survive.
 
     
 
  • Copy the following snippet of code into a file called extract.bat under a directory called c:\firefoxdev
 
     
 


set x=%cd%
cd %1
7z x %x%\%1\%1.zip
set y = %x%\%1\chrome
cd %x%\%1\chrome
7z x %1.jar
del %x%\%1\chrome\%1.jar
cd ..\..

 

 
     
 
  • Copy the following snippet of code into a file called build.bat under a directory called c:\firefoxdev
 
     
 


set x=%cd%\%1
cd %x%\chrome
7z a -tzip %1.jar * -r
cd ..
7z a -tzip %1.xpi * -ir!*.jar -x!*.zip -x!*.xpi
del %x%\chrome\%1.jar
cd ..


 
     
 
  • Download GuidGen courtesy of Microsoft. You can install it under C:\Program Files\GuidGen.
 
     
 
  • Create a folder under c:\firefoxdev\thatshot. Download thatshot.xpi by doing a right click and save.
 
     
  Start  
 
  • cd to the c:\firefoxdev\thatshot folder.
  • Change the name of the file from thatshot.xpi to thatshot.zip.
  • cd to the firefox folder and run 'extract thatshot' (without the quotes ;).
  • This command will extract all the inner guts of thatshot.zip. The assumption is that the jar file inside the thatshot.zip file is also named thatshot.jar. Usually most of the people follow this convention. Sometimes they do not. In that case the extract batch file will not work. You will have to extract everything manually.
 
     
 

After extracting the files your top level folder under thatshot should look like the following

 
 

 

Remember the thatshot.zip file has the original code. We will now look at the install.rdf file. This file is used to tell Firefox information regarding installation of the plugin. Open up the file and lets look at the different segments.

 
     
  Install.rdf  
  This file is used for the installation of plugin in Firefox 1.0 and above.  
     
  First thing you need to do is change the following line  
     
 
<em:id>{963F68C8-6757-4694-9E0D-D6FA548ED14B}</em:id>
 
     
 

This is your id. You want to make sure that its unique. Bring up the GUIDGEN.exe that you downloaded during the preparation section.

Make sure that the #4 option is selected. Press the 'New GUID' button a couple of times just to be sure. Press the 'Copy' button and replace the id in the install.rdf file.

 
     
 
<em:name>Thats hot!</em:name>
<em:version>0.1</em:version>
<em:description>Displays Youre Hot</em:description>
<em:creator>Inahg Asum</em:creator>
<em:homepageURL>http://www.gmacker.com</em:homepageURL>
<em:iconURL>chrome://thatshot/skin/gmapit.png</em:iconURL>
<em:aboutURL>chrome://thatshot/content/about.xul</em:aboutURL>
<em:updateURL>http://www.gmacker.com/update.rdf</em:updateURL>
<em:file>
<Description about="urn:mozilla:extension:file:thatshot.jar">
<em:package>content/thatshot/</em:package>
<em:skin>skin/classic/thatshot/</em:skin>
</Description>
</em:file>

 
     
 

All the other tags are pretty self explanatory. Name, version, description, creator, homepageURL, iconURL specifies the icon in the Extensions Window under the Tools menu in Firefox, aboutURL is the file that defines the about box, updateURL is the link from where one would get updates for the plugin.

Under the file tag you need to define the jar file which resides in the final thatshot.xpi file. In the package and skin tags, change 'thatshot' to whatever name you have decided. We will now look under the chrome/content package. You should see the following files.

 
     
  thatshotOverlay.js  
 

This is the file that holds all the javascript goodies. In our case we just have one method that pops up an alert box with the message

You will put all of your javascript code in this file.

 
  contents.rdf  
  Nothing too mysterious about this file. You need to fix the paths for your plugin. Just search for thatshot to your plugin name. Also change the information in the description tag. Make sure your paths good, screwing them up will cause Firefox to go boinkers. In some cases you will not be able to bring up Firefox at all.  
     
  about.xul  
 

Use this file to define your about box. When you right click on your plugin in the extension window you will see the about menu

 
     
  thatshotOverlay.xul  
  This file dictates how the layout of the plugin. For example in this file we are telling the browser to show a menu item called Thats hot when you do a right click, which has a sub menu also called Thats hot. Be sure to fix the path to the java script file on the top. We will discuss more options for placing your elements later on.  
     
  contents.rdf (skin)  
  Now lets cd out of this folder until you see the skin folder. cd to skin\classic\thatshot folder. Here you will see two .png files and a contents.rdf file. You need to fix the path in here to your plugin name. Also you can change the png files to your taste. If you change the .png file name then make sure that is reflected in the install.rdf file and the about.xul file.  
     
  Thats it were on the last step now. You can cd all the way to the firefox folder. Execute the command 'build.bat thatshot'. This will result in a thatshot.xpi file. Go to Firefox and do file open and click on the .xpi file. You will be led through the installation process. In the newer versions of firefox you may see an error message "Thats hot" will not be updated because it does not provide secure extensions. Make sure you create a new configuration value called extensions.checkUpdateSecurity and set it to false. Follow these steps
  • Open a new tab and type about:config in the address bar
  • Right click inside the window and select New->Boolean
  • A new window will pop up and enter extensions.checkUpdateSecurity as the preferred name
  • Set the default value to false in the next window;
If the browser does not come up youre hosed. Otherwise have fun.
 
     
  Firefox is dead  
 

If you did not install a separate version of Firefox hopefully you saved your bookmarks as mentioned before. You have two options

  • Bring up Firefox in safe mode. Go through your menu (start/All Programs/Mozilla Firefox)and you will see this option.
  • If the above does not work then uninstall and reinstall firefox. Also under %APPDATA%\Mozilla wipe out the Firefox folder. This will remove a bunch of settings you had but such is the price of laziness.
 
     
  Wrap up  
  Congratulations you made it. Now for you to change the plugin, go from top to bottom and change the name thatshot to your name. This includes folder names, file names, within the files, change the menu ids in the thatshotOverlay.xul. You should be good to go.  
     
  Resources  
   
   
     
     
     
     
     

 

   
   
   
   
   
  Table Of Contents
  >>Introduction
  >>Preparation
  >>Start
 
  >>thatshotOverlay.js
  >>contents.rdf
  >>about.xul
  >>thatshotOverlay.xul
  >>contents.rdf (skin)
  >>Firefox is dead
  >>Wrap Up
  >>Resources
   
  Links
  >>Contact Us