There are a wealth of Firefox extensions available out there, and everybody seems to be writing one, so I thought I would do a little digging to find out how it is done. mybloggingplanet.com

First off, the technology used to write Firefox extensions are XUL and Javascript. XUL is an XML based markup language developed by Mozilla, and is used heavily in developing Firefox extensions.

Extensions are pretty easy to package. The actual installer is an XPI file (apparently pronounced “zippy”) which is a renamed zip file, so to package an extension, you just zip it all up and rename. Nothing could be simpler.

Now on to creating the extension. I created a very simple extension that adds text to the status bar on the bottom right saying “Click me…”, which displays a greeting based on the time of day when you click on it.

First up, every extension needs to have an install.rdf file in the root of the package. This file is an XML file that describes the extension.

<?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>{FFFFED8D-205F-490f-83AB-730965C28320}</em:id>
		<em:version>0.1</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.6</em:maxVersion>
			</Description>
		</em:targetApplication>

		<em:name>greeting</em:name>
		<em:description>Displays a greeting in the status bar.</em:description>
		<em:creator>Serge Meunier</em:creator>
		<em:homepageURL>/blog</em:homepageURL>
	</Description>

</RDF>

The id is a GUID which needs to be unique. If you would like to generate one, Microsoft has a GUID Generator available for download.

The version is the version of your application, and type is the type of package, where 2 means it is an extension.

The target application contains the id of Firefox, and should be left unchanged. The minVersion and maxVersion should be set to the versions that your application supports. maxVersion should not be set higher than the current version, but it doesn’t hurt to set it a little higher if you are sure it will work in future versions.

The other important file in the root folder is the chrome manifest file, chrome.manifest. All it contains is two lines specifying the path to the content, and the overlay file (which I will get to shortly)

content greeting chrome/content/
overlay chrome://browser/content/browser.xul chrome://greeting/content/greetingOverlay.xul

We now create a subfolder chrome/content where we will store the overlay and javascript files.

The XUL file is what tells the browser what to display. In greetingOverlay.xul, we access the status bar and add another panel which we will use.

<?xml version="1.0"?>

<overlay id="greetingOverlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
 <statusbar id="status-bar">
 <statusbarpanel id="greetingpanel" label="Click me..." onclick="document.getElementById('greetingpanel').label = greet();"/>
 </statusbar>
 <script src="greeting.js" />

</overlay>

And finally, in greeting.js we put in the Javascript which our XUL file calls.


function greet() {
	var d = new Date();
	var hour = d.getHours();
	var greeting = '';
	
	if (hour < 6) {
		greeting = "What you doing up at this time!";
	} else if (hour < 12) {
		greeting = "Good morning";
	} else if (hour < 18) {
		greeting = "Good afternoon";
	} else if (hour < 23) {
		greeting = "Good evening";
	} else if (hour < 24) {
		greeting = "Go to bed!";
	}
	return greeting;
};

Once we have done this, we now zip up the folder and rename it to greeting.xpi, and can then open it with Firefox. If all went well, Firefox should install the extension like any other exension.

Just as a sidenote, for Firefox 3.0 and above, you need to configure the browser to allow extensions that do not have secure updates for this extension to install correctly.

Share