Brian Cantoni

Modern Browser Bookmarklets

Browser bookmarklets are still a thing. I recently created a few at work for copying specific links from internal sites and was reminded about their usefulness. Creating and managing them can be kind of a pain, so I rekindled an old idea and created a simple bookmarklet manager.

What is a bookmarklet?

First, what exactly is a bookmarklet? It's a browser bookmark that runs a small bit of JavaScript code rather than containing a web link. The code will run in the context of your current browser page and can be useful for reading or modifying that content. Bookmarklets need to be formatted a specific way to safely run when clicked.

For example, you might have a simple code snippet that displays a pop-up dialog:

alert(\'Hello, world!\');

It needs to be formatted as a single function and properly encoded like this:

javascript:(function()%7Balert(\'Hello%2C%20world!\')%3B%7D)()

Here are some good more detailed explanations of bookmarklets:

An important note about bookmarklets: like browser extensions, they have access to everything in your browser. Don't install anything without reading and understanding the code yourself to make sure it's safe.

Bookmarklet manager

As you can see from the example above, JavaScript needs to be converted into the proper format to be used as a bookmarklet. For anything beyond simple examples, this is kind of a pain. Inspired by some online tools like Bookmarklet Maker, I decided to build my own manager. I wanted a simple editor to convert between plain JavaScript and bookmarklet format, and to save a list of bookmarklets I've made.

Here's the result:

Just like my last project, I used Claude Code (with Opus 4.5) and followed a spec-driven process:

  1. I wrote the initial SPEC.md with the basic concept and some specific functional requirements I had in mind.
  2. I prompted Claude to review the spec, give suggestions, clarify the requirements, and update the document.
  3. I gave Claude the go signal and the initial working version was ready in a couple minutes!
  4. I tested and iterated on a few tweaks to get to the first release.

I was impressed with the simple UI design that Claude implemented. (I had not given any specifics about the design.) And the solution worked on the first iteration. I suggested using local browser storage but Claude suggested adding the import/export as JSON which is really handy for sharing across multiple computers.

Bookmarklet manager screenshot

Can AI help you create bookmarklets?

You can probably guess the answer is Yes. AI tools know about browser bookmarklets. You can prompt an AI like Claude or ChatGPT with the details of what you want and then copying and pasting the resulting code into the bookmarklet manager.

Here are a couple examples:

Prompt:

create javascript I could use in a bookmarklet that found all headings
(h1, h2, etc) on a page and reversed the characters in the string

Result:

document.querySelectorAll(\'h1,h2,h3,h4,h5,h6\').forEach(h =\> {
  h.textContent = h.textContent.split(\'\').reverse().join(\'\');
});

Prompt:

create a javascript bookmarklet to copy the web page title and URL and 
put them in the clipboard; display a toast near the page top (centered)
for 2 seconds saying \"markdown link copied\"`

Result:

// Build the Markdown link
const markdownLink = `[${document.title}](${location.href})`;

// Copy to clipboard
navigator.clipboard.writeText(markdownLink).then(() => {
  // Create toast element
  const toast = document.createElement('div');
  toast.textContent = 'markdown link copied';

  // Style the toast
  Object.assign(toast.style, {
    position: 'fixed',
    top: '20px',
    left: '50%',
    transform: 'translateX(-50%)',
    padding: '10px 14px',
    background: '#333',
    color: '#fff',
    fontSize: '14px',
    borderRadius: '6px',
    zIndex: 999999,
    boxShadow: '0 2px 6px rgba(0,0,0,.3)',
    opacity: '0',
    transition: 'opacity 0.2s'
  });

  // Add to page
  document.body.appendChild(toast);

  // Fade in
  requestAnimationFrame(() => {
    toast.style.opacity = '1';
  });

  // Fade out after 2 seconds, then remove
  setTimeout(() => {
    toast.style.opacity = '0';
    setTimeout(() => {
      toast.remove();
    }, 200);
  }, 2000);
});

In the future it might be nice to integrate an AI agent into the bookmarklet manager where the result could be dropped directly into the code editor. But for now, a little tabbing back and forth is still pretty easy.