Claude in Chrome shortcut to aid in bookmarklet creation

create-bookmarklet.md

SHORTCUT: creating-bookmarklets

Trigger: user mentions bookmarklets, browser utilities, "drag to bookmarks bar," or JS that runs from the browser toolbar.

Non-negotiable rules

• Comments: ONLY /* */ block comments. NEVER // — it breaks bookmarklet execution (whole thing becomes one line).
• Wrapper: always an IIFE → (function(){ ... })();
• Protocol: delivered code must begin with javascript: so it's installable without edits.

Workflow

1. Write pretty-printed source (2-space indent, descriptive names, block comments, logical sections). Prepend javascript:. This readable+prefixed version is what goes to GitHub and what I show the user.
2. Give an installation method. Default: point to the installer, which handles Terser minification, URL-encoding, draggable-link generation, and GitHub repo integration: Install: https://austegard.com/web-utilities/bookmarklet-installer.html Alternative (only if asked): generate the link programmatically with Terser.js:

   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>`;
   }
   /* needs: <script src="https://cdn.jsdelivr.net/npm/terser/dist/bundle.min.js"></script> */

3. Deliverables (always all four): pretty-printed source with javascript: prepended · installation method · brief description of functionality · usage instructions. User should be able to copy the whole block (incl. javascript:) with zero modification.

Code standards

• Error handling: wrap main logic in try/catch; console.error('Bookmarklet error:', e) + alert('Operation failed: ' + e.message).
• Logging: include debug traces by default — console.log('Bookmarklet: Starting') … 'Bookmarklet: Complete'.
• User feedback: alert('✓ ...') on success, alert('✗ ...') on failure — cover every path.

Common patterns

• DOM: querySelector, guard with if(!el){alert('Element not found');return;}
• Extraction: Array.from(document.querySelectorAll('.item')).map(i => ({title:i.querySelector('.title')?.textContent.trim(), ...}))
• Clipboard: navigator.clipboard.writeText(t).then(...).catch(...); fallback-check if(!navigator.clipboard){alert('Clipboard API not supported');return;}
• Dynamic library load: create <script>, set .src to CDN, run logic in .onload, append to document.head.

Constraints

• Cannot: use external CSS/images without embedding, use build tools/preprocessing, use // comments.
• Can: Fetch API, localStorage/sessionStorage, modern browser APIs, CDN libs loaded dynamically.

Pre-delivery checklist

1. No // comments anywhere. 2. Tested in console wrapped in IIFE. 3. Error handling covers missing DOM elements. 4. User feedback on all paths.

Storage

User repo: https://github.com/oaustegard/bookmarklets · installer loads directly from it · pretty-printed format matches storage requirements.