[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-80353":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":12,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":15,"stars30d":15,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":16,"rankGlobal":10,"rankLanguage":10,"license":10,"archived":17,"fork":17,"defaultBranch":18,"hasWiki":19,"hasPages":17,"topics":20,"createdAt":10,"pushedAt":10,"updatedAt":21,"readmeContent":22,"aiSummary":23,"trendingCount":15,"starSnapshotCount":15,"syncStatus":24,"lastSyncTime":25,"discoverSource":26},80353,"auto-scrape-ai","wangyi12358\u002Fauto-scrape-ai","wangyi12358","A WXT + React browser extension that captures HTTP traffic inside Chrome DevTools, refines request\u002Fresponse summaries, and uses an OpenAI-compatible API to produce short and detailed endpoint descriptions (the AI prompt asks for Simplified Chinese output by default).","",null,"TypeScript",62,9,1,0,40,false,"main",true,[],"2026-06-11 04:07:05","# Auto Scrape AI（Auto Scrape AI）\n\n基于 [WXT](https:\u002F\u002Fwxt.dev\u002F) 与 React 的浏览器扩展：在 **Chrome 开发者工具** 中抓取 HTTP 流量，对请求\u002F响应做摘要与裁剪，并通过 **兼容 OpenAI 的 API** 生成接口的简短说明与详细说明（提示词默认要求使用**简体中文**输出描述）。\n\n**语言：** [English](README.en.md) · 简体中文（本页）\n\n![Auto Scrape AI 示例截图](.\u002Fdocs\u002Fimages\u002Fexample1.png)\n\n## 功能概览\n\n- **DevTools 面板**（名称：`Auto Scrape AI`）：开始\u002F停止录制、以表格展示已捕获请求、显示桥接\u002F录制状态提示。\n- **网络抓取**：在 DevTools 扩展上下文中使用 `chrome.devtools.network`（可稳定读取 **响应体**）。\n- **过滤规则**：域名（正则或 `current-tab-host`）、HTTP 方法、扩展名（如 `.js`、`.css`、图片等）、以及按 Content-Type 忽略图片\u002F音视频、`text\u002Fplain`、常见二进制与流媒体类型。\n- **数据精炼**：请求头黑名单、JSON 数组截断与同结构去重、可配置的响应体长度与数组条数上限。\n- **AI 分析**：使用 OpenAI 官方 SDK，连接用户在选项里配置的 **Base URL**、**API Key**、**模型**；内置并发队列（默认最多 2 路）、单次分析超时（60 秒）、界面可重试；提示词侧会压缩摘要，并对同一 URL 路径下重复的响应摘要做占位替换以节省 token。\n- **界面**：[Ant Design](https:\u002F\u002Fant.design\u002F) 中文语言包 + **Tailwind CSS v4**（`assets\u002Ftailwind.css` 中引入 `antd\u002Fdist\u002Freset.css`）。\n\n## 快速开始\n\n### 方式一：从 GitHub Releases 下载预构建包\n\n1. 访问项目的 [GitHub Releases](https:\u002F\u002Fgithub.com\u002Fwangyi12358\u002Fauto-scrape-ai\u002Freleases) 页面\n2. 下载最新版本的 `.zip` 文件（例如 `auto-scrape-ai-1.0.0.zip`）\n3. 解压下载的 `.zip` 文件到本地目录\n4. 打开 Chrome 浏览器，进入 `chrome:\u002F\u002Fextensions\u002F`\n5. 开启右上角的 **开发者模式**\n6. 点击 **加载已解压的扩展程序**，选择解压后的目录\n7. 在目标页面按 **F12**，切换到 **Auto Scrape AI** 面板\n8. 在 **扩展选项** 中填写 API 与过滤、采样等设置\n\n### 方式二：从源码构建开发\n\n```bash\nbun install\ncp .env.example .env.local   # 可选：本地默认配置（见下文）\nbun run dev\n```\n\n在 `chrome:\u002F\u002Fextensions` 中加载 **未打包扩展**，目录一般为 `.output\u002Fchrome-mv3-dev`（具体以当前 WXT 版本为准）。在目标页面按 **F12**，切换到 **Auto Scrape AI** 面板。在 **扩展选项** 中填写 API 与过滤、采样等设置。\n\n## 配置说明\n\n### 选项页\n\n在 `chrome:\u002F\u002Fextensions` → **Auto Scrape AI** → **扩展程序选项**（或通过弹窗调用 `browser.runtime.openOptionsPage()`）。\n\n### 使用 `.env.local` 覆盖默认值\n\n构建时 WXT 会将环境变量注入 `import.meta.env`。以下变量用于生成**默认设置**，并与 `browser.storage.local` 中的用户配置合并（实现见 `lib\u002Ftypes\u002Fdefaults.ts`）：\n\n| 变量 | 作用 |\n|------|------|\n| `WXT_DEFAULT_OPENAI_API_KEY` | 默认 API Key |\n| `WXT_DEFAULT_OPENAI_BASE_URL` | 兼容 OpenAI 的 Base URL（如 `https:\u002F\u002Fapi.openai.com\u002Fv1`） |\n| `WXT_DEFAULT_OPENAI_MODEL` | 模型 ID |\n| `WXT_DEFAULT_INCLUDE_RULES` | 逗号或换行分隔；可使用 `current-tab-host` 或主机正则 |\n| `WXT_DEFAULT_TARGET_LANGUAGE` | 分析相关偏好（写入设置） |\n| `WXT_DEFAULT_SCHEMA_TYPE` | 结构\u002F风格偏好（写入设置） |\n\n可将 `.env.example` 复制为 `.env.local` 后修改。**请勿**将密钥提交到版本库。\n\n## 目录结构\n\n| 路径 | 说明 |\n|------|------|\n| `entrypoints\u002Fbackground.ts` | 后台 Service Worker |\n| `entrypoints\u002Fdevtools\u002F` | DevTools 引导页、桥接、**网络抓取**（`capture.ts`） |\n| `entrypoints\u002Fdevtools-panel\u002F` | DevTools 面板 React 界面（表格、AI 分析、详情抽屉） |\n| `entrypoints\u002Fpopup\u002F`、`entrypoints\u002Foptions\u002F` | 工具栏弹窗与选项页 |\n| `entrypoints\u002Fcontent.ts` | 内容脚本（如启用） |\n| `components\u002F` | 可复用 React 组件（Markdown 渲染、代码高亮） |\n| `assets\u002Ftailwind.css` | Tailwind v4 与 Ant Design reset |\n| `public\u002F` | 静态资源（图标、Logo） |\n| `lib\u002Ftypes\u002F` | 设置与 `CapturedRequest` 等类型 |\n| `lib\u002Fmessages.ts` | `runtime.connect` 桥接消息类型 |\n| `lib\u002Ffilter.ts` | 过滤与路径扩展名 |\n| `lib\u002Frefine.ts` | `refineRequest`、`truncateJsonArrays` |\n| `lib\u002Fai\u002Fanalyze-request.ts` | OpenAI 调用、提示词、`EndpointAnalysis` 解析 |\n| `lib\u002Fsettings-storage.ts` | `storage.local` 读写与校验 |\n| `lib\u002Fmessaging\u002Fbridge-role.ts` | 区分 DevTools 与面板端的端口 |\n| `docs\u002Ftasks\u002F` | 分任务实现说明 |\n| `docs\u002FAI-FEATURES.md` | AI 功能详细说明与扩展方案 |\n\n## 架构说明\n\n**完整响应体**只在 **DevTools** 脚本中通过 `chrome.devtools.network` 读取，单独的面板页面无法替代这一能力。面板通过后台\u002FDevTools 桥接（`lib\u002Fmessages.ts` 中的 `BRIDGE_PORT_NAME`）接收捕获数据。总体分工见 `lib\u002Farchitecture.ts`。\n\n**数据流**：\n```\nDevTools (capture.ts) → runtime.connect bridge → Background (relay) → Panel (UI)\n```\n\n## 脚本命令\n\n| 命令 | 说明 |\n|------|------|\n| `bun install` | 安装依赖（自动运行 `wxt prepare`） |\n| `bun run dev` | WXT 开发模式 |\n| `bun run dev:firefox` | Firefox 开发模式 |\n| `bun run build` | 生产构建 |\n| `bun run build:firefox` | Firefox 生产构建 |\n| `bun run zip` | 构建 Chrome 扩展发布包（.zip 文件） |\n| `bun run zip:firefox` | 构建 Firefox 扩展发布包（.zip 文件） |\n| `bun run compile` | `tsc --noEmit` |\n| `bun test` \u002F `bun test lib\u002F` | 单元测试（如精炼逻辑） |\n| `bun run check` \u002F `bun run fix` | Ultracite（Biome）检查或自动修复 |\n\n## 代码质量\n\n- **Biome**：通过 [Ultracite](https:\u002F\u002Fgithub.com\u002Fhunvreus\u002Fultracite) 预设配置，统一代码风格与 Lint 规则\n- **Lefthook**：Git pre-commit 钩子，提交前自动运行 `ultracite fix` 格式化暂存文件\n- **TypeScript**：严格模式，`tsc --noEmit` 类型检查\n\n## CI\u002FCD\n\n项目使用 GitHub Actions 自动发布：\n\n- 推送 `v*` 标签时触发（如 `git tag v1.0.0 && git push --tags`）\n- 自动安装依赖、构建、打包 `.zip`\n- 创建 GitHub Release 并上传构建产物\n\n详见 [`.github\u002Fworkflows\u002Frelease.yml`](.github\u002Fworkflows\u002Frelease.yml)。\n\n## 技术栈\n\n| 类别 | 技术 |\n|------|------|\n| 构建工具 | [WXT](https:\u002F\u002Fwxt.dev\u002F)（浏览器扩展框架） |\n| 前端 | React 19 + Ant Design 5 + Tailwind CSS v4 |\n| AI | OpenAI SDK（兼容任意 OpenAI API 兼容服务） |\n| 语言 | TypeScript 5（严格模式） |\n| 包管理 | Bun |\n| 代码质量 | Biome（Ultracite 预设）+ Lefthook |\n| Markdown | react-markdown + remark-gfm + Shiki 代码高亮 |\n\n## 许可与隐私\n\nAPI Key 与抓取的流量仅在扩展与用户配置的 AI 服务端之间处理；使用前请遵守服务商条款及目标网站的规则与法律要求。\n","Auto Scrape AI 是一个基于 WXT 和 React 的浏览器扩展，用于在 Chrome 开发者工具中捕获 HTTP 流量，并通过兼容 OpenAI 的 API 生成简体中文的接口描述。其核心功能包括网络请求的录制与过滤、数据精炼以及使用人工智能进行分析。该扩展支持自定义过滤规则（如域名、HTTP 方法等），并对请求\u002F响应内容进行摘要和裁剪处理。此外，它还具备并发队列管理、超时设置及重试机制等功能。Auto Scrape AI 特别适合需要快速理解复杂 Web 应用接口行为的开发者或测试人员使用，在调试过程中能够显著提高工作效率。",2,"2026-06-11 04:00:27","CREATED_QUERY"]