Everybody has heard of web browser bookmarks (aka “favorites”), links to web pages stored within your browser for easy access to websites you want to visit again. But did you know that bookmarks are capable of storing more than just URLs? Modern web browsers allow you to store JavaScript (or “JS” hereafter; JavaScript is a simple scripting language that provides much of the power on the web behind everything from Gmail to the statistics software for our very own OSCPA website) within them too, and with a little creativity and programming experience, you can be well on your way to making your web browsing experience easier and more pleasant — and if you’re like me, taking some of the chore out of regular tasks, as well.

Let’s get started

First things first — if we’re going to write JavaScript bookmarklets, it helps to know a little bit of JS, or at least have prior programming experience of some kind and be good at learning on your feet. If you don’t have this proficiency already, there are plenty of sites that can get you up and running soon. You’ll also need a modern web browser (I prefer Firefox) and a decent text editor — I recommend the excellent BBEdit (or its free cousin, TextWrangler) for Mac, Visual Studio (or its free variant, Visual Studio Express, or Notepad if you absolutely must) for Windows, and either vi[m] or Emacs for Linux — I won’t take sides publicly. For the purposes of demonstration, I will be writing bookmarklets using Visual Studio and running them in Firefox, but the process will look almost identical no matter what combination of the above software you use.

Everybody’s first bookmarklet

The canonical first program is “hello world,” and there’s no reason to break tradition here. Open your editor of choice and type:
javascript:{
alert("hello world");
}
Much as the http:// at the beginning of a regular URL signals to the web browser that we are accessing a web page, the javascript: tells the web browser that this is going to be a piece of JavaScript code, not a regular bookmark. Copy the block of code, paste it into a new window, and remove all the line breaks. (This is the technique we will be using: writing in an easy-to-read style, and then when we are ready to try it, making everything one line, which is required.) If you’ve done this right you should have a piece of code like this:
javascript:{alert("hello world");}
At this point we’re ready to add the bookmarklet to our browser. Open a new window and then add a new bookmark to your browser, then after it’s created, paste in your single line of JS in place of the page’s URL and give the bookmarklet a descriptive name like “hello.” After loading the bookmark, you should see an alert pop up with the text, “hello world” inside:

A little more serious

Now that we’ve seen how to make a bookmarklet, let’s try a couple of real world examples of how bookmarklets can make your life easier — since admittedly, “hello world” probably isn’t useful to you. For all these examples, just follow the template above: write your code, make it one line, and save it in a new bookmark in your web browser. (With any luck, you won’t have any debugging to do.)

Search the news

I’m a fan of Google News, but it can be annoying to have to load the home page just to search for something. Let’s tackle this with bookmarklets. To get an idea of the kind of URL we are going to generate by doing a search, we try a test search, and get something like this: http://news.google.com/news?pz=1&ned=us&hl=en&q=test+search. After some experimentation, we come up with this JavaScript solution:
javascript:{
var term = escape(prompt("Search Google News:"));
window.location.assign("http://news.google.com/news?pz=1&ned=us&hl=en&q="+term);
}
The first line (of real code) prompts the user for some search terms, URL-encodes the characters (e.g., “?” becomes “%3F,” etc.), and assigns this result to a new variable named term. The second line appends this search term to a generic-looking Google News search URL, and then directs the current window to go to this search URL. Just what we wanted: searching the news without the middleman.

High-contrast web pages

Sometimes webpages can be downright hard to read. While garish, it’s generally accepted that white text on a black background is the best possible scenario for readability, and bright red and green both stand out well on black as well. The following JavaScript, adopted from a bookmarklet found at Lifehacker:
javascript:(function(){
var newSS, styles = '* { background: #000 !important; color: #FFF !important; font-size: 12pt !important; font-weight: bold !important } :link, :link * { color: #F00 !important } :visited, :visited * { color: #0F0 !important }';
if (document.createStyleSheet) {
document.createStyleSheet("javascript:'" + styles + "'");
} else {
newSS = document.createElement('link');
newSS.rel = 'stylesheet';
newSS.href = 'data:text/css,' + escape(styles);
document.getElementsByTagName("head")[0].appendChild(newSS);
}
})();

will do the job, making any webpage high contrast and easy to read.

These are just two examples of what can be done with JS and some thought. With a little practice and foresight, you, too, can start writing bookmarklets to change the way you work online. (If you like bookmarklets and use Firefox, be sure also to check out the powerful Greasemonkey extension.)