BugShot — Screenshot to Bug Report

Capture screenshots, annotate, auto-capture console errors & browser info, and file bug reports in one click. Zero dependencies. No build step.

Features

• Screenshot capture — Visible viewport (JPEG, quality 85) or select a specific element
• 6 annotation tools — Arrow, rectangle, circle, freehand draw, text (inline input), blur/redact
• Undo/redo — Full history with Ctrl+Z / Ctrl+Y
• Auto-captured metadata — URL, page title, viewport size, DPR, browser, OS, user agent
• Console error interception — Captures console.log, .warn, .error, .info, unhandled rejections
• Network failure capture — Intercepts failed fetch, XHR, and webRequest calls (4xx/5xx)
• Auto reproduction steps — Tracks clicks, text inputs, scrolls, and SPA navigations automatically
• Badge counter — Real-time error count on the extension icon per tab
• Keyboard shortcut — Cmd+Shift+B (Mac) / Ctrl+Shift+B (Windows)
• Dark theme UI throughout

Integrations

Platform	How
GitHub Issues	Personal Access Token + repo. Creates formatted issue with environment table.
Jira Cloud	Domain + email + API token. Full ADF body with tables, code blocks, ordered lists. Uploads screenshot as attachment.
Slack	Incoming Webhook URL. Formatted with Block Kit — title, severity, repro steps, errors.
Clipboard	Copies full bug report as Markdown.
PNG	Downloads annotated screenshot.
JSON	Downloads structured report with all captured data.
Shareable HTML	Self-contained HTML file with embedded screenshot, dark theme, and full report. Zero backend needed.

Installation

1. Clone or download this repo
2. Open Chrome and go to chrome://extensions
3. Enable Developer mode (top right toggle)
4. Click Load unpacked and select the bugshot folder
5. Navigate to any website and click the BugShot icon

Usage

1. Click the BugShot icon in the toolbar (or press Cmd+Shift+B)
2. Click "Capture Bug Report" — takes a screenshot and opens the side panel
3. Annotate the screenshot with arrows, rectangles, text, blur, etc.
4. Fill in title, description, and severity
5. Export — copy to clipboard, download, or send directly to GitHub/Jira/Slack

Element Selection

Click "Select Element" in the popup to enter element selection mode. Hover over any element on the page — it highlights with a blue border. Click to capture just that element.

Settings

Click the gear icon in the side panel to configure:

• GitHub — Personal Access Token (needs repo scope) + default repository (owner/repo)
• Jira — Domain (yourcompany.atlassian.net), email, API token, default project key
• Slack — Incoming Webhook URL

Project Structure

bugshot/
├── manifest.json                # Chrome Extension Manifest V3
├── background.js                # Service worker: capture, storage, API calls
├── content/
│   ├── interceptor.js           # MAIN world: console/network/interaction tracking
│   └── content-bridge.js        # ISOLATED world: message relay, element selection
├── popup/
│   ├── popup.html               # Extension popup
│   ├── popup.css
│   └── popup.js
├── sidepanel/
│   ├── sidepanel.html           # Main app UI
│   ├── sidepanel.css
│   ├── sidepanel.js             # Report form, exports, integrations
│   └── annotation-editor.js     # Canvas-based annotation tools
└── icons/
    ├── icon16.png
    ├── icon32.png
    ├── icon48.png
    └── icon128.png

Technical Details

• Manifest V3 — Service worker, no persistent background page
• No build step — Plain HTML/CSS/JS, load directly as unpacked extension
• No dependencies — Zero npm packages, everything is vanilla
• Canvas 2D API — Annotation editor built from scratch, no external libraries
• Circular buffers — Capped at 50 console entries, 100 network entries, 30 repro steps per tab
• Batched broadcasting — Interceptor debounces at 100ms to avoid flooding
• Privacy-first — Blur/redact tool for sensitive data. No data sent anywhere unless you explicitly export.

License

MIT