Creating a Firefox Extension in 3 Easy Steps

We recently created an extension for the Hipatic website.

Here is how to create the most basic extension in 3 easy steps!

Step 1:
Create files & folders.

Name it
Inside this folder create files named chrome.manifest & install.rdf
Inside the same folder create a folder named chrome
Inside the folder named chrome create a folder named content
Inside the folder named content create a file named sample.xul

Filling up the files!

open install.rdf and copy the following code

<?xml version="1.0"?>

<RDF xmlns=""

<Description about="urn:mozilla:install-manifest">


 <em:name>My Very First Extension</em:name>
 <em:description>My Very First Extension</em:description>

Open chrome.manifest and fill in this

content sample chrome/content/ 
overlay chrome://browser/content/browser.xul chrome://sample/content/sample.xul

Finally open sample.xul (which is in the folder chrome/content/) and copy the following

<?xml version="1.0"?>
<overlay id="sample" 
 <statusbar id="status-bar">
          <statusbarpanel id="my-panel" label="Please visit" tooltiptext="Visit" onclick="'')"/>

Step 3:
Zipping Up & serving the file!

Zip up the contents of the folder(don't zip the folder, zip it's contents!) you created Using Windows/Winzip/WinRAR. Make sure the format is ZIP in case you use WinRAR. Rename the archive thus created from .zip to .xpi . Now drag the .xpi file you have cretaed to your fiefox browser window. An installation window will pop up. Install the etension and restart the browser! Hurray, you have created your first extension!!

Modding your first extension:

In the file sample.xul
instead of
<statusbarpanel id="my-panel" label="Please visit" tooltiptext="Visit" onclick="'')"/>

you can write
<statusbarpanel id="my-panel" label="Please visit My Website" tooltiptext="Visit My Website" onclick="'')"/>

or you can append javascript files for more functions(More of that later!)


Popular posts from this blog

CPU Temperature Guide for Intel Core 2 Duo : Range of Normal CPU Temperatures

CS50: "undefined reference to `GetString' " and other errors

Appengine: Custom Error Handlers using webapp2 - Python 2.7