SHARE

Roll Your Own Custom Bookmarklets In Firefox, part 2

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 […]

Written By

Akkana Peck

Oct 27, 2008

Datamation content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More

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.