📸 Shotback

A Chrome extension for AI-assisted screenshot reviews: capture a full page, annotate specific areas, keep a timeline of comments, and prepare feedback for humans or LLMs.

---

🎯 Why Shotback

Shotback is optimized for local-first review workflows. You can annotate UI issues quickly, preserve context with area-linked comments, and keep feedback organized before sending to a teammate or an LLM.

It is useful when a product/design review needs more context than a plain screenshot but less ceremony than a full ticketing workflow.

🧠 Product Workflow

Shotback turns visual feedback into a compact review artifact:

1. capture the real page state;
2. mark the exact UI areas that need attention;
3. attach comments to each annotation;
4. keep a timeline of feedback decisions; and
5. export a structured prompt + image for cloud LLM review when local links are not accessible.

This keeps human feedback and AI review grounded in the same visual evidence.

✨ Features

• 📷 Full-page capture (scroll + stitch)
• ✏️ Area annotations: box, arrow, text
• 🔗 Linked comments tied to selected annotation
• ⏱️ Comment timeline with per-item remove
• 💬 General feedback for screenshot-level notes
• 🔐 Local share links (chrome-extension://.../viewer.html?share=...)
• 🤖 External LLM fallback:
  • downloads annotated image
  • copies a structured prompt to clipboard

🚀 Quick Start

1️⃣ Install dependencies

npm install

2️⃣ Build extension

npm run build

3️⃣ Load in Chrome

1. Open chrome://extensions
2. Enable Developer mode
3. Click Load unpacked
4. Select the dist/ folder

📖 Usage

1. Open a target webpage.
2. Click the Shotback extension icon and open the editor.
3. Click Capture Page.
4. Draw annotations and add comments.
5. Use one of two outputs:
   • Copy Local Share Link for local profile review
   • Prepare for Cloud LLM for external LLMs (prompt + image download)

📁 Project Structure

src/
  popup/       # extension popup UI
  editor/      # annotation editor UI
  viewer/      # local share viewer page
  lib/         # capture, rendering, storage helpers
  types/       # shared TS types
public/
  manifest.json
tests/
  capture.test.ts
.docs/
  PRD, todo/doing/done workflow docs

🛠️ Development Commands

Command	Description
npm run dev	Run Vite dev server
npm run build	Production build to dist/
npm run test	Run unit tests (Vitest)
npm run typecheck	Type-check with tsc --noEmit
npm run lint	Lint with ESLint
npm run format	Format with Prettier (format:check to verify)
npm run check	Run typecheck + lint + test + build
npm run preview	Preview production build

⚠️ Local Link Constraint

Local share links are intentionally local. They only work where:

• ✅ the extension is installed
• ✅ the share exists in that browser profile's chrome.storage.local

Note: For cloud LLM tools that cannot access local links, use Prepare for Cloud LLM.

🔐 Permissions & Privacy

Shotback is local-first and makes no network requests of its own. Captured images, annotations, and feedback stay in your browser profile. Data leaves the device only when you explicitly use Prepare for Cloud LLM, which downloads the annotated image and copies a prompt for you to paste manually.

It requests only the permissions full-page capture needs — activeTab, tabs, scripting, storage/unlimitedStorage, and <all_urls> host access so it can capture whatever page you are viewing. Page access is used only when you start a capture. See SECURITY.md for the full per-permission rationale.

🤝 Contributing

See CONTRIBUTING.md.

📄 License

MIT (LICENSE).