基于 WXT 与 React 的浏览器扩展：在 Chrome 开发者工具 中抓取 HTTP 流量，对请求/响应做摘要与裁剪，并通过 兼容 OpenAI 的 API 生成接口的简短说明与详细说明（提示词默认要求使用简体中文输出描述）。
语言： English · 简体中文（本页）
- DevTools 面板（名称：
Auto Scrape AI）：开始/停止录制、以表格展示已捕获请求、显示桥接/录制状态提示。 - 网络抓取：在 DevTools 扩展上下文中使用
chrome.devtools.network（可稳定读取 响应体）。 - 过滤规则：域名（正则或
current-tab-host）、HTTP 方法、扩展名（如.js、.css、图片等）、以及按 Content-Type 忽略图片/音视频、text/plain、常见二进制与流媒体类型。 - 数据精炼：请求头黑名单、JSON 数组截断与同结构去重、可配置的响应体长度与数组条数上限。
- AI 分析：使用 OpenAI 官方 SDK，连接用户在选项里配置的 Base URL、API Key、模型；内置并发队列（默认最多 2 路）、单次分析超时（60 秒）、界面可重试；提示词侧会压缩摘要，并对同一 URL 路径下重复的响应摘要做占位替换以节省 token。
- 界面：Ant Design 中文语言包 + Tailwind CSS v4（
assets/tailwind.css中引入antd/dist/reset.css）。
- 访问项目的 GitHub Releases 页面
- 下载最新版本的
.zip文件（例如auto-scrape-ai-1.0.0.zip） - 解压下载的
.zip文件到本地目录 - 打开 Chrome 浏览器，进入
chrome://extensions/ - 开启右上角的 开发者模式
- 点击 加载已解压的扩展程序，选择解压后的目录
- 在目标页面按 F12，切换到 Auto Scrape AI 面板
- 在 扩展选项 中填写 API 与过滤、采样等设置
bun install
cp .env.example .env.local # 可选：本地默认配置（见下文）
bun run dev在 chrome://extensions 中加载 未打包扩展，目录一般为 .output/chrome-mv3-dev（具体以当前 WXT 版本为准）。在目标页面按 F12，切换到 Auto Scrape AI 面板。在 扩展选项 中填写 API 与过滤、采样等设置。
在 chrome://extensions → Auto Scrape AI → 扩展程序选项（或通过弹窗调用 browser.runtime.openOptionsPage()）。
构建时 WXT 会将环境变量注入 import.meta.env。以下变量用于生成默认设置，并与 browser.storage.local 中的用户配置合并（实现见 lib/types/defaults.ts）：
| 变量 | 作用 |
|---|---|
WXT_DEFAULT_OPENAI_API_KEY |
默认 API Key |
WXT_DEFAULT_OPENAI_BASE_URL |
兼容 OpenAI 的 Base URL（如 https://api.openai.com/v1） |
WXT_DEFAULT_OPENAI_MODEL |
模型 ID |
WXT_DEFAULT_INCLUDE_RULES |
逗号或换行分隔；可使用 current-tab-host 或主机正则 |
WXT_DEFAULT_TARGET_LANGUAGE |
分析相关偏好（写入设置） |
WXT_DEFAULT_SCHEMA_TYPE |
结构/风格偏好（写入设置） |
可将 .env.example 复制为 .env.local 后修改。请勿将密钥提交到版本库。
| 路径 | 说明 |
|---|---|
entrypoints/background.ts |
后台 Service Worker |
entrypoints/devtools/ |
DevTools 引导页、桥接、网络抓取（capture.ts） |
entrypoints/devtools-panel/ |
DevTools 面板 React 界面（表格、AI 分析、详情抽屉） |
entrypoints/popup/、entrypoints/options/ |
工具栏弹窗与选项页 |
entrypoints/content.ts |
内容脚本（如启用） |
components/ |
可复用 React 组件（Markdown 渲染、代码高亮） |
assets/tailwind.css |
Tailwind v4 与 Ant Design reset |
public/ |
静态资源（图标、Logo） |
lib/types/ |
设置与 CapturedRequest 等类型 |
lib/messages.ts |
runtime.connect 桥接消息类型 |
lib/filter.ts |
过滤与路径扩展名 |
lib/refine.ts |
refineRequest、truncateJsonArrays |
lib/ai/analyze-request.ts |
OpenAI 调用、提示词、EndpointAnalysis 解析 |
lib/settings-storage.ts |
storage.local 读写与校验 |
lib/messaging/bridge-role.ts |
区分 DevTools 与面板端的端口 |
docs/tasks/ |
分任务实现说明 |
docs/AI-FEATURES.md |
AI 功能详细说明与扩展方案 |
完整响应体只在 DevTools 脚本中通过 chrome.devtools.network 读取，单独的面板页面无法替代这一能力。面板通过后台/DevTools 桥接（lib/messages.ts 中的 BRIDGE_PORT_NAME）接收捕获数据。总体分工见 lib/architecture.ts。
数据流：
DevTools (capture.ts) → runtime.connect bridge → Background (relay) → Panel (UI)
| 命令 | 说明 |
|---|---|
bun install |
安装依赖（自动运行 wxt prepare） |
bun run dev |
WXT 开发模式 |
bun run dev:firefox |
Firefox 开发模式 |
bun run build |
生产构建 |
bun run build:firefox |
Firefox 生产构建 |
bun run zip |
构建 Chrome 扩展发布包（.zip 文件） |
bun run zip:firefox |
构建 Firefox 扩展发布包（.zip 文件） |
bun run compile |
tsc --noEmit |
bun test / bun test lib/ |
单元测试（如精炼逻辑） |
bun run check / bun run fix |
Ultracite（Biome）检查或自动修复 |
- Biome：通过 Ultracite 预设配置，统一代码风格与 Lint 规则
- Lefthook：Git pre-commit 钩子，提交前自动运行
ultracite fix格式化暂存文件 - TypeScript：严格模式，
tsc --noEmit类型检查
项目使用 GitHub Actions 自动发布：
- 推送
v*标签时触发（如git tag v1.0.0 && git push --tags） - 自动安装依赖、构建、打包
.zip - 创建 GitHub Release 并上传构建产物
详见 .github/workflows/release.yml。
| 类别 | 技术 |
|---|---|
| 构建工具 | WXT（浏览器扩展框架） |
| 前端 | React 19 + Ant Design 5 + Tailwind CSS v4 |
| AI | OpenAI SDK（兼容任意 OpenAI API 兼容服务） |
| 语言 | TypeScript 5（严格模式） |
| 包管理 | Bun |
| 代码质量 | Biome（Ultracite 预设）+ Lefthook |
| Markdown | react-markdown + remark-gfm + Shiki 代码高亮 |
API Key 与抓取的流量仅在扩展与用户配置的 AI 服务端之间处理；使用前请遵守服务商条款及目标网站的规则与法律要求。