Bookmarklets

Best Bookmarklets for Developers

2024-03-25T00:00:00Z

Bookmarklets are tiny JavaScript snippets saved as browser bookmarks. No extensions, no installs, one click to run. Here are 63 of the best for developers, organized by category.

SEO Bookmarklets

These tools help you audit and optimize pages for search engines.

Check AMP Version - Verify if a page uses AMP
Check Broken Links - Find dead links on any page
Check Canonical Tags - Verify canonical URL implementation
Check Hreflang Tags - Validate international targeting tags
Check Image Optimization - Audit image sizes and alt text
Check Indexing Status - Quick Google index check
Check Meta Description - View and analyze meta descriptions
Check Mobile Viewport - Verify mobile-friendly setup
Check Open Graph Tags - Inspect social sharing metadata
Check Page Speed - Redirect to PageSpeed Insights
Check SSL Certificate - View SSL certificate details
Check Structured Data - Validate schema markup
Check Twitter Cards - Verify Twitter card metadata
Check XML Sitemap - View the sitemap
Convert Links to Hrefs - Convert text URLs to clickable links
Google Site Search - Search within a specific domain
Google Trends Checker - Check search trend data
Highlight Headings - Color-code H1 through H6 tags
Heading Hierarchy Map - Visual tree of page heading structure
Keyword Density Analyzer - Count keyword frequency
Moz DA Checker - Look up domain authority
Readability Checker - Score content readability
Robots.txt Checker - View robots.txt rules
Schema Markup Validator - Validate structured data
SEO Keyword Highlighter - Highlight keywords on the page

Web Development Bookmarklets

Tools for debugging, inspecting, and testing web pages.

Clear Local Storage - Wipe localStorage for the domain
Clear Session Storage - Wipe sessionStorage for the domain
Cookie Inspector - View all cookies for the page
CSS Class Inspector - Show CSS classes on elements
CSS Grid Overlay - Display a grid overlay on the page
Element Counter - Count elements by tag type
Event Listener Viewer - See attached event listeners
Extract Stylesheets - List all linked stylesheets
Font Inspector - Identify fonts used on the page
Local Storage Explorer - Browse localStorage contents
Remove Colors - Strip all colors for accessibility testing
Remove Stylesheets - Strip CSS to view raw HTML
Toggle Element Visibility - Show/hide hidden elements
Unused CSS Detector - Find unused CSS rules
Live Webpage Editor - Edit page content directly in browser

Design Bookmarklets

Quick design inspection and color tools.

Color Palette Extractor - Extract dominant colors from a page
Color Picker - Pick any color on screen
Dark Mode Toggle - Force dark mode on any website

Productivity Bookmarklets

Speed up your daily workflow.

Add to Feedly - Subscribe to a feed in Feedly
AI Summarizer - Extract key points from any article
Markdown Link Copier - Copy page as Markdown link
Open in daily.dev - Open page in daily.dev
Post to Hacker News - Submit page to HN
Quick Rich Text Editor - Turn any textarea into a rich editor
Read Aloud (TTS) - Listen to page content via text-to-speech
Remove Embed iframe - Strip iframes from the page
Remove Images - Remove all images for faster loading
Sticky Header Killer - Remove fixed headers and nav bars
Word Counter - Count words in selected text

Privacy Bookmarklets

Control your data and cookies.

Delete Cookies - Clear all cookies for the domain

Fun Bookmarklets

Enable Right Click - Re-enable right-click on pages that block it
Highlight Links - Highlight all links on the page
Let it Snow - Make it snow on any webpage
Quick Google Translate - Translate the page with Google
Quick Note - Jot down a quick note
Quick Online Note - Floating notepad on any page
URL to QR Code - Generate a QR code for the current URL
Wayback Machine Search - View archived versions of the page

How to Use Bookmarklets

Drag any button to your bookmarks bar. Click it on any webpage to run. That's it.

