A guide to bookmarklets

I'm a frequent user of bookmarklets. As I'm sharing some of them on my blog, I wrote this post to explain what bookmarklets are and how to use them.

In short, a bookmarklet is a browser bookmark containing JavaScript code. Clicking the bookmark executes the script in the context of the current web page, allowing users to perform tasks such as modifying the appearance of a webpage or extracting information. Bookmarklets are a simpler, more lightweight alternative to browser extensions, Chrome snippets, and userscripts.

How to add a bookmarklet?

Here's an example to display a browser dialog with the title of the current web page:

Display page title

You can click the link to see what it does. To run this script on other websites, we have to save it as a bookmarklet. My preferred way is to drag the link onto the bookmarks toolbar:

Another way is to right-click the link to open its context menu:

In Firefox, you can then select "Bookmark Link…". Other browsers make it a little more difficult: select "Copy Link (Address)", manually create a new bookmark, and then paste the copied URL as the link target.

Once created, you can click the bookmark(let) on any web page to display its title. Scroll further down to see more useful use cases.

How to write a bookmarklet?

Let's start with the code for the previous bookmarklet example:

window.alert(document.title)

To turn that script into a bookmarklet, we have to put javascript: in front of it:

javascript:window.alert(document.title)

To keep our code self-contained, we should wrap it with an IIFE (immediately invoked function expression):

javascript:(() => {
  window.alert(document.title)
})()

Finally, you might have to URL-encode your bookmarklet if you get issues with special characters:

javascript:%28%28%29%20%3D%3E%20%7B%0A%20%20window.alert%28document.title%29%0A%7D%29%28%29

Useful bookmarklets

Here are some bookmarklets I've created:

• Copy Tab — copy browser links and titles in one click (as Markdown and rich text).
• Debugger — Starts the browser DevTools debugger after 3 seconds, useful for debugging dynamic content changes.
• Log Focus Changes — Logs DOM elements when the focus changes.
• Design Mode — Makes the web page content-editable (toggle).