Bookmarklets: Automate boring web tasks

What’s your first thought when you think about automating some boring and repetitive web task?

Every time I’ve thought about this, my first thought has been: "I can write an extension for it". But did you know that creating an extension is not the only way? You can also create and use bookmarklets. With them, you can keep your common tasks on a web page just a click away.

In this article, you will find out:

• What bookmarklets are.
• How bookmarklets stack up against browser extensions.
• How to create and use them.

Browser extension vs. bookmarklet

If you want to automate something on the web, you’re probably going to pick between a browser extension or a bookmarklet.

Browser extensions need no introduction. It’s that thing you install to change or enhance what your browser can do.

A bookmarklet is a bookmark stored in a web browser that contains JavaScript code that can manipulate web pages.

Why would you choose one over the other? It comes down to simplicity vs. power.

Case for browser extensions – power

With extensions, you can do much more than with JavaScript bookmarklets, but for the cost of some hassle and inconvenience.

Advantages of extensions

• You can use all the APIs the browser offers.
• You can run them automatically on page visit.
• Distribution. Users can just visit the extension store and click the Install button.
• Automatic updates.

Cons of extensions

• You need to go through an approval process or make your browser accept unapproved extensions.
• Your automation will work only in that one browser the extension is for.
• An additional learning curve needs to be tackled to get familiar with the extension API.

Case for bookmarklets – simplicity

With bookmarklets, you can’t do as much as with extensions, but creating them is simpler and more hassle-free.

Advantages of bookmarklets

• Easy to write and experiment with.
• There’s no approval process, you simply add a bookmark to your browser.
• It works in all the mainstream browsers, even mobile ones.
• Provided you write the code with browser compatibility in mind, you can use the same code in all of them.
• If you’ve manipulated websites with JavaScript before, you can do everything the way you’re used to.

Cons of bookmarklets

• They can do less than browser extensions. You only have access to regular web APIs, no special extensions, or other APIs.
• You run them by clicking on them. No auto-run on page visit.
• Distribution. Installing bookmarklets takes more steps and is not simple. Sharing them with others is more complicated.
• No automatic updates. Everyone who uses the bookmarklet will need to manually update it if the code changes.

How to create a bookmarklet

You can create a bookmarklet in four steps:

1. Use a browser console to write the JavaScript code that you want to run with a bookmarklet.
2. Wrap the code in IIFE (Immediately Invoked Function Expression) so you don’t break the page.
3. Prepend the JavaScript code with pseudo-protocol javascript: to turn it into a URL.
4. Create a bookmark with your code in the bookmark URL field.

1. Use browser console to write the JavaScript code

First, you need to write the JavaScript code, which does the automation. The easiest, most interactive way to write it is with a browser console.

It’s on you to write the specific code, but here’s one example which you could’ve come up with:

Let’s say you want to show a border around all the div elements on the page, so you can debug some style issue. This is the code for it:

var style = document.createElement('style');
style.innerHTML = 'div {border: 1px solid #FF0000 !important};';
document.head.appendChild(style);

If you run it in the browser console, you can see it work yourself.

But how do you transform this code into a bookmarklet? Take a look at the next steps:

2. Wrap the code in IIFE

(function(){
    var style = document.createElement('style');
    style.innerHTML = 'div {border: 1px solid #FF0000 !important};';
    document.head.appendChild(style);
})();

Try running this in the browser console. It still adds the border, but now you don’t pollute the global scope anymore, thus avoiding breaking the page.

3. Prepend javascript: to turn the code into a URL

javascript:(function(){
    var style = document.createElement('style');
    style.innerHTML = 'div {border: 1px solid #FF0000 !important};';
    document.head.appendChild(style);
})();

The javascript pseudo-protocol declares that the body of the URL is JavaScript code, which the browser can interpret as such.

4. Create the bookmarklet

• Bookmark the page you’re on.
• Edit the bookmark.
• Replace what’s in the URL field with your bookmarklet code, which looks like this:

javascript:(function(){
    var style = document.createElement('style');
    style.innerHTML = 'div {border: 1px solid #FF0000 !important};';
    document.head.appendChild(style);
})();

• Save it.

How to use a bookmarklet

Now let’s use your bookmarklet.

• Navigate to the page where you want to use your bookmarklet.
• Click on the bookmarklet which you’ve created in the previous step.

🎉🥳 Congrats, you’ve created and used your first bookmarklet 🥳🎉.

Final thoughts

You’ve seen how easy it is to create and use bookmarklets to save you from numerous annoyances common in web tasks. Do you have any web tasks which could use some automation? Could you automate them with some bookmarklets?

If so, just remember – it’s super easy. Just prepend the JavaScript code with pseudo-protocol javascript: and experiment a bit.

Want to know more?

Here are some resources which could interest you:

• Older, but still useful: Rules for Bookmarklets, Tips for Writing Bookmarklets.
• Bookmarklet Builder
• If you want something a bit more advanced than a bookmarklet, but not quite an extension yet, checkout userscripts and a userscript manager like Violentmonkey.
• A bit of a history: Bookmarklet history.