Mahdi-hasan-shuvo/network-capture-pro-chrome-extension

## ✨ 为什么选择 Network Capture Pro？ Chrome DevTools 的 Network 面板很好用——直到你关闭它。然后所有数据都消失了。HAR 导出会丢失响应体。浏览器扩展只能看到请求头。 **Network Capture Pro** 使用 **Chrome DevTools Protocol**（与驱动 DevTools 本身的引擎相同）来记录**完整的请求和响应**，包括二进制响应体、解码后的 Cookies、解析后的 JSON/表单 POST 数据、重定向以及 WebSocket 帧——并将其打包成一个美观且可浏览的 ZIP 压缩包，你可以将其发送给你的团队、附加到缺陷报告中、在 Postman 中重放，或输入到你自己的脚本中。 ## 🎯 功能亮点 | | | |---|---| | 📡 **全量请求捕获** | URL · 方法 · 全部请求头 · cookies · 查询参数 · POST 请求体（原始 + 解析后的 JSON / 表单）· 发起者 · 帧 · 资源类型 | | 📥 **全量响应捕获** | 状态码 · 状态文本 · 全部请求头 · `Set-Cookie`（解析为对象）· MIME · 远程 IP:端口 · 协议 · 时间信息 · 安全详细信息 · **响应体（文本或 Base64 二进制）** | | ⚡ **一键导出 ZIP** | 每个请求的 `.json` 文件、原始响应体、POST 数据、Cookies、摘要、HAR、CSV 以及可点击的 `index.html`——全部包含在一个压缩包中 | | 📊 **多种导出格式** | **ZIP** · **JSON** · **HAR**（适用于 Postman/Charles/DevTools）· **CSV**（适用于 Excel/电子表格） | | 🎛️ **实时控制** | 开始 · 暂停 · 继续 · 停止 · 清除——带有实时请求计数器、字节计数器、已用时间计时器，以及工具栏图标上的录制徽章 | | 🔍 **智能过滤** | 按 URL、方法、状态码、MIME 或资源类型过滤——在弹出窗口和完整面板中具有相同的过滤器 | | 🪟 **三种 UI** | 紧凑的工具栏**弹出窗口** · 全页面**面板** · 嵌入式 **DevTools 标签页** | | 🍪 **站点数据工具** | 一键**清除 Cookies** 和**清除缓存**针对目标源（无需清空所有内容） | | 🔁 **标签页工具** | 打开/聚焦捕获的标签页 · 重新加载 · 硬性重新加载（绕过缓存） | | 💾 **在 SW 重启后幸存** | 所有请求均持久化至 `chrome.storage.local`——如果 Chrome 让 Service Worker 休眠，你也不会丢失长时间的捕获记录 | | 🛡️ **隐私优先** | 100% 本地运行。零网络调用。零分析。零依赖。支持离线使用。 | ## 📸 截图 ``` ┌──────────────────────────────────────┐ │ ● 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│ └──────────────────────────────────────┘ ``` ## 🚀 快速入门 ### 1. 安装（解压加载） ``` git clone https://github.com//network-capture-pro-chrome-extension.git ``` 1. 打开 Chrome 并访问 `chrome://extensions` 2. 开启右上角的 **Developer mode**（开发者模式） 3. 点击 **Load unpacked**（加载已解压的扩展程序） 4. 选择克隆下来的文件夹 5. 将该扩展程序固定到工具栏——完成！ ### 2. 捕获会话 1. 打开你要检查的网站 2. 点击 **Network Capture Pro** 图标 3. 按下 **● Start**——Chrome 会显示一条黄色的“此标签页正在受到调试”通知（这是使用 DevTools Protocol 所必需的；请不要理会它） 4. 正常使用网站——登录、点击四处、提交表单…… 5. 按下 **■ Stop** 6. 按下 **⬇ ZIP**——一个完整的压缩包就会保存到你的下载文件夹中 ### 3. 读取捕获内容 将其解压，在浏览器中打开 `index.html`，然后点击任意请求即可查看其完整的 JSON。或者： - 在 Chrome DevTools / Postman / Charles / Insomnia 中打开 `capture.har` - 在 Excel / Google Sheets 中打开 `capture.csv` - 将 `all_requests.json` 拖入你最喜欢的 jq / Python / Node 脚本中 ## 📦 ZIP 文件里有什么？ ``` 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 ``` ## 🔧 使用场景 - 🐛 **缺陷报告**——附上 ZIP 压缩包，让你的后端团队重放确切的会话 - 🔬 **逆向工程 API**——查看每一个未记录在文档中的请求头、查询参数和 Cookie - 🎯 **API 测试**——导出为 HAR → 导入到 Postman → 立即生成集合 - 🍪 **Auth 调试**——查看每一个 Set-Cookie、每一个被阻止的 Cookie、每一个 SameSite 问题 - 📊 **性能分析**——在 CSV 中获取完整的时间信息 + 字节计数 - 🛡️ **安全研究**——审计网站发送和接收的内容（仅限经授权的测试） - 🤖 **Web 抓取准备**——捕获一次，然后根据保存的请求文件构建你的抓取器 - 📚 **教学**——向学生准确展示通过网络传输的“登录”是什么样子 ## 🧱 技术栈 - **Manifest V3** Chrome 扩展程序 - **Chrome DevTools Protocol** 通过 `chrome.debugger`（完整的请求/响应，包括请求体） - **Offscreen Document API** 用于构建 blob（Chrome 的 MV3 Service Worker 替代方案） - **`chrome.browsingData`** 用于按源清除 Cookie/缓存 - **`chrome.storage.local`** 用于在 SW 重启后持久化捕获的数据 - **纯 JS ZIP 编写器**——STORE 方法，无压缩，约 100 行代码，**零 npm 依赖** - **原生 HTML/CSS/JS**——无需 React，无需构建步骤，无需打包工具，无需转译器 ## 📂 项目结构 ``` . ├─ 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 ``` ## 🔐 权限说明 | 权限 | 为什么需要它 | |---|---| | `debugger` | 这是读取完整响应体的唯一方式 | | `` | 允许调试器附加到你正在捕获的任何标签页 | | `storage` | 在 Service Worker 重启后持久化保存捕获的请求 | | `downloads` | 保存你的 ZIP / JSON / HAR / CSV 文件 | | `tabs`、`activeTab` | 知道要附加到哪个标签页并进行报告 | | `cookies` | 读取被捕获站点的 Cookie 元数据 | | `browsingData` | 为按源设定的“清除 Cookies”/“清除缓存”按钮提供支持 | | `offscreen` | 构建 blob URL（Service Worker 在 MV3 中无法创建 blob URL） | | `webNavigation`、`scripting` | 为即将推出的自动附加模式保留 | **任何数据都不会离开你的设备。** 无分析，无遥测，无远程主机，无来自 CDN 的字体。你可以审计 `background.js`——除了你正在捕获的页面之外，对其他任何内容绝对没有 `fetch()` 调用。 ## ❓ 常见问题

