udkology.com

In order to implement an idea that I had, I needed to create a FireFox toolbar. This post is a log about that journey, what I learnt, and what guides, tutorials & tips that I found useful.

Any application, web or native, can broadly be broken down into two major sections. The backend logic part and the front end GUI part.

In a web application for example, the front end is defined by HTML and CSS while the backed is composed of Javascript working with a server side scripting language.

The same case applies to FireFox toolbars/addon. In this case, the GUI front end is defined by using an XML format called XUL (spelled ‘zool’)  and CSS and the logic is implemented by using Javascript.

That’s really the concept behind it. Design using XUL and CSS implement logic using Javascript.

Other things that include the development process are installation file, jar files and proper packaging of the addon.These

have been included in the following tutorials and I think it redundant to re-write about them over here.

http://www.captain.at/howto-firefox-statusbar-tutorial.php – Excellent SINGLE page tutorial. A bit outdated though.
http://www.rietta.com/firefox/Tutorial/env.html – Another good tutorial that goes in depth about the development process.

For XUL, I found https://developer.mozilla.org/en/XUL_reference to be infinitely useful. It contains all the XUL elements,their properties and description. Do go through it after you first get a gist of XUL from the above tutorials.

Here are fewof the tips I would give to new users, miniscule things that should be kept in mind while developing an addon.

1> Here is the .bat (Windows) that I use for packaging the addons. Go through it and change a few variables-folder names inside it. You may also need the command line zip utility found at http://www.info-zip.org/

2> The browser element in XUL, HAS to be enclosed in a groupbox element. Further, the groupbox element may not contain other elements or may not have an id or a class.

<groupbox>
<browser type="content" src="http://google.com" id="my-browser" height="50" />
</groupbox>

3> In install.rdf, do not mess with ‘{ec8030f7-c20a-464f-9b0e-13a3a9e97384}’ . This tag uniquely identifies
Firefox and tells the browser that the addon is intended for FireFox.

4>

<statusbar id="status-bar">
<statusbarpanel id="mypanel" label="Browse" onclick="openBrowser();" />
</statusbar>


If you want to customize the original FireFox statusbar, keep the id ’status-bar’. This identifies the original FF statusbar. If you assign a differnt value to it, FF will create abother statusbar.

I guess that should do it. Will most probably add more tips as and when I learn about them.

• Leave a comment...