Why Bookmarklets Still Matter

Bookmarking pages is second nature to anyone who uses a browser. But the same bookmark mechanism can store something far more useful than a URL: a snippet of JavaScript. A JavaScript bookmark — commonly called a bookmarklet, favelet, or favlet — runs when you click it, letting you manipulate the current page in almost any way you can script. Bookmarklets date back to the late 1990s, and bookmarklets.com (the site that coined the term) is still online. Many bookmarklets from that era continue to work despite being untouched for over two decades.

Modern browsers and dev tools have made bookmarklets less prominent than they once were, but they remain a practical, zero-install utility for web developers. They require no additional software to create or run, and they are well suited for small, one-off tools you can build on the fly — the kind of contraptions a good engineer keeps handy while working.

Building a Basic Bookmarklet

Creating a bookmarklet is no different from writing a script you would run in the browser console. The only twist is that you store it as a bookmark with a javascript: prefix, which tells the browser to execute it rather than navigate to a URL.

Take a simple alert as a starting point:

alert("Hello, World!");

Wrapping that logic inside an Immediately Invoked Function Expression (IIFE) is the standard way to package it. An IIFE gives the script its own scope, so it won’t pollute the global namespace or interfere with JavaScript already running on the page. Wrapping the code in an anonymous function and appending (); triggers it as soon as the bookmark is clicked:

(() => {
  alert("Hello, World!");
})();

For reliable behavior across browsers, encode the bookmarklet using encodeURIComponent() (or a similar encoding tool) to escape special characters. Skipping this step can cause browsers to misinterpret the code in unexpected ways. Even simple bookmarklets benefit from encoding, but it becomes more critical as complexity grows. After encoding, collapse everything onto a single line:

(()%3D%3E%7Balert(%22Hello%2C%20World!%22)%3B%7D)()%3B

Finally, prepend javascript: to the encoded script so that the browser knows to treat the bookmark as executable code, not as a URL for a regular page-loaded bookmark:

javascript:(()%3D%3E%7Balert(%22Hello%2C%20World!%22)%3B%7D)()%3B

Installing Bookmarklets in Your Browser

Installation steps vary by browser, but the general approach is to create a bookmark for any page, then edit its location field to contain your bookmarklet code.

In Safari on macOS, add a page to your bookmarks, then edit that bookmark’s URL to be your bookmarklet:

Safari window with the Favorites tab opened and a context menu open for an item highlighting the Edit Address option.

In Firefox on desktop, right-click the bookmarks toolbar, choose “Add Bookmark…”, and paste your code into the Location field:

Firefox window showing the Add Bookmark option.

In Chrome on desktop, right-click the bookmarks bar, select “Add page…”, and do the same:

Chrome window showing the Add page option.

Most mobile browsers also support creating and running bookmarklets. That can be especially useful for developers since browser dev tools are often absent on phones and tablets.

Using Bookmarklets for CSS

Bookmarklets aren’t limited to JavaScript logic — they can also alter a page’s styling. One straightforward approach creates a <style> element and injects it into the document:

javascript: (() => {
  var style = document.createElement("style");
  style.innerHTML = "body{background:#000;color:rebeccapurple}";
  document.head.appendChild(style);
})();

For greater control, use the CSSStyleSheet interface rather than injecting raw style text. With that approach, the browser validates values for you, and you can work directly with the CSS Object Model (CSSOM) — reading selectors, updating or removing rules, and inspecting the computed style. It is more code, but for anything beyond one-off styling it is the better tool:

javascript: (() => {
  const sheet = new CSSStyleSheet();
  document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
  sheet.insertRule("body { border: 5px solid rebeccapurple !important; }", 0);
  sheet.insertRule("img { filter: contrast(10); }", 1);
})();

Because bookmarklets run against whatever page you happen to be on, you have no way to know what existing styles you are overriding. Specificity conflicts are a real concern. Using !important is often frowned upon in normal authoring, but when you need to override an arbitrary unknown stylesheet, it is a reasonable and pragmatic choice.

Limitations to Know

The most persistent obstacle for bookmarklets is Content Security Policy (CSP). CSP is a security mechanism that lets sites control which resources are allowed to load, helping block malicious actions like cross-site scripting (XSS). A page can explicitly forbid inline scripts, which is exactly what a bookmarklet is. When a bookmarklet is blocked, it is often because it depends on cross-origin requests — fetching resources from outside the current site. Because of this, the safest approach is to make bookmarklets self-contained. If a bookmarklet silently fails, check the browser console for CSP errors.

Firefox blocking a bookmarklet from running due to inline scripts being disallowed.

Bookmarklets have no official URL length limit, but browsers impose their own informal caps. In practical testing (results may vary by browser version and platform): Firefox will not create a bookmarklet larger than 65536 bytes; Safari accepts a bookmarklet of that size but does nothing when you trigger it; Chrome becomes difficult to interact with at around 9999999 characters. For anything that large, you are better off loading an external script, keeping the CSP caveat in mind:

javascript:(() => {
  var script=document.createElement('script');
  script.src='https://example.com/bookmarklet-script.js';
  document.body.appendChild(script);
})();

If you outgrow bookmarklets entirely, alternatives include userscript managers like TamperMonkey, building a full browser extension, or using devtools snippets. Bookmarklets are best suited for small, focused utility scripts.

Safely Finding Good Bookmarklets

Bookmarklets published online are third-party code. Treat them with the same suspicion as any other code you find on the internet. Malicious bookmarklets have been used to steal credentials, so only run code you understand and trust. Many browsers strip the javascript: prefix when you paste code into the address bar as a safety measure, which breaks bookmarklet distribution by copy-paste. That is why most bookmarklets are distributed as clickable links that you drag into your bookmark bar instead.

Several sources of verified, developer-built bookmarklets are worth your attention:

Given how the web platform has evolved, older bookmarklet articles contain a lot of obsolete code. Look for more recent guides, as many classics simply no longer apply to modern browsers.