Wednesday, October 22, 2008

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 myfirstextension@mysite.com
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

Step2:
Filling up the files!


open install.rdf and copy the following code

<?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>myfirstextension@mysite.com</em:id>
  <em:version>1.0.0</em:version>
  <em:type>2</em:type>

  <em:targetApplication>
   <Description>
    <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
    <em:minVersion>1.5</em:minVersion>
    <em:maxVersion>3.0.*</em:maxVersion>
   </Description>
  </em:targetApplication>

 <em:name>My Very First Extension</em:name>
 <em:description>My Very First Extension</em:description>
 <em:creator>Me</em:creator>
 <em:homepageURL>http://www.hipatic.co.cc/</em:homepageURL>
  </Description>      
</RDF>


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" 
   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 <statusbar id="status-bar">
          <statusbarpanel id="my-panel" label="Please visit www.hipatic.co.cc" tooltiptext="Visit www.hipatic.co.cc" onclick="window.open('http://www.hipatic.co.cc')"/>
 </statusbar>
</overlay>



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 myfirstextension@mysite.com 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!!

PS:
Modding your first extension:

In the file sample.xul
instead of
<statusbarpanel id="my-panel" label="Please visit www.hipatic.co.cc" tooltiptext="Visit www.hipatic.co.cc" onclick="window.open('http://www.hipatic.co.cc')"/>

you can write
<statusbarpanel id="my-panel" label="Please visit My Website" tooltiptext="Visit My Website" onclick="window.open('http://www.mysite.com')"/>

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

No comments:

Post a Comment