Bookmarklets work in all modern browsers: Chrome, Firefox, Safari, and Edge. No installation required, no permissions needed, no data collected.

Looking to build your own? Check our Bookmarklet Maker to create custom bookmarklets from JavaScript code.

Heading Hierarchy Map Bookmarklet

2024-03-20T00:00:00Z

Heading structure matters for SEO and accessibility, but it's hard to see in the browser. The Heading Hierarchy Map bookmarklet shows it as a visual tree.

One click generates a diagram of every heading on the page, color-coded by level from H1 (red) to H6 (purple). Click any heading in the tree to jump to it on the page.

What It Shows

Color-coded heading levels
Nesting relationships via indentation
Child and leaf node badges
Total heading count
Click-to-navigate from the diagram

Why It Matters

SEO: Search engines use headings to understand content hierarchy. One H1 per page, proper nesting, no skipped levels.

Accessibility: Screen readers use headings for navigation. Broken structure breaks the experience.

Content quality: Good headings reflect organized thinking. They make content scannable.

When to Use It

SEO audits of competitor pages
Accessibility reviews
Content planning and restructuring
Verifying CMS-generated heading markup

Drag me to bookmark bar: 👉🏻 Heading Map

📖 Full documentation

AI Summarizer Bookmarklet

2024-03-19T00:00:00Z

Too much content, too little time. The AI Summarizer bookmarklet extracts the most important sentences from any webpage in seconds.

It uses extractive summarization, meaning it only selects sentences already in the article. No hallucinated text, no external servers, no API keys.

How It Works

Sentence extraction breaks text into individual units
Word frequency analysis ranks sentences by importance
Position scoring boosts earlier sentences slightly
Top results become your summary

What the Panel Shows

Word count and estimated read time
Condensed summary with key sentences
Top 3 highlighted sentences
One-click copy for summary or full output in Markdown

Best Results

Works best on articles with 500+ words and clear paragraph structure. Shorter content may return most of the original text.

Everything runs locally in your browser. Nothing leaves your machine.

Drag me to bookmark bar: 👉🏻 Summarize

📖 Full documentation

Read Aloud TTS Bookmarklet

2024-03-18T00:00:00Z

Some people absorb information better by listening. The Read Aloud TTS bookmarklet turns any webpage into audio using your browser's built-in speech synthesis.

No extensions, no API keys, no data sent anywhere. Just click and listen.

What You Get

Voice selector from all installed system voices
Speed control from 0.5x to 3x
Pitch adjustment from 0.5 to 2.0
Play, pause, and stop controls

Smart Content Detection

The bookmarklet doesn't read everything on the page. It finds <article>, <main>, or content containers and focuses on the actual text. Navigation, ads, and sidebars get skipped.

Selective Reading

Highlight any text before clicking Play, and it reads only your selection. Useful for proofreading, testing how a passage sounds, or learning pronunciation.

Browser Support

Works in Chrome, Edge, Safari, and Firefox. Chrome on desktop offers the most voices.

Drag me to bookmark bar: 👉🏻 Read Aloud

📖 Full documentation

Markdown Link Copier Bookmarklet

2024-03-17T00:00:00Z

Writing Markdown links by hand is tedious. The Markdown Link Copier bookmarklet does it in one click.

It reads the page title and URL, formats them as [title](url), and copies the result to your clipboard. Ready to paste into GitHub, Obsidian, docs, or anywhere.

Where It Helps

GitHub issues, PRs, and READMEs
Documentation sites and wikis
Note-taking in Obsidian, Notion, Logseq
Chat in Slack and Discord
Blogging with Hugo, Jekyll, Eleventy

How It Works

Click the bookmarklet
It reads <title> and the current URL
Formats as [title](url)
Copies to clipboard

One click, no configuration.

Drag me to bookmark bar: 👉🏻 Copy Link

📖 Full documentation

Sticky Header Killer Bookmarklet

2024-03-16T00:00:00Z

