At a glance
- Problem
- A screenshot can hide the viewport, zoom, and display conditions needed to reproduce a responsive bug.
- My contribution
- I designed, built, tested, and published a focused TypeScript and Preact extension that captures that context.
- Outcome
- Published on the Chrome Web Store with packaged-extension tests across three operating systems; publication establishes availability rather than adoption.
An optional working example
Can you reproduce the bug you can see?
Resize a real interface, catch a breakpoint defect, and take a reproduction with you.
A screenshot describes the symptom. Context makes it reproducible.
The popup and side panel reach the active tab through two permissions, compare it with a stored baseline, and export a Markdown issue.
In words
- The popup (popup.html) and the side panel (sidepanel.html) are the extension's two entry points.
- Both reach the inspected page through the activeTab and scripting permissions.
- From the active tab they read viewport, zoom, device pixel ratio, and active breakpoints.
- A captured baseline is kept with the storage permission.
- The Markdown export carries reproduction steps, metrics, and baseline deltas, with no page URL or title.
- The extension is Manifest V3, declares four permissions, and has no background service worker.
Derived from manifest.json on the default branch (version 2.1.0) and the README.
Engineering decisions
01decision
Capture the environment behind the screenshot
Viewport dimensions, browser zoom, device pixel ratio, and active breakpoints explain why two screenshots can disagree. Live metrics and baseline deltas make changes inspectable as the browser is resized.
02decision
Make the result portable
A guided baseline-to-issue workflow exports Markdown with reproduction steps, expected and actual behavior, current metrics, and baseline deltas. Page URLs and titles are excluded from the report.
TradeoffExcluding page URLs and titles keeps page identity out of the export; the reporter supplies the page reference separately.
03decision
Keep the extension's scope narrow
Manifest V3, Preact, and four permissions support a small local tool. Reproducible packaging and packaged-extension tests check the artifact that users install.
TradeoffFewer permissions and no telemetry mean no usage data either, so adoption cannot be measured from the extension itself.
What you can verify
- Published Chrome Web Store listing.
- The manifest declares Manifest V3 and exactly four permissions: activeTab, scripting, storage, and sidePanel.
- Public source, a responsive bug fixture, a Markdown issue export, and reproducible packaging.
- Unit, accessibility, and extension E2E checks configured across Linux, macOS, and Windows.
Source and release links checked .
Scope and limits
Publication establishes availability. It does not establish active adoption or improved team productivity. Browser metrics also cannot reproduce every aspect of a physical device's rendering.
A short walkthrough
- 01
Open a responsive page and record its baseline.
- 02
Resize or change zoom until the layout crosses a breakpoint.
- 03
Export the display context with the observed mismatch for a reproducible issue.