Simple and Reliable Productivity Boosts Through Bookmarklets

The term bookmarklet comes from a combination of “bookmark,” meaning a link that is easily stored and accessed on your browser, independant of the current page you are visiting and “applet,” which Wikipedia has succinctly defined as:

any small application that performs one specific task that runs within the scope of a dedicated widget engine or a larger program, often as a plug-in

Most commonly today, bookmarklets are just enclosed snippets of Javascript that add a (usually) particular functionality and are only a click away from being executed. Let’s take a brief look at why we might use them:

Pros: Lightweight, portable, single-purpose, and easily accessible

Cons: Potential security risks (careful when adding bookmarklets created by others)

How to Get Started

All that is required for a bookmarklet is an <a> tag with an href that is equal to some string prepended by


like this

<a href="javascript:alert('Hello, World!');"></a>

Create a bookmarklet in 30 seconds:

Try it out yourself by adding something like the following code block :

<a href="javascript:alert('Alert: You have successfully activated this alert!');">Try clicking me</a>

Alternatively, if you are using chrome, you could just hit cmd+d > Edit.. and insert the code enclosed in the href string into the URL: input field and save.

My attempt

Here is my first attempt at a bookmarklet that calculates if you have enough y items for x group of people:

Wrapping your code

After a certain length and when it is no longer your first time around the bookmarklet block, you will want to wrap your code so that you can save a JavaScript script anywhere on your computer and import accordingly:

javascript:(function () {
var myBookmarklet = document.createElement('script');

This will make it so that all you have to do to add a script to the end of the <body> of a webpage is change the file path to point to the .js file containing your snippet.

Useful examples

Below is a small list I’ve compiled of useful bookmarklets others have created and shared on the web. To add simply drag the link to the bookmarks section of your browser.

jQueryify : injects a minified jQuery file to any webpage you are visiting to allow you to test and traverse through the page with ease

SelectorGadget : allows for easy element selection, particularly useful for styling with css

YoutubePlaylister : creates a playlist of all youtube videos linked on the current page

SiteInfo : Links to a profile of the current site you are at, indicating a full list of technologies that have been used to create that site


A potential complaint towards bookmarklets is that they may obfuscate the purpose of bookmarks by being mixed up with all of the normal links in your bookmarks folder.

So if it is the case that you would like your bookmarked <a> tags to maintain the single and boring use of only being references but still want the extra functionality that comes with a bookmarklet, try this handy tool. It allows you to very easily convert a bookmarklet into a chrome extension.