Bookmarklets — The Productivity Hacker

4 min readJun 1, 2018

I was recently introduced to this very handy concept of storing JavaScript as Bookmarks and creating “One Click” utilities using the same.

And I was like -

I dug a bit deeper and found out that it has an official name — Bookmarklets.

If you think of it, the ability to store JavaScripts into bookmarks presents a wide array of utilities in front of us; JavaScript can, literally, do anything in the browser environment.

Things you can do using bookmarklets -

Select a text on the webpage and click on the Bookmarklet (read Bookmark) to trigger google search
Query a database and populate web forms
Find all the broken links on the web page

The list is exhaustive. After reading this article, you might come up with your own use cases for Bookmarklets.

In this article, I am going to show you how I used bookmarklets to call Rest APIs and eliminated the dependency on a dedicated Rest API client.

Let’s understand the use case first -

A Web Application sends email notifications to its users. The email notifications are triggered at a particular time interval or based on specific events. However, emails are not sent to the users as soon as they are generated. They are generated and stored on the server. Emails are sent only after a batch job is triggered to process them.
This batch job is triggered through a Rest API call

So as you can see, every time I want to test email notifications, I have to depend on a Rest API client like PostMan.

Enter Bookmarklets! I wrote a JavaScript code to call the Rest API and stored it in a Bookmark. Now, every time I want to run the batch job, I just click on the bookmark and I start receiving the emails. Yes! that simple. 😀

Let’s create a new Bookmarklet from the scratch. We will create a Bookmarklet that will fetch weather data from OpenWeatherMap website through a Rest API call.

Step 1: Write the JavaScript code

This is the syntax of JavaScript code to be used as a Bookmarklet -

This is the JavaScript code that we will store in the Bookmark. Basically, it calls a Rest API on OpenWeatherMap website. The id in the code snippet is the API Key. You need to visit OpenWeatherMap website and create your own.

Step 2: Create a new Bookmark and add JavaScript code to it

In Google Chrome, press Ctrl + Shift + O and open Bookmark Manager -

Next, give your bookmark a name. In the URL textbox, add the JavaScript code we created in the first step. Click on Save button

Step 3: Open Developer Tools -> Console and click on the bookmark just created

Close all the existing browser windows and open a fresh one. Open Developer Tools by clicking on the F12 button. Now, click on Console tab as shown in the screenshot below.