Make Your Own Bookmarklets With jQuery

Bookmarklets are small JavaScript-powered applications in link form. Often “one-click” tools and functions, they’re typically used to extend the functionality of the browser and to interact with Web services. They can do things like post to your WordPress or Tumblr blog, submit any selected text to Google Search, or modify a current page’s CSS… and many other things!
Because they run on JavaScript (a client-side programming language), bookmarklets (sometimes called “favelets”) are supported by all major browsers on all platforms, without any additional plug-ins or software needed. In most instances, the user can just drag the bookmarklet link to their toolbar, and that’s it!

In this article, we’ll go through how to make your own bookmarklets, using the jQuery JavaScript framework.

Getting Started

You can make a faux URI with JavaScript by prefacing the code with javascript:, like so:

1	<a href="javascript: alert('Arbitrary JS code!');">Alert!a>

Notice that when we put it in the href attribute, we replace what would normally be double quotes (") with single quotes ('), so that the href attribute’s value and JavaScript function don’t get cut off midway. This is not the only way to circumvent the problem, but it’ll do for now.
We can take this concept as far as we want, adding multiple lines of JavaScript inside these quotation marks, with each line separated by a semicolon (;), sans line break. If your bookmarklet won’t need to be updated later, this method of “all inclusiveness” is probably fine. For this tutorial, we’ll externalize the JavaScript code and store it in a .js file, which we’ll host somewhere else.
Here is what a link to an externalized bookmarklet looks like:

1	<a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://foo.bar/baz.js';})();">Externalized Bookmarkleta>

This link looks for the document’s body and appends a