Turn real API traffic into MSW mocks

The idea

Every frontend team that tests components against MSW pays the same tax: someone opens the Network tab, copies JSON blobs by hand, pastes them into fixture files, and writes handler boilerplate around them. It is pure transcription work, it goes stale the moment the API changes, and the fixtures are usually trimmed guesses rather than real payloads.

HAR export has existed forever, which proves the capture side is solved; the missing last mile is the transform into idiomatic MSW v2 handlers with URL patterns and typed fixtures. That transform is mechanical and nobody has shipped it. A DevTools-native recorder that outputs a handlers.ts you commit without editing turns an afternoon of toil into a click.

Who pays

The buyer is an individual frontend developer or a team lead who expenses it: a 29 dollar one-off licence, with the free tier capped at three endpoints per export so the tool proves itself before asking. Distribution is the Chrome Web Store plus the MSW ecosystem itself: Testing Library and MSW Discord communities, and a launch post showing a real capture-to-committed-test workflow in under a minute.

MVP scope

• DevTools panel that records XHR/fetch JSON traffic on the active tab
• Endpoint grouping with automatic ID-to-param path normalisation
• Export of MSW v2 handlers.ts plus JSON fixture files as a zip
• TypeScript interfaces inferred from merged response samples
• Offline licence key unlocking unlimited endpoints
• Skip for v1: GraphQL operations, Firefox support, cloud sync or accounts, watching for API drift

Build MockCatcher, a Chrome extension (Manifest V3, TypeScript) that records real API traffic and exports idiomatic MSW v2 handlers with typed fixtures.

Core flow: user opens the extension panel (a DevTools panel, not a popup, so it sits next to the Network tab), hits Record, and uses their app normally. Capture XHR and fetch on the active tab via the chrome.devtools.network API, storing method, URL, status, request body and response JSON. Ignore non-JSON responses and third-party analytics domains by default, with an editable ignore list.

Grouping: normalise captured URLs into endpoint patterns by detecting path segments that look like IDs (numeric, UUID, cuid) and replacing them with :param placeholders, so /users/42/orders/9f3c becomes /users/:userId/orders/:orderId. Show the grouped endpoint list with request counts; user ticks the endpoints they want.

Export: generate a handlers.ts using MSW v2 syntax (http.get, HttpResponse.json), one handler per endpoint importing its fixture from a fixtures/ folder of JSON files, plus generated TypeScript interfaces inferred from the response shape (merge multiple samples of the same endpoint into one type, marking fields optional when absent in some samples). Download as a zip. When an endpoint had multiple distinct responses, emit a commented switch on request params.

No backend, no accounts; everything stays local. Monetise with a 29 dollar one-off licence unlocking export of more than 3 endpoints, licence key checked offline.