Snapcode

Hover, click, and capture any web element as Markdown (HTML, CSS, selector) plus a cropped screenshot. Built for AI-assisted development hand-off.

Features

• Hover highlight with tag + dimensions, click (or Tab + Enter) to capture
• Pixel-accurate screenshots via tabs.captureVisibleTab + crop
• Optional html2canvas fallback for off-screen elements
• Robust selectors (id, data-testid, data-*, class chain, nth-of-type path)
• Meaningful computed CSS only, React component + Tailwind hints
• Auto-copy Markdown (+ best-effort PNG), result dialog with HTML / CSS / Selector tabs
• Keyboard accessible dialog (focus trap, Esc, arrow-key tabs), screen-reader status
• Minimal permissions: activeTab + storage

Installation (load unpacked)

1. Open chrome://extensions, enable Developer mode.
2. “Load unpacked” → select the src/ folder in this repo.
3. Pin Snapcode, press Ctrl+. (or Cmd+. on Mac) on any http(s) page.

Icons in src/icons/ are generated placeholders. Replace with brand art if desired.

Usage

1. Press Ctrl+. or use the popup button to start annotation mode.
2. Hover to highlight, click or Tab + Enter to capture.
3. Markdown is copied automatically; use the dialog to copy HTML / CSS / Selector / JSON or save the PNG.
4. Press Esc to exit; Esc also closes the dialog.

Permissions rationale

• activeTab: toggle current tab + screenshot visible area on user gesture.
• storage: future prefs (currently defaults, key snapcode.prefs.v1).
• <all_urls>: run on any page the user invokes + captureVisibleTab.
• No downloads, scripting, or clipboardWrite: download uses anchor + Blob, clipboard uses navigator.clipboard.

Optional html2canvas fallback

src/vendor/html2canvas.min.js is a placeholder. For off-screen capture:

curl -L -o src/vendor/html2canvas.min.js \
  https://cdn.jsdelivr.net/npm/[email protected]/dist/html2canvas.min.js

Then add "vendor/html2canvas.min.js" to content_scripts.js in manifest.json before capture.js.

Development

npm test

Tests use Node built-ins only (node:test + vm). They cover Markdown fence safety, truncation, selector escaping, manifest minimality, and static a11y / performance / security contracts.

Load src/ as unpacked extension to smoke test popup, toggle command, highlight, capture, and dialog on a plain http(s) page.

Privacy

All processing is local. No network calls, analytics, or external services. Screenshots stay in clipboard / downloads chosen by the user.

License

MIT (html2canvas fallback, if installed, is separately MIT © Niklas von Hertzen).