Make your (website browsing) life easier with bookmarklets.

Bookmarklets are quite similar in appearance to regular browser “bookmarks” (or “favourites”). But instead of opening a new webpage, bookmarklets are used to run some simple code on the webpage you are currently browsing.

This can be very helpful in automating tedious or repetitive tasks. Thus, you can think of bookmarklets as “self-editable” and “lightweight” browser extensions.

There is no need to install anything to run a bookmarklet – you just click & drag or copy & paste some text. With a bit of coding knowledge on JavaScript (JS), HTML, and maybe some CSS, you can customize bookmarklets to suit your needs.

Bookmarklets are available natively across most modern browsers, including Mozilla Firefox and Chromium-based browsers like Chrome and Microsoft Edge.

How to create a bookmarklet.

Bookmarklets are created the same way you create regular browser bookmarks.

But instead of entering a HTTPS / HTTP link into the URL field, you enter some JS code as a function, which will be executed when the bookmark is clicked. Hence the JS code is sometimes referred to as a “javascript:” pseudo-URL.

The bookmarklet URL template can be written as follows:

javascript: (function(){
	// Replace this comment with JavaScript code.
})()

Alternatively, you can use the newer JS arrow function expression if you prefer its shorter syntax over the traditional JS function declaration:

javascript: (() => {
	// Replace this comment with JavaScript code.
})()

A rundown of the bookmarklet template.

javascript:

The first part of the template tells the browser what protocol to use.

Similar to https:// or http:// for the HTTPS and HTTP protocol, javascript: tells the browser to execute the contents of the bookmark’s URL field as JavaScript code.

Which is why it is sometimes referred to as a “javascript:” pseudo-URL.

(function(){ … })

The next part of the template defines the JS function to be executed. All custom JS code that needs to be executed should be placed between the opening (“{”) and closing (“}”) curly braces, in place of the ellipsis (“…”).

This function declaration can be replaced with the newer and shorter JS arrow function expression (() => { … }).

()

The final part of the template tells the browser to execute the previously defined function when the bookmarklet is clicked. If the function takes a list of parameters, you can pass in arguments here like so:

javascript: ((a, b) => {
	alert(a + b);
})(1, 2)

When activated, the above code will run a function that takes two parameters “a” and “b”, adds them together, and generate an alert with the result. When 1 and 2 are passed in as arguments to a and b, the resulting alert should give the number 3.

Creating your first bookmarklet.

As an example, we are going to create a bookmarklet using the following example code, which will trigger an alert in your browser that reads “Hello world!”.

javascript: (() => {
	alert("Hello world!");
})()

There are two main ways to create bookmarklets.

Method 1.

Assuming that you’re creating a bookmarklet on a modern desktop browser, the easiest and most straightforward method is to click and drag the following link into the bookmarks bar or favourites bar of your preferred browser:

Example bookmarklet

If you hover your mouse cursor on top of the above link, you can see that the contents of the link is identical to the example code with line breaks removed.

Of course, creating a bookmarklet with this method can be rather risky, because bookmarklets in the wild may contain malicious code. Always review any code you grab from the internet before adding and running it on your browser.

Side note: Upon saving a bookmarklet to your bookmarks bar or favourites bar, most modern browsers will automatically ignore or remove line breaks from the JS code and turn it into a single-line JS URL like so:

javascript: (() => { alert("Hello world!"); })()

Method 2.

The more traditional method is to bookmark the current page using the shortcut “CTRL + d” (on Windows) or “CMD + d” (on Mac), and then editing the bookmark you just created.

Simply rename the newly created bookmark to “Example bookmarklet”, copy and paste the example code into the URL field, and then move the bookmarklet to the top of your bookmarks bar or favourites bar for easy access.

Alternatively, you can bring up your browser’s bookmark manager or favourites manager and create a new bookmark from there.

How to run a bookmarklet.

As always, the usual precautions apply when it comes to grabbing random pieces of code from the internet.

Running a bookmarklet on a desktop browser.

If you’re on desktop, running a bookmarklet is as simple as opening a webpage and clicking on the bookmarklet in the browser bookmarks bar or favourites bar.

Unfortunately, bookmarklets will not run on certain non-HTML pages, including the Settings page and New Tab page on Chrome. This has been reported as a bug on the Chromium project, but the issue has been closed with a status of “WontFix“.

So it is generally not possible to run bookmarklets without first loading a valid page.

Running a bookmarklet on a mobile browser.

I used to think it is impossible to run bookmarklets on mobile browsers at all.

I tried, failed, and simply gave up.

Paul Kinlan, the Lead for Web and Chrome Developer Relations at Google, thought the same until 21 May 2020, where he posted an article upon discovering that it is actually possible to run bookmarklets on the Chrome app for Android.

Just not in the traditional way.

Normally, most people would access their Chrome bookmarks on Android by going to “Bookmarks” in the options menu, and then select a bookmark from a list.

Problem is, bookmarklets will fail to run with this approach. Paul explained that “Chrome on Android seems to have no knowledge of the current page the user is on, and therefore can’t execute JavaScript against that page”.

However, there is an alternate way to access bookmarks, and that is by typing the name of the bookmark into the browser address bar. Paul noted that bookmarks will keep the context of the current page with this approach, which means that it is also possible to run bookmarklets.

I have since tested the browser address bar method on the Microsoft Edge app for Android, and it works as well.

How to share a bookmarklet.

Let’s say you have coded your own bookmarklet and want to share it with others. Apart from simply posting the code online, you can actually create a bookmarkable link with some simple HTML code.

This can be achieved by adding the “javascript:” pseudo-URL to the href attribute of an HTML anchor tag <a> like so:

<a href="javascript: (() => { alert('Hello world!'); })()">
	Example bookmarklet
</a>

The above HTML code generates a draggable link that can be use to quickly add a bookmarklet to the browser bookmarks bar or favourites bar.

This is the approach I used to create our example bookmarklet in Method 1.

However, due to the inherent risk of having malicious code hidden within a link, I prefer to provide bookmarklet code in its entirety so it can be reviewed before use.