Build a Browser Bookmarklet — One-Click JavaScript Tools With Zero Install

What is a Bookmarklet?

A bookmarklet is a browser bookmark where the URL starts with javascript: instead of https://. When you click it, the browser executes the JavaScript code immediately on the current page — instead of navigating anywhere.

javascript:alert('Hello from a bookmarklet!');

That's it. No install, no extension store, no Tampermonkey. Just a bookmark that runs code.

From Function to Bookmarklet

Converting a JavaScript function into a bookmarklet has 3 steps:

// 1. Write and test as a normal function
function countWords() {
  const text = document.body.innerText;
  alert('Words: ' + text.trim().split(/\s+/).length);
}

// 2. Wrap in an IIFE to avoid variable conflicts with the page
(function() {
  const text = document.body.innerText;
  alert('Words: ' + text.trim().split(/\s+/).length);
})();

// 3. Add javascript: prefix and minify to one line
javascript:(function(){const t=document.body.innerText;alert('Words: '+t.trim().split(/\s+/).length);})();

Building a Word Counter

Counts words, characters, and estimated reading time — useful for writers:

(function() {
  const text = document.body.innerText;
  const words = text.trim().split(/\s+/).filter(Boolean);
  const readingTime = Math.ceil(words.length / 200); // avg 200 wpm

  const box = document.createElement('div');
  box.style.cssText = 'position:fixed;top:20px;right:20px;background:#1a1a1a;color:#fff;padding:16px;border-radius:10px;';
  box.innerHTML = `Words: ${words.length}<br>Reading time: ~${readingTime} min`;
  box.onclick = () => box.remove();
  document.body.appendChild(box);
})();

Building a Color Picker

Hover over any element to highlight it, click to reveal its exact HEX color:

function toHex(colorStr) {
  // The canvas trick — normalizes any CSS color format to HEX
  const ctx = document.createElement('canvas').getContext('2d');
  ctx.fillStyle = colorStr;
  return ctx.fillStyle;
}

function pickColor(e) {
  e.preventDefault();
  const bgColor = getComputedStyle(e.target).backgroundColor;
  const hex = toHex(bgColor);
  navigator.clipboard.writeText(hex);
  alert('Color: ' + hex + ' (copied!)');
}

document.addEventListener('click', pickColor, true);

Building a Reading Mode

Strips a page down to just the article text — similar to Safari's Reader Mode:

(function() {
  const article = document.querySelector('article') || document.body;
  const content = article.innerText;

  document.body.innerHTML = `
    <div style="max-width:680px;margin:60px auto;font-family:Georgia,serif;
                font-size:19px;line-height:1.8;white-space:pre-wrap;">
      ${content}
    </div>
  `;
})();

Sharing Bookmarklets — The Drag-to-Install Link

For sharing on a website, build a link users can drag directly to their bookmarks bar:

<a href="javascript:(function(){...})();"
   onclick="return false;"
   title="Drag this to your bookmarks bar">
   📊 Word Counter
</a>

The onclick="return false;" prevents the link from running when clicked on the install page — it only activates when dragged to the bookmarks bar and clicked from there.

This is a preview. The full ebook includes all 5 complete bookmarklets — Word Counter, Reading Mode, Color Picker, Page Info, and Quick Translate — plus a comparison table of when to use bookmarklets versus Chrome Extensions versus userscripts.

This Completes the YFIN Ebook Series

This is ebook #20 — the final ebook in the complete YFIN Beginner Coding series. From Chrome Extensions to WordPress plugins to browser automation, all 20 ebooks build real, working projects you can use immediately.