creating-bookmarklets

Bookmarklet Creation

Critical Requirements

Comment Style - ABSOLUTE

Use ONLY /* */ comments. NEVER use // comments.

Bookmark execution contexts fail with // style. Every comment must use block format.

/* ✓ Correct */
const x = 5; /* inline */

/* ✗ Wrong - breaks bookmarklets */
// const x = 5;
const y = 10; // inline

IIFE Wrapper

All bookmarklets must wrap in IIFE:

(function() {
  /* bookmarklet code */
})();

Protocol Prefix

All delivered bookmarklets must begin with javascript: protocol:

javascript:(function() {
  /* bookmarklet code */
})();

This makes the code immediately usable without requiring manual modification during installation.

Workflow

1. Generate Pretty-Printed Code

Create readable source with:

• 2-space indentation
• Descriptive variable names
• Block comments for key sections
• Logical organization
• Prepend javascript: protocol to the code

This version with javascript: prefix gets stored in GitHub and shown to users, making it ready for installation without manual modification.

2. Provide Installation

Default approach - reference installer:

Install: https://austegard.com/web-utilities/bookmarklet-installer.html

Installer handles:

• Minification with Terser
• URL encoding
• Draggable link generation
• GitHub repo integration

Alternative - generate link programmatically: Use Terser.js to create installable link if requested:

async function createBookmarkletLink(code, title) {
  const minified = await Terser.minify(code);
  const encoded = encodeURIComponent(minified.code).replace(/'/g, "%27");
  return `<a href="javascript:${encoded}">${title}</a>`;
}

Requires: <script src="https://cdn.jsdelivr.net/npm/terser/dist/bundle.min.js"></script>

3. Deliverables

Always provide:

1. Pretty-printed source code with javascript: protocol prepended
2. Installation method (installer link or generated link)
3. Brief description of functionality
4. Usage instructions