How to Create Your Own Bookmarklet: A Step-by-Step Guide for Beginners

New Guide: Complete bookmarklet creation tutorial with 10+ working examples and troubleshooting tips.

Creating your own bookmarklet is easier than you think. If you can write basic JavaScript, you can build powerful browser tools that solve your specific problems. No frameworks, no build tools, no deployment – just pure JavaScript that runs instantly.

This guide will take you from zero to creating your first custom bookmarklet in under 10 minutes. We'll cover the basics, share practical examples, and show you debugging tricks that even experienced developers don't know.

What You'll Learn:

• Understanding bookmarklet structure
• Creating your first bookmarklet (5 minutes)
• 10 practical examples with code
• Debugging and troubleshooting
• Advanced techniques and best practices

What Exactly Is a Bookmarklet?

A bookmarklet is simply JavaScript code saved as a browser bookmark. When clicked, it executes on the current page, giving you the power to:

✓ Modify page content instantly
✓ Extract data from websites
✓ Automate repetitive tasks
✓ Add features websites don't provide
✓ Debug and analyze pages

// Basic bookmarklet structure:

javascript:(function(){
    // Your code here
})();

The javascript: prefix tells the browser to execute JavaScript instead of navigating to a URL. The anonymous function wrapper (function(){...})() prevents variable conflicts with the page.

Your First Bookmarklet in 5 Minutes

Let's create a simple bookmarklet that highlights all links on a page. This is useful for checking broken links or understanding page structure.

Step 1: Write the JavaScript

javascript:(function(){
    // Find all links on the page
    var links = document.querySelectorAll('a');
    
    // Highlight each link with a red border
    links.forEach(function(link) {
        link.style.border = '2px solid red';
        link.style.backgroundColor = 'yellow';
    });
    
    // Show total count
    alert('Found ' + links.length + ' links on this page');
})();

Step 2: Minify the Code

Bookmarklets work best as a single line. Remove unnecessary spaces and line breaks:

javascript:(function(){var links=document.querySelectorAll('a');links.forEach(function(link){link.style.border='2px solid red';link.style.backgroundColor='yellow'});alert('Found '+links.length+' links on this page')})();

Step 3: Add to Your Browser

Copy the minified code above
Right-click your bookmarks bar and select "Add Page" or "Add Bookmark"
Name it "Highlight Links"
Paste the code as the URL
Save and click to test on any webpage!

PRO TIP: Use javascript:void instead of javascript: if your bookmarklet returns a value, to prevent the browser from navigating away.

10 Practical Bookmarklet Examples

Here are real-world bookmarklets you can use immediately. Each solves a common problem:

1. Dark Mode Toggle

Instantly add dark mode to any website:

javascript:(function(){
    var d=document,s=d.getElementById('darkmode');
    if(s){s.remove();return;}
    s=d.createElement('style');
    s.id='darkmode';
    s.innerHTML='*{background:#1a1a1a !important;color:#e8e6e3 !important}a{color:#69b7ff !important}';
    d.head.appendChild(s);
})();

2. Remove Paywall Overlay

Remove annoying overlay popups (use responsibly):

javascript:(function(){
    document.querySelectorAll('*').forEach(e=>{
        if(getComputedStyle(e).position=='fixed'||getComputedStyle(e).position=='sticky'){
            e.style.display='none';
        }
    });
    document.body.style.overflow='auto';
})();

3. Extract All Emails

Find all email addresses on a page:

