Creating Mozilla toolbar

Last month I implemented one custom mozilla toolbar for our application using XUL (XML User Interface Language). Its an amazing framework. Lets create a sample toolbar to detect and collect images from any website.

Setup - Workspace directory structure

toolbar (TOP Level Directory)
--chrome
----content
----skin
--install.rdf (empty file)
--chrome.manifest (empty file)

Mozilla browser has following sections

1. toolbar
2. menubar
3. window content
4. status bar

(toolbar+menubar+status bar) = part of chrome

mozilla browser uses XUL for the UI. The default xul is browser.xul. You can add extra functionality by providing custom xul file. So, almost every mozilla extension has one xul file. This file is used to add toolbar button, right click context menu etc.


Step 1
Add one xul file to override browser default UI. This will add one "Right click context menu" => Toolbar::Collect it










Step 2
When you click on the context menu => javascript collect function is called. We have added one overlay.js file. This file is also in Content directory.

window.addEventListener("load", initToolbar, true);
var aConsoleService = Components.classes["@mozilla.org/consoleservice;1"].
getService(Components.interfaces.nsIConsoleService);



function initToolbar() {
var menu = document.getElementById("contentAreaContextMenu");
menu.addEventListener("popupshowing", contextPopupShowing, false);
}

function contextPopupShowing() {
var menuitem = document.getElementById("zoomarena-menu");
if(menuitem)
menuitem.hidden = !gContextMenu.onImage;
}

function collect() {
aConsoleService.logStringMessage("Collect sample");
if ( gContextMenu.onImage) {
var img = gContextMenu.target;
if ( img ) {
var newTab = gBrowser.addTab(img.src);
gBrowser.selectedTab = newTab;
}
}
}

Here we have added one listener function "initToolbar" when the toolbar gets loaded. In initToolbar we have added one more listener function (when context menu is about to become visible => this function will be called). Using this function, we check if the context menu is on one image => show that "Toolbar::collect it" otherwise don't show it.

We also define the collect() function used in overlay.xul. This will get the img src and open it in new browser tab.

Step 3
You are almost done. Define a chrome.menifest file (in toolbar folder) to register the new overlay. You can use this file to register custom skin (icons used in the toolbar and css file). Here chrome/skin folder is empty.We will just register the new overlay.

content toolbar jar:chrome/toolbar.jar!/content/
overlay chrome://browser/content/browser.xul chrome://toolbar/content/overlay.xul

Step 4
Define install.rdf file. This file is self explanatory.





















Step 5
Packaging. Here is the script to package the toobar and distribute as a xpi file. Here is the file (xp.bat)

cd chrome
rm toolbar.jar
zip -r toolbar.jar content/
cd ..
rm toolbar.xpi
zip -r toolbar.xpi chrome.manifest install.rdf chrome/toolbar.jar


Final directory / file structure

toolbar
--xp.bat
--chrome.menifest
--install.rdf
--chrome
----content
------overlay.js
------overlay.xul
----skin

Execute xp.bat. This will create toolbar.xpi in toolbar directory. Now you are ready to distribute the package.