Firefox Extension: Firefox Statusbar Tutorial - How to add stuff to the statusbar in Firefox/Mozilla
In addition to the Mozilla XUL read write local files tutorial -
where we created a simple XUL page with a textfield, which text can be saved to your local harddisk.
Furthermore there is the Firefox Toolbar Tutorial.
Now we create a simple statusbar addon for the Firefox browser. This statusbar extension is installed as regular extension via
a XPI installer file.
This extension will show this in your Firefox statusbar:
The weather data (temperature; date/time and weather condition is shown as tool-tip) is fetched via
AJAX from wunderground.com from the RSS feed for Rome/Italy (change the RSS Url for your own city).
The RSS XML data is parsed and written to the statusbar field with javascript every 15 minutes.
The creation of such a toolbar is pretty straightforward:
First we need to create the directory-structure:
[project-directory]
[project-directory]/chrome
[project-directory]/chrome/content
[project-directory]/chrome/skin
(the directory skin is not really used here - i.e. stylesheets (CSS) and graphics/icons would be
stored in this directory)
If you have created this directory-structure, copy the following files in their given locations:
[project-directory]/install.rdf
<?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>{aa84ce40-4253-11da-8cd6-0800200c9a66}</em:id>
<em:name>CaptainStatusBar</em:name>
<em:version>0.1</em:version>
<em:description>Statusbar-Addon to display various stuff</em:description>
<em:file>
<Description about="urn:mozilla:extension:file:statusbar.jar">
<em:package>content/</em:package>
<em:skin>skin/</em:skin>
</Description>
</em:file>
<em:targetApplication>
<Description>
<em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
<em:minVersion>1.0</em:minVersion>
<em:maxVersion>1.5</em:maxVersion>
</Description>
</em:targetApplication>
</Description>
</RDF>
Notes: minVersion and maxVersion is the version information. It tells the browser,
which versions of the browser this extension supports. The ID (starting with aa84ce40...)
is a unique ID - use an online UUID generator (google for it) to get an own ID for your
own projects).
[project-directory]/chrome/content/contents.rdf
<?xml version="1.0"?>
<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
<RDF:Description about="urn:mozilla:package:statusbar"
chrome:extension="true" chrome:name="statusbar"/>
<RDF:Seq RDF:about="urn:mozilla:package:root">
<RDF:li RDF:resource="urn:mozilla:package:statusbar"/>
</RDF:Seq>
<RDF:Seq RDF:about="urn:mozilla:overlays">
<RDF:li RDF:resource="chrome://browser/content/browser.xul"/>
<RDF:li RDF:resource="chrome://navigator/content/navigator.xul"/>
</RDF:Seq>
<RDF:Seq RDF:about="chrome://browser/content/browser.xul">
<RDF:li>chrome://statusbar/content/statusbar.xul</RDF:li>
</RDF:Seq>
<RDF:Seq about="chrome://navigator/content/navigator.xul">
<RDF:li>chrome://statusbar/content/statusbar.xul</RDF:li>
</RDF:Seq>
</RDF:RDF>
[project-directory]/chrome/content/statusbar.xul
<?xml version="1.0"?>
<overlay id="sample"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<statusbar id="status-bar">
<statusbarpanel id="mypanel" label="Loading..."/>
</statusbar>
<script src="captain.js"/>
</overlay>
Notes: This is pretty straightforward XUL code. See xulplanet.com and google for more details.
[project-directory]/chrome/content/captain.js
function makeRequest(url, parameters) {
http_request = false;
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');
}
if (!http_request) {
alert('Cannot create XMLHTTP instance');
return false;
}
http_request.onreadystatechange = alertContents;
http_request.open('GET', url + parameters, true);
http_request.send(null);
}
function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
var xmlobject = http_request.responseXML;
var root = xmlobject.getElementsByTagName('rss')[0];
var channels = root.getElementsByTagName("channel");
var items = channels[0].getElementsByTagName("item");
var descriptions = items[0].getElementsByTagName("description");
var date = items[0].getElementsByTagName("pubDate");
var desc = descriptions[0].firstChild.nodeValue;
var descarray = desc.split("|");
var temp = descarray[0];
var temparray = temp.split(":");
var temperature = temparray[1];
var update = date[0].firstChild.nodeValue;
var tooltipstring = update + ": " + descarray[3];
document.getElementById('mypanel').label = "Roma: " + temperature;
document.getElementById('mypanel').tooltipText = tooltipstring;
} else {
alert('There was a problem with the request.');
}
}
}
function updateweather() {
makeRequest('http://www.wunderground.com/auto/rss_full/global/stations/16239.xml', '');
self.setTimeout('updateweather()', 900000);
}
window.addEventListener("load", updateweather, false);
Notes: This is the Javascript file for fetching the XML RSS data and writing it to the
statusbar element.
This example uses a RSS feed from wunderground.com, it's use is for educational purposes only.
[project-directory]/chrome/skin/contents.rdf
<?xml version="1.0"?>
<RDF:RDF xmlns:RDF="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:chrome="http://www.mozilla.org/rdf/chrome#">
<RDF:Seq about="urn:mozilla:skin:root">
<RDF:li resource="urn:mozilla:skin:classic/1.0" />
</RDF:Seq>
<RDF:Description about="urn:mozilla:skin:classic/1.0">
<chrome:packages>
<RDF:Seq about="urn:mozilla:skin:classic/1.0:packages">
<RDF:li resource="urn:mozilla:skin:classic/1.0:statusbar" />
</RDF:Seq>
</chrome:packages>
</RDF:Description>
</RDF:RDF>
And last but not least, we need to do some zipping:
[project-directory]/make.sh
#!/bin/sh
cd chrome
zip -r statusbar.jar content/ skin/
cd ..
zip statusbar.xpi install.rdf chrome/statusbar.jar
As you see, the jar file and the xpi file are just regular zip files.
If you are on Windows, you need to figure out yourself how to zip the structure via
WinZIP or some command line zip tool.
Now we have the ready-to-install XPI file. Open the Firefox browser, and simply load
the XPI file (Menu: File -> Open File). The browser will tell you that the XPI is
not signed, but that doesn't matter in our case (signing the XPI will be part of a
future tutorial). Restart Firefox and the toolbar should appear.
TROUBLESHOOTING
HELP: FIREFOX DOESN'T LOAD (Segfaults):
Start Firefox in save-mode:
# firefox -safe-mode
In this mode no extension is loaded and the faulty extension can be removed with:
Menu: Tools -> Extensions
There is some window at startup saying the extension can't be installed:
Click on "details" and you should see something like this:
Chrome Registration failed for Extension '{a1577a80-3943-4362-a66d-858f01e2196c}' when calling
nsIXULChromeRegistry::installSkin with this chrome path:
jar:file:///[some-path]/extensions/%7Ba1577a80-3943-4362-a66d-858f01e2196c%7D/chrome/captain.jar!/skin/
(profile extension = true). Perhaps this path does not exist within the chrome JAR file, or the
contents.rdf file at that location is malformed?
Check if all files are in the right location and if all files are actually present.
Last-Modified: Sat, 04 Feb 2006 16:03:14 GMT
