CK's Developer Blog

In this post we will create a Firefox plugin from scratch in 10 minutes. Navigate to any folder of your choice and we will call this as ROOT folder for the plugin.

• Create an empty folder called chrome under ROOT folder
• Create two empty files called install.rdf and chrome.manifest under ROOT folder.

Now let us decide what we want to do with the plugin. The plugin will contain links to various social networking sites like Twitter, Orkut (we limit to 2 as it is just an example).

• Now under chrome folder  create two empty folders called content and skin. The below screen shot shows the folder structure so far.

Explanation for the folders/files created so far:

skin will contain the images and css files used in the plugin (if any). content folder will contain Javascript , XUL files involved in the plugin. chrome.manifest is self explanative and provides the information about the skin, overlay, content location to Firefox. install.rdf contains the information like plugin creator, minimum and maximum compatible versions of Firefox for the plugin.

Let us create a file called social.xul under content folder with the below lines of code.

<?xml version="1.0"?>
<overlay id="social_karthikeyanc_com"
 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml" orient="vertical">

 <script type="application/x-javascript"
 src="chrome://social/content/social.js" />
<toolbox id="navigator-toolbox">
<toolbar id="Social-Toolbar" toolbarname="Social Toolbar" accesskey="H"
 context="toolbar-context-menu"
 hidden="false" persist="hidden">
<toolbarbutton id="Orkut-Button" tooltiptext="Orkut Home"
 label="Go To Orkut" oncommand="loadURL('http://www.orkut.com')"/>
<toolbarseparator />
<toolbarbutton id="Twitter-Button" tooltiptext="Twitter Home"
 label="Go To Twitter" oncommand="loadURL('http://www.twitter.com')"/>

</toolbar>
</toolbox>
</overlay>

Now create a file called social.js under content folder with the below code.

function loadURL(url)
{
 // Set the browser window's location to the incoming URL
 window._content.document.location = url;
 // Make sure that we get the focus
 window.content.focus();
}

Please open chrome.manifest empty file with a text editor and paste the lines below.

content social jar:chrome/social.jar!/content/
overlay chrome://browser/content/browser.xul chrome://social/content/social.xul
skin social classic/1.0 jar:chrome/social.jar!/skin/

Open install.rdf and paste the lines below.

<?xml version="1.0"?>
<RDF:RDF xmlns:em="http://www.mozilla.org/2004/em-rdf#"
 xmlns:NC="http://home.netscape.com/NC-rdf#"
 xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#">

 <Description about="urn:mozilla:install-manifest">
 <em:id>contact@yourwebsitename.com</em:id>
 <em:version>1.0</em:version>
 <em:type>2</em:type>

 <!-- Target Application this extension can install into,
 with minimum and maximum supported versions. -->
 <em:targetApplication>
 <Description>
 <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
 <em:minVersion>2.0</em:minVersion>
 <em:maxVersion>3.5.*</em:maxVersion>
 </Description>
 </em:targetApplication>

 <!-- Front End MetaData -->
 <em:name>www.Karthikeyanc.com</em:name>
 <em:description>Karthikeyan C's Developer Blog</em:description>
 <em:creator>Karthikeyan Chockalingam</em:creator>
 <em:homepageURL>http://www.karthikeyanc.com/</em:homepageURL>
 </Description>
</RDF>

Now navigate to chrome folder and execute the below command. (I am using Ubuntu. Same can be achieved in other OS like windows using a zip utility like 7-zip)

zip -r social.jar content/* skin/*

Now navigate one step up to ROOT folder and execute the below command to create your Firefox plugin social.xpi. You can install the plugin by choosing File –Open File in Firefox menu.

zip social.xpi install.rdf chrome.manifest chrome/social.jar