Skip to main content

Bookmarklets - Bookmarks on steroids

ยท 3 min read
Yakov Rakhamimov

image

tl;dr: Bookmarklets are bookmarks charged with the power of JavaScript. They let you execute JavaScript code by clicking on a bookmark.โ€‹

Ever found yourself repeatedly copying a particular text, navigating to a specific webpage, or performing some other routine task while browsing? Bookmarklets are a neat trick that can help you automate these mundane tasks. Instead of using a URL, these supercharged bookmarks leverage JavaScript to perform complex tasks at the click of a button.

danger

Before we proceed, it's important to understand the security implications of bookmarklets. They involve running JavaScript code directly in your browser. Be wary of using bookmarklets from sources you don't trust, as they can potentially expose your browser and data to security risks.

How do Bookmarklets work?โ€‹

Creating a bookmarklet is similar to creating a bookmark. The difference is that instead of inserting a URL, you add JavaScript code. Whenever you click on the bookmarklet, this JavaScript code is executed. It's a powerful feature that can automate a plethora of tasks that you perform in your browser. Any JavaScript code that you can run in the browser console, you can run in a bookmarklet.

note

Make sure to prefix your JavaScript code with javascript: when creating a bookmarklet. This tells the browser that it's not a standard URL.

Copy a frequently used string to the clipboardโ€‹

javascript:navigator.clipboard.writeText('ce34839b-5eca-4ab5-86ac-02cc8ba76c8e');

Fetch data from an apiโ€‹

we can also use this to fetch data from an api, and display it in the console.

javascript:fetch('https://jsonplaceholder.typicode.com/todos/1').then((response) => response.json()).then((json) => console.log(json));
info

As you can see, the code is one-liner. This is because bookmarklets don't support multi-line code. Take in mind that you can use the ; to separate multiple statements.

Expanding Your Bookmarklet Libraryโ€‹

The power of bookmarklets is limited only by your imagination. You can automate numerous tasks that you frequently perform on your browser. For more ideas and inspiration, check out these repositories:

https://github.com/Krazete/bookmarklets

https://github.com/marcobiedermann/awesome-bookmarklets

Conclusionโ€‹

Bookmarklets offer a way to harness the power of JavaScript to automate your browser tasks and enhance your productivity. They're easy to create and can be as simple or complex as you need them to be. But, like all powerful tools, they need to be used with caution. So, remember to use or create bookmarklets from trusted sources to keep your browsing safe.