为什么页面顶部会有一个黄色栏？

这是当任何扩展程序使用 `chrome.debugger` 时 Chrome 的必要提示。它无法被隐藏——这是一项安全功能。当你关闭该栏时，扩展程序会立即停止捕获。

我可以在捕获时打开 DevTools 吗？

不行——Chrome 一次只允许每个标签页有**一个**调试器客户端。要么在没有 DevTools 的窗口中进行捕获，要么使用内置的 **DevTools 面板**（Network Capture 标签页）来代替弹出窗口。

它会使页面变慢吗？

CDP 带来的开销与打开 DevTools 的 Network 面板是一样的——通常无法察觉。

非常大的响应体会怎样处理？

Chrome 自身会拒绝通过 CDP 返回过大的响应体——这些响应体会被记录为一个 `responseBodyError` 字段。请求头、Cookies 和时间信息始终会被捕获。

为什么我的弹出窗口显示 "Stale SW — reload extension!"？

你更新了扩展程序代码但没有重新加载 Service Worker。请转到 `chrome://extensions` 并点击 Network Capture Pro 卡片上的 ↻ 图标。

我可以同时捕获多个标签页吗？

目前一次只能捕获一个标签页。多标签页捕获已在路线图中。

## 🗺️ 路线图 - [ ] 自动附加模式（在打开标签页时无需点击 Start 即可进行捕获） - [ ] 多标签页同时捕获 - [ ] 每个请求的 cURL / fetch / Python `requests` 代码片段生成器 - [ ] 直接从面板重放请求 - [ ] ZIP 编写器中的可选 gzip 压缩 - [ ] 已保存捕获记录的查看器（将 ZIP 拖到弹出窗口上 → 浏览它） - [ ] 自定义 URL 包含/排除允许列表 - [ ] 深色 / 浅色主题切换 ## ⚖️ 许可证 MIT——详见 [LICENSE](LICENSE)。随你使用、复刻、发布、售卖。如果能点个 ⭐ 我们将不胜感激，但这绝不是必须的。 ## 🙏 鸣谢 由咖啡因、原生 JavaScript 和 Chrome DevTools Protocol 精心构建。 如果这款工具为你省下了一个调试的下午，请给该仓库点个 ⭐——这真的能帮助其他人发现它。 # Damo https://github.com/user-attachments/assets/136cc793-11bb-414d-b2f3-030d36b40da3

**专为开发者、安全研究人员、QA 工程师以及任何曾经希望 DevTools 有一个“保存所有内容”按钮的人而打造。**

## 📬 联系方式 有问题、发现了 Bug，或者想在付费项目上合作？ | | | |---|---| | 📩 **邮箱** | [shuvobbhh@gmail.com](mailto:shuvobbhh@gmail.com) | | 💬 **WhatsApp** | [+8801616397082](https://wa.me/8801616397082) | | 🌐 **作品集 / 网站** | [mahdi-hasan-shuvo.github.io](https://mahdi-hasan-shuvo.github.io/) |

标签：API测试, API调试, Chrome DevTools Protocol, Cookie捕获, DNS枚举, HAR导出, HTTP请求捕获, JSON导出, Manifest V3, Post数据捕获, Syscall, WebSocket监听, Web开发, ZIP导出, 前端调试, 响应体捕获, 开发辅助工具, 抓包工具, 抓包软件, 数据可视化, 数据导出, 服务管理, 本地处理, 流量录制, 浏览器插件, 网络安全, 网络安全工具, 网络抓包, 自定义脚本, 请求头捕获, 隐私保护, 零依赖