Photo by Olia 💙💛 Gozha on Unsplash
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?​
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​
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));
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.
Top comments (0)