| |
|
|
| |
|
|
| |
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. 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
|
|
| |
|
|
| |
|
|
| |
|
|
| |
|
|
| |
|
|
| |
|
|
| |
|
|
