Alex @ Net

This article is for people who spend hours working in browsers. After reading it you will get to know how to improve your productivity by using bookmarklets for creating shortcuts for some of your routine operations.

Let's calculate how many hours you work in the browser. The number can vary, some of us can work less than a few minutes per week, but some of us, especially me, live here and spend more time only in my code editor. Spending so much time on operations like searching information, communicating and managing my online items requires me to do a lot of routine operations. And hopefully, I can automatize them and show you how.

The method is universal and works in almost all modern browsers. I've tested it with IE, Mozilla FireFox, Opera and Safari.

Imagine that you want to search for something using google or another search engine, look for synonyms, check spelling or translate the word or phrase. The common process for this is to open another tab in your browser, select the site in bookmarks, type the query in text box and click submit button. And do this 200 times a day... Awful. You shoudn't click submit button, press the "Enter" key instead, it is faster!

Of course, I'm joking. Submitting forms with the "Enter" button is faster but not as faster as it can be. What can really make these operations 10 times faster is using bookmarklets. Huh?.. Yes, bookmarklets. Usually, it is a small fragment of JavaScript code that you can save in bookmarks and evaluate by selecting it in the list.

Well, what are the exact steps a regular user does to search for specific keywork with Google:

1. Notices a word to search for.
2. Highlights it.
3. Copies it.
4. Opens a new tab in browser.
5. Navigates to http://google.com/.
6. Pastes the word.
7. Click the search button.

I know, I know! YOU use keywords, have Google in bookmarks or (like me) have the Google toolbar installed. Yes, with custom buttons. Do not worry, this article is still going to be usefull. The custom buttons exist not for the all websites under the sun and it is impossible (correct me?) to group them using folders.

What I want to do is to show you how to make the following possible:

1. Select a word on the page and
2. Select an item in the bookmarks to search for the selected word

The magic is here:

I know ECMAScript, show me more about bookmarklets!

javascript:{
	// open new window in case when "Open result in a new browser window" is
	// checked. When it is not, the window.open() is replaced with
	// location.href = 'http://...';
	window.open(
		// Open new window with the following URL replaced with the 
		// content of string from address bar or with selected text
		'http://google.com/search?q={0}'
		.replace(/\{0\}/g, '%s' != '%\s' ? '%s' : 
			// Cross-browser stuff is used to get the selected text.
			// Why these folks couldn't speek to each other?...
			(window.getSelection ? window.getSelection().toString() :
				(document.selection ? document.selection.createRange().text :
					(document.getSelection ? document.getSelection() : '')
				)
			)
		)
	);
	// this prevents the current browser window from being overwritten
	undefined;
}

My favourite bookmarklets
click to fill the form or drag and drop them to your bookmarks

Even more examples (you can also drag the examples directly to you bookmarks):

Send us bookmarklet definition for your service to add on this page