Most of us haven’t heard about the little-known but powerful bookmarklet. A bookmarklet is a browser automation tool that can increase your work efficiency and improve your web browsing experience.  It can do most of the things that add-ons/extensions do, but it doesn’t take up as much computing power since it only runs when you click on it, not in the background. Plus, it’s super easy to install and create one. In this post, we’ll explain what it is and how you can build your own.

What is a Bookmarklet?

A bookmarklet is a special type of bookmark that runs JavaScript code when you click it.

Not many people know that you can store and run JavaScript (JS) code this way, but it was a feature built into browsers starting with Netscape back in 1995 with the creation of the javascript Protocol, which specifies that a URL actually contains JS code.

To see how the javascript Protocol works, you can run a small JS script via your browser’s address bar. A normal website URL starts with a protocol like “http://” or “https://” but to run a script you begin your URL with “javascript:”, which is then followed by JS code. This protocol allows you to open links that do things like manipulate a webpage you’re viewing by changing colors, styling or interactions.

Try typing in the following in your browser address bar:

javascript:alert('hello, world')

What happened? You should’ve seen an alert pop-up with “hello, world”. (Quick note: This might not work in Firefox or Safari unless you enable JS in the browser address bar.) Exciting!

So, to add a bookmarklet to your browser, just create an HTML <a> link element using a URL that starts with “javascript:”, followed by URL-encoded JS, then drag it to your bookmark toolbar. This creates a bookmark with JS code — a bookmarklet!

Bookmarklet code needs to be relatively short because of browser limitations on the length of valid URLs — only 2000 characters are accepted in a URL. Luckily, there’s an easy way to reference a larger script file, which I’ll show you in a section below.

So, Why are Bookmarklets Useful?

Bookmarklets help to automate repetitive tasks while you’re viewing a webpage.

For example, if the text on a site was too small to read, a bookmarklet could increase the text’s size or change its font to be more readable.

If you’re a Pinterest user, you may already have some experience using bookmarklets. This Pin It bookmarklet allows you to pin a picture you find online to one of your Pinterest Boards.

Here’s a link to another one by Delicious. It allows you to bookmark a link, add tags, and descriptions to categorize your links.

There are sites that contain bookmarklets which let you to change the styling of your site, or look up words on Wikipedia/dictionary by clicking on a word.

Check out http://bookmarklets.com/ for ideas of what you can create.

Create Your Own Bookmarklets

Most people assume that you can only do very simple things in bookmarklets due to the 2000 character limitation and the lack of JS libraries. But it’s actually possible to build much more complex and interesting functionality if you can reference larger external scripts.

For an example of this behavior in action, you can check out this example JS code in our Bookmarklet Creation GitHub repo.

Take a look at our jQueryScriptLoader.js script. It starts by loading the jQuery library, which gives us access to all of jQuery’s powerful functionality, then loads another script of your choice once jQuery is set up. Here we’re loading the TableThis.js external script file.

The ability to load jQuery and larger external scripts makes the world of bookmarklet ideas endless!

So, now you’re probably eager to create your own bookmarklets. Here are the 4 easy steps to get started:

1. Visit the ShareProgress Bookmarklet Generator (a handy tool we created)
2. Give your bookmarklet a catchy name.
3. Enter in JavaScript code to run (either pasted in directly, or from an external JS script URL). If you want to reference an external script file longer than 2000 characters:
   1. You can adapt the jQueryScriptLoader.js file (748 characters) we provided in our GitHub repo. Change the scriptURL variable at the top to reference your external script file’s location.
   2. Copy and paste the new jQueryScriptLoader.js code into the Bookmarklet Generator’s code section.
4. Click “Generate”, and voila! You’ve created your bookmarklet.

Bookmarklets In Action: Easy Downloading of HTML Tables

For my first bookmarklet project, I created TableThis. TableThis is a way for a user to easily download data from a table on a webpage into a CSV file.

Try it out!  Just drag the following link to your bookmarks or favorites bar: TableThis

To use the bookmarklet, click on the TableThis link in your bookmarks bar, then move your mouse to the example table below. When you hover over it, it informs you that you can click on the table to download it. Click and see the results.

To be fully compatible, we added features to our bookmarklet to help with saving special UTF-16 characters in the proper format, and accounting for variable columns, inner tables, commas, and double quotes inside table cells.

You can also visit our HTML Table Test Page to try out the bookmarklet in various use cases.

Now It’s Your Turn!

Bookmarklets are pretty neat and powerful tools.  We’re excited to see what you can come up with. So give it a try with our easy Bookmarklet creator!

Fork our repo on GitHub. Start with creating your own script file and uploading your JS script file to a server. Next, edit the jQueryScriptLoader.js file as discussed above in the Create Your Own Bookmarklets section by changing the variable scriptURL to the location of your JS script file.

Finally, go to shareprogress.org/bookmarklet to generate the bookmarklet link and follow the 4 steps we outlined above.

If you come up with something cool, be sure to share it in the comments or by tweeting @ShareProgress.