EchoKit Documentation

EchoKit is a Chrome Manifest V3 extension that records fetch and XMLHttpRequest traffic from any tab, then replays user-edited responses for those same requests. It runs entirely in your browser.

Install

Until published to the Chrome Web Store:

git clone https://github.com/ravitejakamalapuram/echokit.git
# chrome://extensions → Developer mode → Load unpacked → pick echokit/extension/

The 30-second flow

1. Click the EchoKit toolbar icon on any page.
2. Press ● REC. Use your app normally.
3. Hit STOP. Flip the master MOCK switch.
4. Click any request. Edit body / status / headers / latency / error.
5. Reload the page. You're hitting your mocks now. Amber banner = unmissable reminder.

Match modes

For each recorded API, pick a match mode in the detail view:

• strict — method + normalized URL + normalized body (default). Sorted query params; JSON bodies canonicalized.
• ignore-query — method + path + body. Useful when your app sends cache-buster params.
• ignore-body — method + URL. Matches any body for this URL.
• path-wildcard — method + path. Matches any query, any body. Great for broad stub endpoints.
• graphql — method + endpoint + operationName + query fingerprint + variables. GraphQL-aware matching.
• graphql-op — same as above but ignoring variables.

Scope system

Settings → Scope controls what recordings are visible on the active tab and which mocks can fire:

• Domain (default) — recordings made on api.foo.com are visible on any tab open on api.foo.com.
• Tab (strict) — each tab is a sandbox. Cross-tab sharing only via Export/Import.
• Global — all recordings visible everywhere. Best for demos; noisy in daily use.

Click the scope: chip in the footer to cycle modes in one click.

Error simulation

Per-API dropdown: none, 4xx, 5xx, network failure, timeout. Combined with the latency slider, you can reproduce any flaky backend scenario.

URL blocklist

Settings → URL Blocklist. Add any Chrome urlFilter pattern (e.g. ||analytics.example.com^, *tracking*, /ads/). Blocked requests never hit the network, never get recorded. Implemented via declarativeNetRequest dynamic rules.

CORS override

Settings → CORS Override. Injects Access-Control-Allow-Origin: *, *-Methods, *-Headers, *-Credentials: true into every real response. Use only for local debugging.

Export / Import mocks

Menu → Export JSON: downloads an echokit-export-*.json file containing every recorded interaction + overrides + match keys. Menu → Import JSON: paste/upload. Choose Merge (replace by id) or Override (wipe existing first). Perfect for committing mock sets into your repo.

localStorage copy/paste

Two menu items:

• Copy localStorage — reads the active tab's localStorage and writes a tagged JSON payload to your clipboard.
• Paste localStorage — auto-detects an EchoKit payload on the clipboard (shown inline with key count + origin). Click to open a confirmation dialog listing up to 10 keys. Tick Clear existing for a clean replace.

Origins differ? A warning appears before you commit. Reload the target tab after pasting.

Keyboard shortcuts

• Alt+Shift+R — toggle recording on active tab
• Alt+Shift+M — toggle MOCK mode on active tab
• Alt+Shift+E — open the popup

Remap at chrome://extensions/shortcuts.

Architecture

injected.js (MAIN world)  ⇄postMessage⇄  content.js (isolated)  ⇄runtime⇄  background.js (SW)
                                                                                    │
                                                            IndexedDB + DNR rules + scripting.executeScript
popup/popup.js  ─────────────────────────────────────────────────────
                                                     shared/app.js (single UI module)
devtools/panel.js  ──────────────────────────────────────────

See extension/README.md for the full file map and design decisions.