A Chrome extension that captures every single network request on any website — and exports the whole session as a ready-to-share ZIP, JSON, HAR or CSV in one click.
Headers · Cookies · Query params · POST body · Response body · Set-Cookie · Timings · WebSocket frames — all of it, every request, every byte.
Chrome DevTools' Network panel is great — until you close it. Then everything's gone. HAR exports lose response bodies. Browser extensions only see headers.
Network Capture Pro uses the Chrome DevTools Protocol (the same engine that powers DevTools itself) to record the full request and response, including binary response bodies, decoded cookies, parsed JSON/form post data, redirects and WebSocket frames — and packages it into a beautiful, browsable ZIP archive you can send to your team, attach to a bug report, replay in Postman, or feed into your own scripts.
One click → a ZIP that contains every request as its own file, every response body saved with the right extension (
.json,.html,.png,.bin…), a CSV summary, a HAR for DevTools, and anindex.htmlyou can open and click through. Zero external libraries. Zero telemetry.
| 📡 Full request capture | URL · method · all headers · cookies · query params · POST body (raw + parsed JSON / form) · initiator · frame · resource type |
| 📥 Full response capture | Status · status text · all headers · Set-Cookie (parsed into objects) · MIME · remote IP:port · protocol · timings · security details · response body (text or base64 binary) |
| ⚡ One-click ZIP export | Per-request .json files, raw response bodies, post-data, cookies, summary, HAR, CSV, and a clickable index.html — all in one archive |
| 📊 Multiple export formats | ZIP · JSON · HAR (for Postman/Charles/DevTools) · CSV (for Excel/sheets) |
| 🎛️ Live controls | Start · Pause · Resume · Stop · Clear — with live request counter, byte counter, elapsed timer, and a recording badge on the toolbar icon |
| 🔍 Smart filters | Filter by URL, method, status, MIME, or resource type — same filters in popup and full panel |
| 🪟 Three UIs | Compact toolbar popup · full-page panel · embedded DevTools tab |
| 🍪 Site-data tools | One-click Clear cookies and Clear cache for the target origin (no need to nuke everything) |
| 🔁 Tab tools | Open / focus the captured tab · Reload · Hard reload (bypass cache) |
| 💾 Survives SW restarts | All requests persisted to chrome.storage.local — you won't lose a long capture if Chrome puts the service worker to sleep |
| 🛡️ Privacy-first | 100% local. Zero network calls. Zero analytics. Zero dependencies. Works offline. |
Add your own screenshots here — drop them into
docs/and reference them like.
┌──────────────────────────────────────┐
│ ● Network Capture Pro v1.1.0 │
├──────────────────────────────────────┤
│ Requests │ Elapsed │ Data │ Started │
│ 142 │ 03:21 │ 2.4MB │ 14:02 │
├──────────────────────────────────────┤
│ [● Start] [‖ Pause] [■ Stop] [Clear] │
├──────────────────────────────────────┤
│ Download │
│ [⬇ ZIP] [⬇ JSON] [⬇ HAR] [⬇ CSV] │
├──────────────────────────────────────┤
│ Target site │
│ Site: https://example.com/login │
│ [Open / focus] [Reload] [Hard reload]│
│ [Clear cookies] [Clear cache] │
├──────────────────────────────────────┤
│ Filter: [____] [All types ▾] [GET ▾]│
│ GET 200 example.com/api/me 120ms│
│ POST 201 example.com/login 340ms│
│ GET 304 example.com/style.css 8ms│
└──────────────────────────────────────┘
git clone https://github.com/<your-username>/network-capture-pro-chrome-extension.git- Open Chrome and visit
chrome://extensions - Toggle Developer mode (top-right)
- Click Load unpacked
- Select the cloned folder
- Pin the extension to the toolbar — done!
- Open the website you want to inspect
- Click the Network Capture Pro icon
- Press ● Start — Chrome will show a yellow "this tab is being debugged" notice (this is required for the DevTools Protocol; leave it alone)
- Use the website normally — log in, click around, submit forms…
- Press ■ Stop
- Press ⬇ ZIP — a complete archive lands in your Downloads folder
Unzip it, open index.html in your browser, and click any request to see its full JSON. Or:
- Open
capture.harin Chrome DevTools / Postman / Charles / Insomnia - Open
capture.csvin Excel / Google Sheets - Drop
all_requests.jsoninto your favourite jq / Python / Node script
network_capture_2026-04-28T14-02-33Z.zip
├─ index.html ← clickable browsable summary
├─ summary.json ← capture metadata (start/end/bytes/tab)
├─ all_requests.json ← every request in one big file
├─ capture.har ← HAR 1.2 — open in DevTools/Postman
├─ capture.csv ← spreadsheet-friendly summary
├─ counter_and_time.txt ← human-readable counter & timings
│
├─ requests/ ← one JSON per request, with EVERYTHING
│ ├─ 00001_example.com_GET.json
│ ├─ 00002_api.example.com_POST.json
│ └─ …
│
├─ bodies/ ← raw response bodies, correct extension
│ ├─ 00001_example.com.html
│ ├─ 00002_api.example.com.json
│ ├─ 00003_cdn.example.com.png
│ └─ …
│
├─ post_data/ ← raw POST/PUT bodies
│ └─ 00002_api.example.com.txt
│
└─ cookies/
├─ request_cookies.json ← every cookie sent, with origin URL
└─ response_cookies.json ← every Set-Cookie, parsed into fields
- 🐛 Bug reports — attach the ZIP and let your backend team replay the exact session
- 🔬 Reverse-engineering APIs — see every undocumented header, query param and cookie
- 🎯 API testing — export to HAR → import to Postman → instant collection
- 🍪 Auth debugging — see every Set-Cookie, every blocked cookie, every SameSite issue
- 📊 Performance analysis — full timings + byte counts in the CSV
- 🛡️ Security research — audit what a site sends and receives (authorized testing only)
- 🤖 Web scraping prep — capture once, then build your scraper from the saved request files
- 📚 Teaching — show students exactly what a "login" looks like over the wire
- Manifest V3 Chrome extension
- Chrome DevTools Protocol via
chrome.debugger(full request/response, including bodies) - Offscreen Document API for blob building (Chrome's MV3 service-worker workaround)
chrome.browsingDatafor per-origin cookie/cache clearingchrome.storage.localfor capture persistence across SW restarts- Pure-JS ZIP writer — STORE method, no compression, ~100 lines, zero npm dependencies
- Vanilla HTML/CSS/JS — no React, no build step, no bundler, no transpiler
.
├─ manifest.json ← MV3 manifest, permissions, entry points
├─ background.js ← service worker; CDP capture, persistence, downloads
├─ offscreen.html / .js ← builds ZIP/JSON/HAR/CSV blobs (BLOBS reason)
├─ zip.js ← tiny in-house ZIP writer (STORE-method)
├─ popup.html / .css / .js ← compact toolbar UI
├─ panel.html / panel.js ← full split-view with detail tabs (Overview/Request/Response/Cookies/Body/Raw)
└─ devtools.html / .js ← registers the "Network Capture" tab inside DevTools
| Permission | Why it's needed |
|---|---|
debugger |
The only way to read full response bodies (DevTools Protocol) |
<all_urls> |
Lets the debugger attach to whichever tab you're capturing |
storage |
Persists captured requests across service-worker restarts |
downloads |
Saves your ZIP / JSON / HAR / CSV files |
tabs, activeTab |
Knows which tab to attach to and report on |
cookies |
Reads cookie metadata for the captured site |
browsingData |
Powers per-origin "Clear cookies" / "Clear cache" buttons |
offscreen |
Builds blob URLs (service workers can't create blob URLs in MV3) |
webNavigation, scripting |
Reserved for upcoming auto-attach mode |
No data ever leaves your machine. No analytics, no telemetry, no remote hosts, no fonts from CDNs. Audit background.js — there are zero fetch() calls to anything but the page you're capturing.
Why a yellow bar at the top of the page?
That's Chrome's required notice when any extension uses chrome.debugger. It cannot be hidden — it's a security feature. The extension stops capturing the moment you close that bar.
Can I have DevTools open while capturing?
No — Chrome only allows one debugger client per tab at a time. Either capture from a window without DevTools, or use the built-in DevTools panel (Network Capture tab) instead of the popup.
Will it slow down the page?
The CDP overhead is the same as having DevTools' Network panel open — usually unnoticeable.
What about huge response bodies?
Chrome itself will refuse to return very large response bodies through CDP — those are recorded with a responseBodyError field instead. Headers, cookies and timings are always captured.
Why does my popup say "Stale SW — reload extension!"?
You updated the extension code but didn't reload the service worker. Go to chrome://extensions and click the ↻ icon on the Network Capture Pro card.
Can I capture multiple tabs at once?
Currently one tab at a time. Multi-tab is on the roadmap.
- Auto-attach mode (capture on tab open without clicking Start)
- Multi-tab simultaneous capture
- cURL / fetch / Python
requestssnippet generator per request - Replay request directly from the panel
- Optional gzip compression in the ZIP writer
- Saved-capture viewer (drag a ZIP onto the popup → browse it)
- Custom URL include/exclude allow-list
- Dark / light theme toggle
PRs are welcome! The codebase is intentionally small (~1000 LOC, vanilla JS, no build step) so it's easy to dive in.
git clone https://github.com/<your-username>/network-capture-pro-chrome-extension.git
# load the folder unpacked at chrome://extensions
# edit, then click ↻ on the extension cardOpen an issue first if you're planning a big feature — happy to sketch the design with you.
MIT — see LICENSE. Use it, fork it, ship it, sell it. A star ⭐ is appreciated but never required.
Built with caffeine, vanilla JavaScript, and the Chrome DevTools Protocol.
If this saved you a debugging afternoon, please ⭐ the repo — it really does help others find it.
Video.Project.16.mp4
Made for developers, security researchers, QA engineers, and anyone who has ever wished DevTools had a "save everything" button.
Have a question, found a bug, or want to collaborate on a paid project?
| shuvobbhh@gmail.com | |
| +8801616397082 | |
| 🌐 Portfolio / Website | mahdi-hasan-shuvo.github.io |