Creating Firefox Extension

Learn by example

Everyone has a good idea at one time or another to implement a new feature in a web browser. Well, with the goodness that is Mozilla Firefox, now you can do just that. You need to have a vague understanding of XUL and Javascript, but you certainly don’t need to be a master of either.
The author explains how the extensions break down in a nutshell, using BugMeNot as an example

Little tweaks with javascript : Bookmarklets.

A bookmarklet is a snippet of Javascript that can be bookmarked (or saved as a favorite) inside your web browser. Bookmarklets can enhance web pages, add special functionality using javascript which is supported by most browsers today and make your browsing experience a lot more efficient by offering one-click access. I will first start with basics.
Consider a simple javascript :

javascript:alert(’You clicked on the page’);

When you type this in browsers location bar then it will show a message box with “you clicked on the page” message. Now change this slightly :

javascript:function ab(){alert(”hello”) ;};void(setInterval(ab,1));

Now this will repeatedly pop-up the message box in every 1-sec interval. Though this is of no use i’m just telling this to explain basics of javascript.

Now filling form with javascript :

javascript:function ab() {document.forms[0].login_username.value=”someText” ; } ab() ;

Now this javascript will fill the value “someText” in field login_username of form in html page.
And lets try to take some user-input :

javascript:function ab() {q=document.getSelection(); if(!q) {void(q=prompt(’Text :’,”))} else alert(q)} ab();

Now this javascript will first check if some text is selected on page. If no text is selected it will prompt user for text else will show an message box with selected text. Now we can put this script to some good use : like

javascript:function ab(){q=document.getSelection(); if(!q){void(q=prompt(’Search Text at My Blog: ‘,”))} location.href=”http://www.technorati.com/search/ “+q+” linux?from=http://burad.blogspot.com “; }; ab();

Now this will search the selected text on my blog or if text is not selected than prompt user for text.

An equivalent script for searching on wikipedia is :

javascript:(function(){q=document.getSelection(); if(!q){void(q=prompt(’Wikipedia keywords:’,”))}; if(q) location.href= ‘http://en.wikipedia.org/w/wiki.phtml?search=’+escape(q)})()

Now you can bookmark this script in toolbar so every tim you click on button in toolbar it will execute javascript. For example Drag this to your firefox bookmark toolbar :

Search Wikipedia

Some more bookmarklets :
Scale Images

Sort Table

Transpose Table

Show Password

So in a way they are different from bookmarks and provides extra functionality through power of javascript. Here are some more javascript bookmarklet
You can view source for each bookmarklet by viewing page source .
You can find more bookmarklets at : http://www.squarefree.com/bookmarklets/

See this helpful screencast on bookmarklets.

Some More Example at Wisdombay

Updated : For changing documenet backgrounds :
Change to Red
Change to green
Change to blue
This may not work with pages using css