Capture evidence locally before defining any sharing path
Capture and filter evidence inside the extension first so downloading remains the default and email delivery is a separate, explicit boundary.
BugReceipt
extension
Local-first Chrome extension that combines privacy-filtered console, network, reproduction-step, environment, and visual evidence in a reviewable browser bug report.
- Role
- Product design and browser-extension engineering
- Scope
- Capture lifecycle, privacy boundaries, review workflows, and release delivery
- Status
- Public pre-release
Problem
Screenshots and vague descriptions rarely preserve the sequence, browser evidence, environment, and visual result developers need to reproduce a web application failure.
Constraints
- C1
Browser diagnostics and screen recordings can expose sensitive information, while local filtering cannot guarantee that every secret will be recognized.
- C2
Chrome permission, selected-tab, service-worker, navigation, and storage boundaries must remain understandable during a capture.
- C3
Email delivery crosses a separate network boundary and must not bundle server credentials or silently transmit evidence.
Architecture
WXT Manifest V3 side panel, selected-tab recorder, review page, and background capture lifecycle; isolated page instrumentation feeding typed capture contracts; deterministic local privacy filtering and report rendering; extension storage and IndexedDB with local export or explicit Resend delivery through a TanStack Start endpoint.
01
Capture interface
Persistent React side panel, selected-tab recorder, manual steps, and editable review page.
02
Session domain
Background-owned capture lifecycle and Zod-validated extension message contracts.
03
Privacy and storage
Bounded local filtering with extension storage for session data and IndexedDB for visual evidence.
04
Export and delivery
Markdown and visual report bundles stay local unless the user explicitly invokes the server-side Resend path.
Decisions
Make review part of the data pipeline
Open an editable review surface before export so users can remove individual steps, diagnostics, and visual artifacts after automated filtering.
Bound diagnostics instead of collecting the entire page
Record selected console and network evidence without collecting DOM snapshots, cookies, browser storage, headers, form values, keystrokes, clipboard contents, or audio.
Contribution
- Designed the selected-tab capture, manual-step, stop, review, edit, download, copy, and explicit email journeys.
- Implemented background session ownership, isolated page instrumentation, cross-origin interruption handling, and persistent evidence storage.
- Built deterministic filtering for URLs, diagnostic text, supported response bodies, tokens, email addresses, and secret-shaped fields.
- Created the TanStack Start delivery endpoint, Resend boundary, deterministic broken-app fixture, CI quality gate, and checksummed Chrome release workflow.
Outcomes
- Reporters can preserve reproduction steps, bounded console and network evidence, environment details, and a recording or screenshot in one workflow.
- Every captured item remains reviewable and removable before it leaves extension-owned storage.
- Users can export a local Markdown-and-visual bundle or deliberately send a size-bounded report through the configured endpoint.
- Maintainers can exercise known failures and ship verifiable unpacked Chrome archives with published checksums.
Product screenshot
Verified stack
- WXT
- React 19
- TypeScript
- Chrome Manifest V3
- Chrome Extensions API
- Tailwind CSS
- TanStack Start
- Zod
- JSZip
- Resend
- Vitest
- React Testing Library
- Netlify
- GitHub Actions
- CI/CD
- System Design
Working through something similar?
Share your challenge, scope, and timeline to start a focused conversation.