Sticky headers eat up screen space. The Sticky Header Killer bookmarklet removes them all with one click.

It finds every element using position: fixed or position: sticky and resets them. Navigation bars, cookie banners, chat widgets, promotional bars, all gone. Refresh to restore.

The Problem

Fixed headers take 60-120px of vertical space on every screen. On mobile, that's painful. They cause layout shifts, block content, and pull attention away from what you're reading.

What It Targets

Fixed navigation bars
Sticky headers and footers
Cookie consent banners
Chat widgets and popups
Floating action buttons

Drag me to bookmark bar: 👉🏻 Kill Sticky

📖 Full documentation

Dark Mode Toggle Bookmarklet

2024-03-15T00:00:00Z

Not every website offers dark mode. The Dark Mode Toggle bookmarklet fixes that with a single click.

It injects a CSS overlay that inverts backgrounds to dark tones and text to light. Click once to activate, click again to turn off. No settings, no accounts.

Why Dark Mode Matters

Dark mode reduces eye strain in low-light environments and saves battery on OLED screens. But many sites still don't offer it natively. This bookmarklet fills that gap universally.

How It Works

The bookmarklet scans the page and injects a dark color scheme. It preserves readability while cutting glare. Works on any webpage regardless of the site's own theme support.

When to Use It

Late-night browsing sessions
Sites without native dark mode
Testing dark mode on your own projects
Reducing eye strain during long reads

Drag me to bookmark bar: 👉🏻 Dark Mode

📖 Full documentation

Bookmarklet Maker

2023-03-31T00:00:00Z

Bookmarklet Maker is a powerful tool that enables you to create your own custom bookmarklets, allowing you to enhance your productivity and streamline your workflow.

Your JavaScript code

Bookmarklet Name

Drag me to bookmark bar: 👉🏻

By leveraging the power of basic JavaScript, you can transform your bookmarks from simple shortcuts to powerful and versatile tools that can help you accomplish a wide variety of tasks with ease.

With Bookmarklet Maker, you can avoid cluttering your browser with unnecessary extensions, and instead create lightweight and effective solutions that work seamlessly with your existing workflow.

Whether you're looking to automate repetitive tasks, simplify your browsing experience, or just boost your productivity, Bookmarklet Maker is a must-have tool for anyone looking to get the most out of their browser.

Benefits of Bookmarklets

Easy to Use: Bookmarklets are incredibly easy to use, and can be created in just a few minutes.
Versatile: Bookmarklets can be used to automate a wide variety of tasks, including everything from simple form-filling to complex data analysis.
Lightweight: Bookmarklets are lightweight and don't require any additional software to run, making them ideal for users who want to keep their browser as lean as possible.

Bookmarklet Examples

Some examples of bookmarklets that you can create with Bookmarklet Maker:

QR Code Generator

javascript:!function(){var e="https://api.qrserver.com/v1/create-qr-code/?size=300x300&data="+encodeURIComponent(window.location.href);open(e,"w","location=no,status=yes,menubar=no,scrollbars=no,resizable=yes,width=500,height=500,modal=yes,dependent=yes")}();

Search in Google Site:All

javascript:location="http://www.google.com/search?num=100&q=site:"+escape(location.hostname);

Enable Right Click

javascript:document.oncontextmenu=null;

Quick Note

javascript:!function(){let e=window.open("about:blank","_blank");e?(e.document.write("Enter your note here."),e.document.title="Quick Note",e.document.documentElement.setAttribute("contenteditable",""),e.document.close()):alert("Please allow popups for this site to use the Quick Note feature")}();

How to Create Bookmarklets

2023-01-25T00:00:00Z

Bookmarklets are very usefull and timesaving piece of javascript code and that you can use.

first let's see how a bookmarklets look like.

Create Bookmarklet

Before starting to create bookmarklets few things you should keep mind,

All bookmarkelts must start with javascript: keyword,
Do not use comments inside bookarklets, there is big chance your bookmarklet will fail to run,

