Thursday, March 23, 2006

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=" "+q+" linux?from= "; }; 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= ''+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 Burad's Blog
Or for wikipedia
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 :

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


shantanu said...

Thanks a lot for a very nice write-up on bookmarklets!

amaruq said...

I read over your blog, and found it inquisitive. You may find my blog interesting.

Pramod S Nair said...

Dear Ajith,

I found your blog through Google BlogSearch and found it very interesting. May be your readers could benefit from the Bookmarklet section on my site, which we keep updated on a daily basis. You can access it here