javascript:(function(){
    var emails=document.body.innerHTML.match(/([a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+.[a-zA-Z0-9_-]+)/gi);
    if(emails){
        var unique=[...new Set(emails)];
        prompt('Found '+unique.length+' emails:',unique.join(', '));
    }else{
        alert('No emails found');
    }
})();

4. Show All Passwords

Reveal hidden password fields (great for your own passwords):

javascript:(function(){
    document.querySelectorAll('input[type=password]').forEach(function(e){
        e.type='text';
        e.style.backgroundColor='#ffff99';
    });
})();

5. Copy All Links

Extract all links from a page to clipboard:

javascript:(function(){
    var links=Array.from(document.links).map(l=>l.href).join('
');
    navigator.clipboard.writeText(links).then(function(){
        alert('Copied '+document.links.length+' links to clipboard');
    });
})();

6. Remove All Images

Clean reading mode by removing all images:

javascript:(function(){
    document.querySelectorAll('img,video,iframe,svg').forEach(e=>e.remove());
    document.querySelectorAll('*').forEach(e=>e.style.backgroundImage='none');
})();

7. Sort Table by Column

Click any table header to sort (works on most HTML tables):

javascript:(function(){
    document.querySelectorAll('th').forEach(function(th,i){
        th.style.cursor='pointer';
        th.onclick=function(){
            var table=th.closest('table');
            var rows=Array.from(table.querySelectorAll('tr')).slice(1);
            rows.sort((a,b)=>a.cells[i].innerText.localeCompare(b.cells[i].innerText));
            rows.forEach(row=>table.appendChild(row));
        };
    });
    alert('Click any table header to sort!');
})();

8. Print Friendly Version

Prepare page for printing by removing unnecessary elements:

javascript:(function(){
    document.querySelectorAll('nav,header,footer,aside,.sidebar,.ad,#comments').forEach(e=>e.remove());
    document.body.style.width='100%';
    document.body.style.maxWidth='800px';
    document.body.style.margin='0 auto';
    window.print();
})();

9. Show Alt Text

Display alt text for all images (SEO/accessibility check):

javascript:(function(){
    document.querySelectorAll('img').forEach(function(img){
        var alt=img.alt||'NO ALT TEXT';
        var div=document.createElement('div');
        div.style.cssText='background:red;color:white;padding:2px;font-size:10px;position:absolute';
        div.textContent=alt;
        img.parentNode.insertBefore(div,img);
    });
})();

10. Website Statistics

Quick stats about the current page:

javascript:(function(){
    var stats={
        'Title':document.title,
        'URL':location.href,
        'Links':document.links.length,
        'Images':document.images.length,
        'Forms':document.forms.length,
        'Scripts':document.scripts.length,
        'Word Count':document.body.innerText.split(/s+/).length
    };
    alert(Object.entries(stats).map(([k,v])=>k+': '+v).join('
'));
})();

Debugging Your Bookmarklets

When your bookmarklet doesn't work, here's how to debug it:

1. Use Console for Testing

First, test your code in the browser console (F12) without the javascript: prefix:

// Test in console first
(function(){
    console.log('Testing...');
    // Your code here
})();

2. Add Error Handling

javascript:(function(){
    try{
        // Your code here
    }catch(e){
        alert('Error: '+e.message);
        console.error(e);
    }
})();

3. Common Issues and Solutions

❌ "Bookmarklet does nothing"

Check for syntax errors. Missing semicolons or brackets break everything. Use a JavaScript validator.

❌ "Works on some sites but not others"

Some sites have Content Security Policy (CSP) that blocks inline JavaScript. No fix except using extensions.

❌ "Special characters break the code"

URL encode special characters or use template literals with backticks.

Advanced Techniques

1. Load External Libraries

Inject jQuery or other libraries dynamically:

javascript:(function(){
    var s=document.createElement('script');
    s.src='https://code.jquery.com/jquery-3.6.0.min.js';
    s.onload=function(){
        // jQuery is now available
        jQuery('body').css('background','pink');
    };
    document.head.appendChild(s);
})();

2. Create UI Elements

Build interactive interfaces:

javascript:(function(){
    var div=document.createElement('div');
    div.innerHTML=''+
        'Bookmarklet UI'+
        ''+
        '';
    document.body.appendChild(div.firstChild);
})();

3. Store Data Locally

Remember settings between uses:

javascript:(function(){
    var count=localStorage.getItem('bookmarklet_count')||0;
    count++;
    localStorage.setItem('bookmarklet_count',count);
    alert('You have used this bookmarklet '+count+' times');
})();

4. Async Operations

Handle promises and async code:

javascript:(async function(){
    try{
        var response=await fetch(location.href);
        var text=await response.text();
        var size=(text.length/1024).toFixed(2);
        alert('Page size: '+size+'KB');
    }catch(e){
        alert('Error: '+e.message);
    }
})();

Best Practices

✅ DO

• Use IIFE pattern to avoid conflicts
• Add error handling
• Test in console first
• Keep code under 2000 characters
• Use meaningful variable names

❌ DON'T

• Pollute global scope
• Use document.write()
• Assume elements exist
• Forget mobile compatibility
• Include sensitive data

Bookmarklet Generators and Tools

Speed up development with these tools:

• Bookmarklet Maker: Simple online generator for basic bookmarklets
• JSCompress: Minify your JavaScript code
• URLEncoder: Encode special characters properly
• JSFiddle: Test and share bookmarklet code
• GitHub Gist: Store and version your bookmarklets

SECURITY WARNING: Only use bookmarklets from trusted sources. Malicious bookmarklets can steal data or perform unwanted actions. Always review the code before adding to your browser.

Your Next Steps

Ready to Build?

Start with a simple problem you face daily. Maybe you always need to:

• Remove a specific element from a website you visit often
• Extract certain data from pages
• Add a feature a website lacks
• Automate a repetitive task

Pick one problem, write the JavaScript solution, test it in the console, then convert it to a bookmarklet. Within an hour, you'll have built something useful that saves you time every day.

Remember: The best bookmarklet is the one that solves YOUR specific problem. Start building!