One Liner Bookmarklets

if JavaScript code is simple then you can write that in one line and your custom bookmarklet is ready.

javascript:alert(location.href)

This type of bookmarklet is good if you want to extract some basic information from page where you don't need to keep track of any value.

Example:

Quickly check all indexed page of current website,
Enable right-click,
Show hidden fields,
Remove any element from page,

Bookmarklets that require more than one line

If your code is a bit complex and needs more space then use the wrap your function like following IIF IEF JavaScript immediately invoked function ^[ref]

/* variation 1 */
(function(){
 /* function logic here */
})();

/* variation 2 */
(()=>{
 /* function logic here */
})();

/* variation 3 */
(async ()=>{
 /* function logic here */
})();

javascript:(()=>{
  alert(location.href)
})();

Example:

Generate QR code,
Make it Snow on page,
Extract or remove any element from page

Now you can easily convert JavaScript code to Bookmarklets,

If you find it little bit difficult to make bookmarklet then you can take help of bookmarklet maker tools.

By doing so not extra script always loads on everypage, script will run only when you run it.

What are Bookmarklets

2023-01-24T00:00:00Z

Bookmarklets are small peice of JavaScript code that is stored as bookmarks in browser. Bookmarklets help in automating repetitive task, access hidden information from page.

Simple bookmarklets look like this

javascript:alert(location.href)

Just copy the above code and save it as bookmark,

Once bookmark is saved you can click on it run on any webpage.

Bookmarklets have javascript: prefix,

Wihtout javascript: prefix any JavaScript code saved as bookmark will not run in browser.

Pros of using Bookmarklets

No need to install any Chrome extension for simple things,
No code is auto inserted into any page unless you decide,
You can write your own helpfull bookmarklets on your own, (like quickly adding ling to feedly, pocket or sending link through pushbullet)

Cons of using Bookmarklets

Bookmarklets do not run automatically or trigger on schedule,
List of website that offer Bookmarklets are limited

If you want to create your bookmarklet then here is full post about How to create your own Bookmarklet

Bookmarklets

Best Bookmarklets for Developers

SEO Bookmarklets #

Web Development Bookmarklets #

Design Bookmarklets #

Productivity Bookmarklets #

Privacy Bookmarklets #

Fun Bookmarklets #

How to Use Bookmarklets #

Heading Hierarchy Map Bookmarklet

What It Shows #

Why It Matters #

When to Use It #

AI Summarizer Bookmarklet

How It Works #

What the Panel Shows #

Best Results #

Read Aloud TTS Bookmarklet

What You Get #

Smart Content Detection #

Selective Reading #

Browser Support #

Markdown Link Copier Bookmarklet

Where It Helps #

How It Works #

Sticky Header Killer Bookmarklet

The Problem #

What It Targets #

Dark Mode Toggle Bookmarklet

Why Dark Mode Matters #

How It Works #

When to Use It #

Bookmarklet Maker

Benefits of Bookmarklets #

Bookmarklet Examples #

QR Code Generator #

Search in Google Site:All #

Enable Right Click #

Quick Note #

How to Create Bookmarklets

Create Bookmarklet #

What are Bookmarklets

Pros of using Bookmarklets #

Cons of using Bookmarklets #

SEO Bookmarklets

Web Development Bookmarklets

Design Bookmarklets

Productivity Bookmarklets

Privacy Bookmarklets

Fun Bookmarklets

How to Use Bookmarklets

What It Shows

Why It Matters

When to Use It

How It Works

What the Panel Shows

Best Results

What You Get

Smart Content Detection

Selective Reading

Browser Support

Where It Helps

How It Works

The Problem

What It Targets

Why Dark Mode Matters

How It Works

When to Use It

Benefits of Bookmarklets

Bookmarklet Examples

QR Code Generator

Search in Google Site:All

Enable Right Click

Quick Note

Create Bookmarklet

Pros of using Bookmarklets

Cons of using Bookmarklets