What can they do
- change the look and feel of a page by doing extra processing. eg:- beautify Gmail
- open prompts for searching a particular website. eg:- search php.net
- share/minify url's eg:- tinyurl, share on twitter
- and a whole lot more...
How they work
How do I create a bookmarklet
So, let's create our first bookmarklet
Let us create our first bookmarklet which converts the current web page url into a tinyurl (eg:- .
tinyurl is a webservice which lets you minify url's i.e, convert a very long url such as http://betterexplained.com/articles/how-to-make-a-bookmarklet-for-your-web-application/ into something very short as http://tinyurl.com/5cpxuo so that you can share it easily. It's especially very handy on twitter given the 140 character limit.
So, what we need to do now is:-
- Get the current webpage url
This is achieved by referring to location.href.
- Pass this url to tinyurl so that it minifies it
tinyurl api service uses the following format where in, it accepts a url to minify,
Putting it all together,
- encodeURIComponent is used to encode special characters
- window.open will open the url passed to it in a new tab/window based on user's browser settings.
How do I add a bookmarklet
The steps to add a bookmarklet is exactly similar to that of adding a bookmark or favorite. Try dragging the below bookmark onto your browser real estate,
Now that you have installed the bookmarklet, navigate to your favorite lengthy url page (I bet you find a ton of such pages) and click the bookmarklet and see the magic happen :D.
Custom search bookmarklet
This is where bookmarklets get really handy. I'm a php coder, most of the times I would need to look up a specific function format in day-to-day coding. Assume that you may know the function name or the topic name, for example, let us assume that you have a little doubt regarding the date and time functions in php. Ofcourse, the best place to search is php.net (the google of php) but there is one problem, php.net is not a search engine and I don't want to use google for it, as I will be doing a php function lookup a lot of times (trust me, i really do).
The solution for the above usecase is to design a handy bookmarklet which will accept a keyword as input and pass it on directly to php.net and voila, you will have the search results or the direct function description page launched with minimal effort.
Things to Do
- Render a prompt box for the user to enter a keyword if the user has not already selected something on the page to search for.
document.getSelection retrieves selected text on webpage
prompt(promptText, defaultTextForPrompt) - function template of prompt
- Pass the keyword to php.net search form and open it in a new window
- Encompass all of the above in a self executing function
self executing / anonymous / self invoking functions are very powerful and will require more detail coverage. Just think of them as a way to put in a little piece of code that executes within its own scope.
- Putting it all together,
Must have powerful bookmarklets
Now that you know how bookmarklets work, how to create them and install them, I will assume that you will go and explore more of it. To get you started, let me list out some of the most powerful bookmarklets I use and have come across the web. Just hover on the below links to de-mystify (or reveal) the bookmarklet, copy paste into your favorite editor (vim or emacs or textpad) and try to unravel the mystery.
- Readability - the greatest bookmarklet ever written in my opinion. transforms any webpage into the most beautiful reading experience by removing all the ugly stuff. It is also available as a firefox addon.
- Firebug Lite - firebug for non-firefox browsers.
- Share on Twitter - share any interesting link on twitter (includes url shortener)
- Google Translate - translate any webpage to english
- Wikipedia Lookup - lookup any selection of text on wikipedia
- Quix - manage all your bookmarklets at one shot, very very powerful.
Related articles on web:
Marklets - search engine for bookmarklets
Subsimple Bookmarklets - bookmarklets explained
Very useful bookmarklets - categorized utility bookmarklets