Introduction to Bookmarklets

A smaller alternative to Chrome extensions

Ferenc Almasi
Nov 4 · 4 min read
Picture showing a book with a bookmark
Picture showing a book with a bookmark
Photo by Ben White on Unsplash

Recently I wrote about how you can create your own Chrome extensions to improve the throughput of your workflow and I was wondering whether there are more lightweight alternatives to them.

What if we only want to copy / highlight texts, do things that should require no more than 10 lines of code? Can you think of writing out the same thing over and over again in a daily basis? I definitely can.

Things that are repetitive can always be automated and if there is an opportunity to automate then we should invest in it. Time is the most valuable resource we have. It is finite and unlike other assets, it can’t be earned.

So next time if you catch yourself doing the same things day to day, think if those steps can be replaced by a bookmarklet or other automated tool.

What are bookmarklets?

A bookmarlet is a bookmark that contains JavaScript code that can enhance your browsing experience

The good thing about bookmarklets is that you can turn any JavaScript code into one. Code pieces that you keep placing into the console can be replaced by them.

So how do you create one? Say we want to highlight outgoing links on a website…

How to turn JavaScript code into a bookmarklet?

First you write your JavaScript code inside the console just as usual. Going with the above example, it can be done using the following:

I purposefully wrote it in multiple lines. A bookmarlet needs to be compressed into one single line in order for it to work. To minify JavaScript, there are various online tools, so you don’t have to download anything additionally. I’m using Javascript-minifier.com.

A bookmark always points to website through a link. To make the bookmarklet valid and use JavaScript instead of a link, we need to prefix it with . There are two ways to turn a script into a functioning bookmarklet. Using an immediately invoked function or the operator.

And to finally add it as a bookmark, open a new tab and click on the star icon inside the address bar.

Adding a bookmark to chrome
Adding a bookmark to chrome

Name your bookmark and place it into the bookmarks bar. Once that’s done, right click on the newly created bookmark and click on edit, then replace the URL with the script we created. and that’s it! You’ve just created your first bookmarklet.

Edit the bookmark to use the script as a url
Edit the bookmark to use the script as a url

A practical example

I’ve recently started using Quora and I noticed that the numbers under the stats menu are not equivalent to the number of views added together on my profile’s home page.

That’s reasonable, it would require ton of resources to keep each user’s stats updating in real time, so they are updated for a given interval. But what if I want to see them on my profile’s page? Each question’s view count added together. We have them in the DOM so we could easily query them. The problem is they only appear once an answer is uncollapsed. To uncollapse them all we can trigger a click event on each “more” link:

Once we have the views inside the DOM, it’s just a matter of collecting their values and creating a new element for it:

This will create a new element, right next to the number of followers on the profile page.

But now, we have another problem. If we try to run this code right after the “more” links are clicked, we will get 0 for the views as the requests haven’t been made by the time the code runs. Luckily, we have jQuery available on Quora which means we can use . runs when there are no pending requests left — this is what we are looking for.

After we trigger the clicks on the links, we wait for to be called. It will run once all answers have been loaded successfully. Then we count up the views and display it.

Last but not least, we can unbind the subscription to to avoid adding the same element multiple times if other requests are being made after using the bookmarklet.

The whole script took less than 15 lines. After minification and adding the prefix, we can start using our brand new bookmarklet.

Summary

The possibilities are endless, the complexity can go to infinity. How about writing a bookmarklet that only does one thing? — Inject an external script into the site. The external resource can then pull in a whole application that doubles the user experience by adding various stats about the site and new user functionality. 🔖

Some other examples where you can use bookmarklets in a daily basis to boost your productivity can include things like:

  • Auto generating branch names based on tickets
  • Auto generating pull request descriptions
  • Displaying information for items that are only available in the DOM
  • Deleting mails older than x days
  • You name it

JavaScript in Plain English

Learn the web's most important programming language.

Ferenc Almasi

Written by

Frontend dev with a passion for beautiful code and simple yet attractive designs. Get in touch by saying hello@allma.si or visit allma.si directly 👋

JavaScript in Plain English

Learn the web's most important programming language.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade