How to Create a Bookmarklet Step-by-Step

A complete guide to creating your first bookmarklet from scratch, with examples and best practices.

Last updated: July 3, 2025

Introduction

Creating a bookmarklet is simpler than you might think. In this guide, we'll walk through the entire process from writing your first JavaScript code to saving it as a bookmarklet in your browser.

🎯 What You'll Learn

  • • Write JavaScript code for bookmarklets
  • • Convert code to bookmarklet format
  • • Install bookmarklets in different browsers
  • • Debug and test your bookmarklets

Step 1: Write Your JavaScript Code

Start by writing the JavaScript code you want to execute. Let's create a simple bookmarklet that highlights all links on a page:

// Find all links on the page
var links = document.querySelectorAll('a');

// Add a yellow background to each link
links.forEach(function(link) {
  link.style.backgroundColor = 'yellow';
  link.style.color = 'black';
  link.style.padding = '2px';
});

Step 2: Wrap in an IIFE

To prevent conflicts with existing page code, wrap your JavaScript in an Immediately Invoked Function Expression (IIFE):

(function() {
  // Find all links on the page
  var links = document.querySelectorAll('a');
  
  // Add a yellow background to each link
  links.forEach(function(link) {
    link.style.backgroundColor = 'yellow';
    link.style.color = 'black';
    link.style.padding = '2px';
  });
})();

Step 3: Add the JavaScript Protocol

Prefix your code with javascript: to make it executable as a bookmark:

javascript:(function() {
  var links = document.querySelectorAll('a');
  links.forEach(function(link) {
    link.style.backgroundColor = 'yellow';
    link.style.color = 'black';
    link.style.padding = '2px';
  });
})();

Step 4: Minify Your Code

For complex bookmarklets, remove unnecessary whitespace and comments to make the code more compact:

javascript:(function(){var links=document.querySelectorAll('a');links.forEach(function(link){link.style.backgroundColor='yellow';link.style.color='black';link.style.padding='2px'})})();

⚠️ Important Note

Some characters need to be URL-encoded. Use %20 for spaces, %22 for quotes, etc.

Step 5: Create the Bookmark

Method 1: Drag and Drop

  1. Create an HTML link with your bookmarklet code
  2. Drag the link to your bookmarks bar
  3. That's it! Click to execute

Method 2: Manual Creation

  1. Right-click your bookmarks bar
  2. Select "Add new bookmark" or similar
  3. Give it a name (e.g., "Highlight Links")
  4. Paste your bookmarklet code as the URL
  5. Save the bookmark

Browser-Specific Instructions

🌐 Chrome / Edge

  1. Show bookmarks bar (Ctrl+Shift+B)
  2. Right-click the bookmarks bar
  3. Click "Add page..."
  4. Enter name and bookmarklet code

🦊 Firefox

  1. Show bookmarks toolbar (Ctrl+B)
  2. Right-click toolbar
  3. Select "New Bookmark"
  4. Add name and JavaScript code

🧭 Safari

  1. Show bookmarks bar (Cmd+Shift+B)
  2. Bookmarks → Add Bookmark
  3. Name your bookmarklet
  4. Paste code in address field

📱 Mobile Browsers

Mobile support varies. Most mobile browsers support bookmarklets but require manual URL editing after bookmarking.

Example Bookmarklets to Try

🔍 Find and Replace Text

Replace all occurrences of a word on the page

javascript:(function(){var find=prompt('Find:');var replace=prompt('Replace with:');if(find&&replace){document.body.innerHTML=document.body.innerHTML.replace(new RegExp(find,'g'),replace)}})();

📏 Show Element Borders

Add borders to all elements for debugging

javascript:(function(){var style=document.createElement('style');style.innerHTML='*{outline:1px solid red!important}';document.head.appendChild(style)})();

🎨 Dark Mode Toggle

Invert colors for a quick dark mode

javascript:(function(){document.documentElement.style.filter=document.documentElement.style.filter?'':'invert(1) hue-rotate(180deg)'})();

Testing and Debugging

1. Test in Console First

Before creating a bookmarklet, test your JavaScript code in the browser console (F12) to ensure it works correctly.

2. Check for Errors

If your bookmarklet doesn't work, check the console for JavaScript errors. Common issues include syntax errors and missing semicolons.

3. Handle Different Sites

Remember that different websites have different structures. Add error handling to make your bookmarklet more robust.

Next Steps

Now that you know how to create bookmarklets, try our generator for more complex examples or explore advanced techniques.

Use GeneratorAdvanced Guide