/**
 * My Awesome Bookmarklet
 * Does something cool on any webpage
 */

// Your code here
const elements = document.querySelectorAll(".some-class");
elements.forEach((el) => {
  // Do something
});

alert("Done!");

2. Generate the Bookmarklet

Run the generator:

npm run bookmarklet -- code/bookmarklets/your-file.js

The generator will:

✂️ Remove all comments
🗜️ Minify the code
📦 Wrap in bookmarklet format
📋 Copy to your clipboard

3. Install in Browser

Create a new bookmark (Cmd+D or Ctrl+D)
Paste the clipboard content as the URL
Name it and save
Click to use!

📚 Available Bookmarklets

highlight-links.js

Highlights all links on a page in yellow and shows count.

Generate: npm run bookmarklet -- code/bookmarklets/highlight-links.js

example-bookmarklet.js

Example template showing basic structure.

💡 Tips

Test first: Try your logic in the browser console before creating bookmarklet
Be browser-safe: Stick to vanilla JS, avoid ES6+ features in production if supporting old browsers
Keep it simple: Bookmarklets should be quick utilities, not full apps
Comment generously: Comments are stripped out, so explain your code
Use descriptive names: Variables and functions will be minified

🔧 Bookmarklet Generator

The generator (code/utils/bookmarkletMaker.js) handles:

Comment removal (single-line // and multi-line /* */)
Code minification (whitespace removal, single-line conversion)
IIFE wrapping with javascript: protocol
Clipboard copying

📝 Common Patterns

Getting Page Info

// Current URL
const url = window.location.href;

// Page title
const title = document.title;

// Selected text
const selected = window.getSelection().toString();

Modifying the Page

// Find elements
const elements = document.querySelectorAll(".selector");

// Style them
elements.forEach((el) => {
  el.style.backgroundColor = "yellow";
});

// Add content
const div = document.createElement("div");
div.textContent = "Hello!";
document.body.appendChild(div);

Opening New Windows

// Open in new tab
window.open("https://example.com", "_blank");

// With specific size
window.open("https://example.com", "_blank", "width=800,height=600");

Copying to Clipboard

navigator.clipboard
  .writeText("text to copy")
  .then(() => alert("Copied!"))
  .catch((err) => alert("Failed: " + err));

🐛 Debugging

If your bookmarklet doesn't work:

Open browser console (F12)
Paste your original code (without javascript: wrapper)
Debug errors
Update the source file
Regenerate bookmarklet

README.md

Bookmarklets

🚀 Creating a Bookmarklet

1. Write Your JavaScript