A Firefox addon to define

Greetings! It feels great to write my first tech-post on the first day of the year! Have you ever thought of developing an addon for a browser as a geeky task? Well, thats how I was thinking! But, thanks to an inspiring chat with this guy, here I am with an addon for my dear Firefox 🙂

Many of us (including me) frequently use “define:” type of search at Google, to lookup definitions of words, that we come across while browsing. Each time then, I had to type “define:” at Google search bar and copy-paste the word (to be defined), which was quite tedious. Yes! I have found what my addon should do. Its objective would be to define the selected text without typing “define:” keyword. But.. What if there is a word outside the browser (may be a pdf, doc) that needs to be defined? So, the addon should also be able to define those words which aren’t present in webpages, again without typing the “define:” keyword.

Although a simple JavaSript code might do the above, I found this an interesting task for my first addon. If there is Google, can Microsoft be behind? No! So, the addon would search Bing too (though not all versions of Bing support “define:” type of searches). As a perk, normal search is also provided.

If you are reading this blog using Firefox, then here is my New Year’s gift for you 8)
To install the DefineIT addon, go here. Source code is available at the addon homepage.

Now, lets delve into the technical stuff. Basically, XPCOM, XUL, JavaScript, CSS are the technologies which govern Firefox and its addons. For a simple addon like this, there was no need to deal with XPCOM. XUL is Xml based User interface Language, used for designing the UI part.  JavaScript, as you expected, implements the desired funtionality of an addon. CSS takes care of decorating the addon.

Here is a code to greet you, using XUL and JavaScript 🙂

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="chrome://global/skin/"?>
<window xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" title="Sample to demonstrate XUL and JavaScript">
 <button label="Click me!" onclick="wish()"/>
 <script>
 function wish()
 {
window.alert( "Wish you a happy new year!!" );
 }
 </script>
</window>

Just copy the code above and save it as “greetings.xul” or any name with “.xul” extension. Now drag-drop the file into Firefox (in a new tab). You can see a button, which on clicking greets you.

One look at the code above, you will realise that XUL is nothing but a mix of DHTML and XML elements. If you have basic knowledge of DHTML, XML, JavaScript, then you are just few hours away from your own addon! Mozilla has a nice documentation here.

Overlaying is the most interesting feature of XUL, whereby you lay a XUL file over another XUL file. The Firefox browser is itself a XUL file. So, it makes sense that we have to lay the XUL files of our addon over the XUL file of Firefox, to make our addon work.

Now, lets look behind the screens of addons. Users of Firefox would be familiar with the XPI file format of its addons. XPI is an archive format like ZIP. You can rename any .xpi file as .zip and view its contents. Essentially every XPI file, when extracted, contains the following files:

• install.rdf
• chrome.manifest
• chrome folder

install.rdf has the basic information required to install any addon, right from the version of addon to checking compatibility with different versions of Firefox.

chrome.manifest is used to register the chrome packages with Firefox.

chrome folder contains 3 packages, namely

1. content — contains all the XUL and JavaScript files.
2. locale — contains the textual part of addon, which needs to be translated into various languages, since Firefox speaks many languages!
3. skin — contains the CSS files.

The Addon Builder helps you create the files and folders mentioned above. It provides a template sort of thing, so that you need not code from the scratch, which means you can spend more time on the functionality of your addon.

And, in case you are wondering who will translate your addon into other languages, BabelZilla is  the answer. You submit your addon in your own language to them. Translators all over the world translate your addon into other languages and give the localized addon back to you! (By the way, I haven’t done localization for DefineIT. So, you can see only the en-US folder inside locale package.)

In case of DefineIT, all I had to do was:

• Extract the selected text (call it “query”) in the current webpage or use the “query” entered in the textbox.
• Open a new tab with the URL “http://www.google.com/search?q=define:query” and focus that tab.

Normal search is same, minus the “define:” keyword in the URL. Similar thing for using Bing.

Simple! Isn’t it? Now that I have spoken enough, its time to hear from you! Comments, suggestions, bugs, feature requests, etc.. Pour them all below this post 🙂
And, wish you all a happy, healthy and prosperous new year!