Roll Your Own Custom Bookmarklets In Firefox, part 2

Monday Oct 27th 2008 by Akkana Peck
Share:

Smart Firefox Tricks, part 2: Javascript bookmarklets have been around since the early days of Javascript. Akkana Peck shows us how to harness this power to turbocharge our Web-surfing.

In the last installment, I talked about the simplest form of "bookmarklets": bookmarks defined by Keywords and user-defined strings.

But you'll more often see the term "bookmarklets" used for a different sort of bookmark: those that execute Javascript code.

Javascript bookmarklets have been around since the early days of Javascript. They're possible because Firefox and most other modern browsers (except Konqueror) offer the special protocol "javascript:" to let you execute bits of javascript code directly.

For instance, try typing this into Firefox's URL bar:

javascript:alert('Hello, world!')

You've just executed some javascript code (Figure 1), of the sort you might include in a web page. But since it's packaged as a URL, you can bookmark it. That's a Javascript bookmarklet.

But what makes the javascript: protocol really useful is that the code is executed as if it was part of the current page. That means that you can access the information on the page, or even make changes to it. For example, try typing or pasting this URL:

javascript:void(document.body.style.color=prompt('Color?','green'))

The browser keeps the current page loaded. But in addition, a dialog pops up asking you for a color. Choose a color and click OK -- and the text of the current page changes (Figure 2). To turn it black again, use this link or click Reload.

What, you say you don't particularly need a bookmarklet that turns text green? Okay, me neither. But you can use javascript: for all sorts of really useful things.

Ever wonder who links to your pages? There's a Google query term for finding "back refs" (it's link:), but who remembers all the special Google query terms? Instead, just bookmark this handy Javascript expression:

javascript:location='http://www.google.com/search?q=link:'+escape(location)

Or right-click on this link and choose "Copy Link Location": Find back-refs. Now you'll be able to invoke the bookmarklet on any page and it will tell you links to that page.

Here's a short but sweet one. Did you know that web servers give an idea of when a page was last modified? You can get that information with a last-modified bookmarklet: javascript:alert(document.lastModified)

Some of the useful Javascript bookmarklets get a bit long, and they're not very readable. So for the rest of the bookmarklets in this article I'll simply provide the link. To try one, or paste it as a bookmark, right-click on the link and choose "Copy Link Location".

Remember the Wikipedia search bookmarklet in the last article? You can make it even more powerful by adding some Javascript to search for words selected in the current page: Look up selected words in Wikipedia.

Here's a bookmarklet that translates a page from another language using Babelfish, provided you know the appropriate two-letter code: Babelfish translate.

A frequently requested feature for Firefox is a button to go up one level from the current page. But you don't need a button if you just make a bookmarklet: Up one level.

You can get bookmarklets for all sorts of specialized functions. There's an especially rich choice for web developers: bookmarklets to outline block elements, show or change a page's CSS, or validate HTML. See the links at the end of this article for some good bookmarklet sources.

If you know some Javascript, you can write your own bookmarklets. Just use the same techniques you'd use for Javascript on a page, with a couple of exceptions. First, you have to cram it all into one long "URL encoded" line, without line breaks, spaces or other characters that aren't allowed in a URL.

Return values are also important. Javascript that doesn't return anything, or returns an undefined type, will keep the current page loaded. If you return some other type, such as a string, the browser will load that string as a new HTML page. That's one way of loading a new page; another way is to set document.location to a new URL, like the Wikipedia and Babelfish bookmarklets in this article. Most bookmarklet authors sandwich their Javascript inside an "anonymous function", like this:

javascript:(function() { /* Bookmarklet code here */ })();

This also gives you the advantage of variable scoping: any variables you declare with var inside this function won't conflict with variables of the same name defined on the current page. Some people prefer to use if(1){ ... } around their bookmarklet code. Your choice.

You can do a lot with bookmarklets, whether you're writing them yourself or just using existing ones. Here are a few to start with:

Akkana Peck is a freelance programmer whose credits include a tour as a Mozilla developer. She's also the author of Beginning GIMP: From Novice to Professional.

This article was first published on LinuxPlanet.com.

Share:
Home
Mobile Site | Full Site
Copyright 2017 © QuinStreet Inc. All Rights Reserved