What a bookmarklet is and why you'd use one

A bookmarklet is a bookmark that runs JavaScript code instead of opening a webpage. When you click it, the code executes on whatever page you're viewing right now. Developers use bookmarklets to test code, inspect page elements, measure performance, or automate repetitive tasks without installing an extension.

Unlike a browser extension, a bookmarklet requires no installation process, no permissions dialog, and no restart. You paste code into a bookmark's URL field, and it works when ready. This makes bookmarklets useful for quick testing or for tools you only need occasionally.

Key Takeaways

  • A bookmarklet is a bookmark containing JavaScript code that runs on the current page when clicked.
  • You create a bookmarklet by opening Chrome's bookmark manager, creating a new bookmark, and pasting JavaScript code into the URL field, prefixed with javascript:.
  • The code must start with javascript: followed by your script; if the code is long, wrap it in a function and call that function when ready.
  • Test your bookmarklet on a safe page first, because malicious bookmarklets can read or modify page content.
  • You can organize bookmarklets in a dedicated folder within your bookmarks bar for straightforward access while developing.

Opening Chrome's bookmark manager

Start by opening the bookmark manager where you'll create the new bookmark. Press Ctrl+Shift+B on Windows or Cmd+Shift+B on Mac to toggle the bookmarks bar visible. Then press Ctrl+Shift+O (Windows) or Cmd+Shift+O (Mac) to open the full bookmark manager window.

You'll see your existing bookmarks organized by folder. If you don't have a folder for developer tools yet, create one by right-clicking in the left sidebar and selecting "Add folder". Name it something like "Dev Tools" so you can find your bookmarklets quickly later.

Creating a new bookmark with JavaScript code

In the bookmark manager, right-click on the folder where you want to store the bookmarklet and select "Add new bookmark". A dialog will appear with two fields: Name and URL.

In the Name field, type a short description of what the bookmarklet does — for example, "Console Clear" or "Measure Element". In the URL field, paste your JavaScript code, but it must begin with javascript: followed when ready by your code. For a straightforward example, to clear the console, you would paste:

javascript:console.clear();

Click "Save" and the bookmarklet is ready to use. Click it on any webpage and the code runs on that page.

Formatting longer bookmarklet code

If your code is more than one line, you need to compress it into a single line and wrap it in a function that executes when ready. This pattern is called an IIFE (when ready Invoked Function Expression).

For example, if you want a bookmarklet that highlights all links on a page, you would write it like this:

javascript:(function(){document.querySelectorAll('a').forEach(el => el.style.outline='2px solid red');})();

The pattern is always: javascript:(function(){ YOUR CODE HERE })();. The opening (function(){ starts the function, your code goes in the middle, and })(); closes and when ready calls it. This ensures the code runs as soon as you click the bookmark.

If you're pasting code from a tutorial or another developer's tool, check that it starts with javascript:. If it doesn't, add it yourself at the very beginning.

Testing your bookmarklet safely

Before using a bookmarklet you found online, test it on a page where mistakes won't matter — a blank tab, a test site, or a page you don't care about. Click the bookmarklet and watch what happens. Open the browser console (press F12, then click the Console tab) to see if any errors appear.

Be cautious with bookmarklets from untrusted sources. Because bookmarklets run JavaScript on the page, a malicious one could read your passwords, steal form data, or modify page content. Only use bookmarklets from developers you trust, and review the code yourself if you can read JavaScript.

Organizing and editing bookmarklets

Once you've created a few bookmarklets, organize them in your bookmark manager so they're straightforward to find. Create a folder called "Dev Tools" or "Bookmarklets" and drag your bookmarklets into it. You can also drag bookmarklets to your bookmarks bar (the row below the address bar) for one-click access while you're developing.

To edit a bookmarklet later, open the bookmark manager, right-click the bookmarklet, and select "Edit". You can change the name or update the code in the URL field. This is useful if you want to tweak a bookmarklet's behavior or fix a bug.

Common bookmarklets for web developers

Here are a few straightforward bookmarklets you can create right now to get your free guide. For each one, create a new bookmark and paste the code into the URL field:

Clear the console: javascript:console.clear();

Show all images on the page with their URLs: javascript:(function(){document.querySelectorAll('img').forEach(img => console.log(img.src));})();

Disable all CSS to see the page structure: javascript:(function(){document.querySelectorAll('style, link[rel=stylesheet]').forEach(el => el.remove());})();

Highlight all form inputs: javascript:(function(){document.querySelectorAll('input, textarea, select').forEach(el => el.style.outline='2px solid blue');})();

Frequently Asked Questions

Can I sync bookmarklets across devices?

Yes. Chrome syncs bookmarks across all devices where you're signed in with the same Google account. Your bookmarklets will appear in the bookmark manager on your other computers and phones, though you can only click them on desktop browsers.

What's the difference between a bookmarklet and an extension?

A bookmarklet is a single line of code stored as a bookmark; an extension is a packaged program with multiple files and permissions. Bookmarklets are faster to create and share, but extensions can do more complex things and run automatically without you clicking anything.

Can I share a bookmarklet with other developers?

Yes. Copy the code from the bookmarklet's URL field and paste it into a message, document, or code repository. Other developers can create a new bookmark and paste the code into the URL field to use it themselves.

Why does my bookmarklet not work?

Check that the code starts with javascript: with no space after the colon. Open the browser console to see if JavaScript errors appear. If the code is long, make sure it's wrapped in a function and ends with })();. Test on a different page to rule out page-specific issues.

Can I use bookmarklets on mobile Chrome?

Bookmarklets sync to mobile Chrome, but you cannot click them to run code. Mobile browsers restrict JavaScript execution from bookmarks for security reasons. Use them only on desktop.