Creating a Drag and Drop Bookmarklet

Bookmarklets are small JavaScript snippets that are invoked when you click on a bookmark.

We don’t tend to see a lot of them on the web. They’re under utilized because browser makers haven’t fully embraced them. They work a bit like mini browser extensions. Browser support for extensions seems to be waining with most mobile browsers not supporting extensions at all.

Here’s how you create a bookmarklet and create a drag-and-drop link so that it’s easy to install.

Example Bookmarklet

Here’s a simple “hello world” JavaScript example. This prompts the user for their name and then says, “hello”. It’s not a terribly useful bit of code but it should serve as a simple example.

var name = prompt("What is your name?", "Your Name");

if (name != null) {
    alert("Hello " + name);
}

Now that we have a bit of JavaScript to run, we need to convert it to a bookmarklet. Converting it involves removing whitespace, URL encoding special characters, adding the javascript: scheme, and wrapping it in an anonymous function. If you search for “bookmarklet creator” on the web you’ll find lots of websites that do this for you. One that I like is Bookmarkleter.

javascript:void%20function(){var%20a=prompt(%22What%20is%20your%20name%3F%22,%22Your%20Name%22);null!=a%26%26alert(%22Hello%20%22+a)}();

Linking to the Bookmarklet

You can create a simple web page with a hyperlink then instruct the user to drag and drop that into their bookmarks. Here’s an example hyperlink for the bookmarklet we created above.

<a href="javascript:void%20function(){var%20a=prompt(%22What%20is%20your%20name%3F%22,%22Your%20Name%22);null!=a%26%26alert(%22Hello%20%22+a)}();">
My Bookmarklet
</a>

Once you have the link setup the user can simply drag that into their bookmarks to install it. That sounds simple enough, but is also why I said that browser vendors haven’t really embraced these. They’re a bit hard for users to install because the way you install them differs from browser to browser, from version to version, and even on the same version depending on if you have your bookmarks toolbar turned on or not.

Installing the Bookmarklet

To try it out, bookmark this Hello Bookmarklet link. You can probably drag it to your bookmarks or long press to bookmark it. If you’re not sure how, you might have to search the web for information on how to create a bookmark from a link in your particular browser.

Providing a Bookmarklet in Markdown

These days I write a lot of documentation in Markdown. There are two different ways you could put a bookmarklet into your Markdown document.

First, you can use the same HTML code, an anchor tag, to create a link in Markdown. Second, you can write a typical Markdown style link, with one gotcha. The gotcha is that you need to encode all of the parenthesis as well. Most of the markdown generators online don’t do this automatically. Left parenthesis is encoded as %28 and right parenthesis is encoded as %29. Here’s an example using our bookmarklet from above with those paranthesis encoded, which I did manually.

[Hello Bookmarklet](javascript:void%20function%28%29{var%20a=prompt%28%22What%20is%20your%20name%3F%22,%22Your%20Name%22%29;null!=a%26%26alert%28%22Hello%20%22+a%29}%28%29;)

There’s a third option for links in Markdown but you probably can’t use it. That option is to use extended markdown and place the javascript part at the bottom of the text as a reference. Although this works for the http: and https: scheme’s, it doesn’t work for javascript:. At least, not in any of the markdown converters that I use regularly.

Hosted Bookmarklets

Another thing you can do is create a bookmarklet that loads a hosted JavaScript file. There are some advantages to this approach. First, the bookmarklet becomes fairly small. Second, you can update the hosted JavaScript file and everyone gets the updates automatically. There are, of course, downsides too. For example, if you edit or remove the script it could cause breaking changes for users who have it bookmarked. Here’s an example snippet of code that would load a remote JavaScript file.