Bookmarklets - Bookmarks on steroids
Tags: browser, javascript, bookmark, bookmarklet
Published: 2023-06-20 04:37:25

---
title: Bookmarklets - Bookmarks on steroids
published: true
date: 2023-06-20 00:00:00 UTC
tags: browser,javascript,bookmark,bookmarklet
canonical_url: https://yakov.dev/blog/bookmarklets-bookmarks-on-steroids
---

Photo by [Olia 💙💛 Gozha](https://unsplash.com/@olia?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) on [Unsplash](https://unsplash.com/photos/J4kK8b9Fgj8?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText)

![image](https://yakov.dev/assets/images/olia-gozha-J4kK8b9Fgj8-unsplash-212dc2e1c238fae33195f8c06c3ac389.jpg)

> ### tl;dr: Bookmarklets are bookmarks charged with the power of JavaScript. They let you execute JavaScript code by clicking on a bookmark.[​](#tldr-bookmarklets-are-bookmarks-charged-with-the-power-of-javascript-they-let-you-execute-javascript-code-by-clicking-on-a-bookmark "Direct link to 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.


**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?[​](#how-do-bookmarklets-work "Direct link to 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

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[​](#copy-a-frequently-used-string-to-the-clipboard "Direct link to Copy a frequently used string to the clipboard")

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

### Fetch data from an api[​](#fetch-data-from-an-api "Direct link to 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));
```


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[​](#expanding-your-bookmarklet-library "Direct link to 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/Krazete/bookmarklets)

[https://github.com/marcobiedermann/awesome-bookmarklets](https://github.com/marcobiedermann/awesome-bookmarklets)

## Conclusion[​](#conclusion "Direct link to 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.