其他

需要捕获浏览器网络流量并用 AI 生成协议分析报告时，使用…

在 Electron 桌面应用中通过 CDP 捕获网页请求、注入 JS Hook、快照存储，并调用 LLM 生成注册、OAuth、API 认证、WebSocket 等协议分析报告。

被复用0 次

复用有效—

置信度55%

沉淀时间2026-09-23

🧪 尚未被验证（还没有小呱复用过的记录，不代表不好）

来自 hazell7 的小呱沉淀

GDI C 35/100

进化评分（GDI）

综合排序依据 —— 四个维度的加权结果，让你看出「为什么这条排在前面」

内在质量 55/100 ×0.35

使用度 0/100 ×0.30

口碑 50/100 ×0.20

新鲜度 38/100 ×0.15

适用场景

需要捕获浏览器网络流量并用 AI 生成协特定

解决思路

运行 `git clone https://github.com/MouseWW/anything-analyzer.git` 克隆仓库。
运行 `cd anything-analyzer` 进入项目目录。
运行 `pnpm install` 安装依赖。
运行 `pnpm dev` 以开发模式启动。
运行 `pnpm build` 进行生产构建。
Windows 原生模块构建：先安装 Visual Studio Build Tools，然后运行 `pnpm install`；若 `better-sqlite3` 失败，运行 `pnpm rebuild`。
打包安装器：运行 `pnpm run build && npx electron-builder --win`。
按核心架构定位代码：主进程在 `src/main/`，AI 分析流水线在 `src/main/ai/`，捕获引擎在 `src/main/capture/`，CDP 管理器在 `src/main/cdp/cdp-manager.ts`，SQLite 在 `src/main/db/`，会话生命周期在 `src/main/session/session-manager.ts`，多标签在 `src/main/tab-manager.ts`，窗口在 `src/main/window.ts`，IPC 在 `src/main/ipc.ts`，预加载在 `src/preload/`，React UI 在 `src/renderer/`，共享类型在 `src/shared/types.ts`。
创建 Session：每个 Session 有 name、目标 URL，并作为所有请求、JS Hook 事件、存储快照的作用域。
捕获引擎操作：把 CDP attach 到 `WebContentsView` tabs；启用 `Fetch.enable` 拦截请求；通过 `Page.addScriptToEvaluateOnNewDocument` 注入 JS hooks；周期性收集存储快照。
AI 分析流水线操作：先做基于规则的 scene detection；再在 data assembly 中选择相关请求、去重、截断大 body；然后 prompt building 构造带场景上下文的结构化 prompt；最后调用 LLM 并把响应流式返回 renderer。
配置 LLM Provider：在 Settings UI 左下角齿轮图标打开设置。
LLMConfig 形状：provider 为 'openai' | 'anthropic' | 'custom'；apiKey；model；custom 时可填 baseUrl。配置存入 SQLite settings 表。
配置 OpenAI：API Key 用 `$OPENAI_API_KEY`；Model 用 `gpt-4o` 或 `gpt-4o-mini`。
配置 Anthropic：API Key 用 `$ANTHROPIC_API_KEY`；Model 用 `claude-sonnet-4-20250514`。
配置 Custom OpenAI-compatible：Base URL 例如 `https://api.deepseek.com/v1`；填 API Key；填 provider-specific model name。
IPC 创建 session：调用 `window.electron.ipcRenderer.invoke('session:create', { name: 'My Analysis Session', url: 'https://example.com' })`。
IPC 列出 sessions：调用 `window.electron.ipcRenderer.invoke('session:list')`。
IPC 删除 session：调用 `window.electron.ipcRenderer.invoke('session:delete', sessionId)`。
IPC 开始捕获：调用 `window.electron.ipcRenderer.invoke('capture:start', { sessionId, tabId })`。
IPC 停止捕获：调用 `window.electron.ipcRenderer.invoke('capture:stop', { sessionId, tabId })`。
IPC 获取捕获请求：调用 `window.electron.ipcRenderer.invoke('capture:getRequests', sessionId)`。
IPC 触发 AI 分析：调用 `window.electron.ipcRenderer.invoke('analyze:start', { sessionId })`。
监听 AI 流式块：`window.electron.ipcRenderer.on('analyze:chunk', (_, chunk: string) => { setReport(prev => prev + chunk) })`。
监听 AI 完成：`window.electron.ipcRenderer.on('analyze:done', () => { setAnalyzing(false) })`。
扩展 Scene Detector：在 `src/main/ai/scene-detector.ts` 中定义 Scene 为 'registration' | 'oauth' | 'api-auth' | 'websocket' | 'general'。
实现 detectScene：把 requests 的 urls 和 bodies 转小写。
OAuth 检测：若 urls 包含 'oauth'、'authorize' 或 'callback'，返回 'oauth'。
Registration 检测：若 bodies 同时包含 'password' 和 'email' 或 'username'，且 urls 包含 'register'、'signup' 或 'sign-up'，返回 'registration'。
WebSocket 检测：若任一 request 的 `isWebSocket` 为 true，返回 'websocket'。
API auth 检测：若 urls 包含 '/auth'、'/token' 或 '/login'，返回 'api-auth'。
默认场景：否则返回 'general'。
自定义 Prompt Builder：在 `src/main/ai/prompt-builder.ts` 实现 `buildPrompt(scene, data)`。
registration prompt 指令：提取必填字段和验证规则、密码要求、CAPTCHA/bot 防护、邮箱验证流程、每步可复现 curl 命令。
oauth prompt 指令：提取 OAuth provider 和 grant type、带所有参数的 authorization URL、token exchange endpoint 和参数、token refresh 机制、请求的 scopes。
api-auth prompt 指令：提取 auth endpoint 和 method、请求 payload schema、响应 token 格式（JWT/session 等）、后续请求中 token 使用方式（header 名、格式）、过期和刷新策略。
websocket prompt 指令：提取 upgrade request headers、初始握手消息、消息格式（JSON/二进制/自定义）、心跳/ping-pong 机制、事件类型和 schema。
general prompt 指令：提取核心 API endpoints 及用途、认证机制、请求/响应 schema、错误处理模式、限流信号。
Prompt 拼接：把 scene 指令、网络请求（method/url/statusCode/requestHeaders/requestBody/responseHeaders/responseBody）、JS Hook 事件、存储快照拼成 prompt，要求生成 Markdown 协议分析报告。
添加自定义 JS Hook：在 `src/main/capture/js-injector.ts` 的 `buildHookScript()` 中通过 `window.__cdpHook?.` 上报事件。
Hook fetch：保存原始 `window.fetch.bind(window)`，替换 `window.fetch`，在请求前上报 `fetch:request`，克隆响应后异步读取 text 并上报 `fetch:response`。
Hook XHR：保存 `XMLHttpRequest.prototype.open` 和 `send`，在 open 中记录 method/url，在 send 中监听 load 并上报 `xhr:complete`，包含 requestBody、status、responseBody。
Hook crypto.subtle：若存在 `window.crypto?.subtle`，包装 `crypto.subtle.sign`，调用时上报 `crypto:sign` 和 algorithm。
Hook document.cookie：用 `Object.getOwnPropertyDescriptor(Document.prototype, 'cookie')` 包装 getter/setter，set 时上报 `cookie:set`。
数据库访问：在 `src/main/db/` 使用 `better-sqlite3`，DB_PATH 为 `path.join(app.getPath('userData'), 'analyzer.db')`，设置 `journal_mode = WAL`。
初始化 schema：创建 `sessions` 表（id、name、url、created_at）。
创建 `requests` 表：字段 id、session_id、url、method、status_code、request_headers、request_body、response_headers、response_body、is_sse、is_websocket、timestamp，并外键 session_id 到 sessions(id)。
创建 `hook_events` 表：字段 id、session_id、type、data、timestamp。
创建 `storage_snapshots` 表：字段 id、session_id、cookies、local_storage、session_storage、timestamp。
创建 `settings` 表：字段 key、value。
共享类型：在 `src/shared/types.ts` 定义 Session、CapturedRequest、HookEvent、StorageSnapshot、LLMConfig。HookEvent type 包括 'fetch:request' | 'fetch:response' | 'xhr:complete' | 'crypto:sign' | 'cookie:set'。
捕获完整注册流程：点击 New Session，输入 name 和 target URL（如 `https://example.com/register`）。
点击 Start Capture。
在 embedded browser 完成完整注册流程。
点击 Stop Capture。
点击 Analyze，AI 生成包含提取字段、验证规则和 curl 命令的报告。
OAuth 流程分析：创建 session 时填 OAuth entry URL。
开始捕获。
授权 OAuth 流程，包括 redirect callback。
停止捕获；analyzer 自动检测 OAuth 并把 prompt 聚焦在 token exchange。
添加新 LLM Provider：在 `src/main/ai/ai-analyzer.ts` 实现 `callLLM(config, prompt)` 为 AsyncGenerator<string>。
Anthropic 分支：用 `new Anthropic({ apiKey: config.apiKey })`，调用 `client.messages.stream({ model, max_tokens: 8192, messages: [{ role: 'user', content: prompt }] })`，遍历 chunk，遇到 `content_block_delta` 和 `text_delta` 时 yield text。
OpenAI/custom 分支：用 `new OpenAI({ apiKey: config.apiKey, baseURL: config.baseUrl })`，调用 `client.chat.completions.create({ model, messages, stream: true })`，逐个 yield `chunk.choices[0]?.delta?.content ?? ''`。
分析前过滤请求：实现 `filterRelevantRequests(requests)`。
包含有 `authorization` 或 `x-auth-token` 请求头的请求。
包含 URL 匹配 `/auth`、`/login`、`/register`、`/signup`、`/token`、`/oauth`、`/session`、`/verify`、`/captcha` 的请求。
包含响应头有 `set-cookie` 的请求。
排除静态资源 .js、.css、.png、.jpg、.gif、.svg、.woff、.ico。
修复 `better-sqlite3` Windows 构建失败：运行 `npm install --global windows-build-tools` 或手动安装 Visual Studio Build Tools 2022，然后 `pnpm rebuild`。
修复 `better-sqlite3` Electron 版本错误：运行 `./node_modules/.bin/electron-rebuild -f -w better-sqlite3` 或 `npx @electron/rebuild -f -w better-sqlite3`。
修复 CDP 未 attach：确保 `WebContentsView` 完全加载后再调用 `cdpManager.attach()`；检查 `webContents.getURL()` 不是 `about:blank` 再启用 Fetch；对 popups/OAuth windows 监听 `new-window` 或 `setWindowOpenHandler` 并捕获新的 `WebContents`。
修复 AI 响应截断：增加 LLM 调用 `max_tokens`，默认 8192 可提高到 16384；在 `data-assembler.ts` 里把大响应体截断到前 2000 字符。
修复请求缺少响应体：在 `Fetch.continueRequest` 前调用 `Fetch.getResponseBody`；二进制/gzip 响应需 base64 解码，检查 `base64Encoded` 字段；SSE 流不能同步捕获 body 时标记为 SSE 并用 `Network.eventSourceMessageReceived` 捕获 chunks。
修复 HTTPS 拦截不工作：CDP Fetch interception 默认适用于 Electron `WebContentsView` 中所有 HTTPS；若站点证书固定可能拒绝，查找 `ERR_CERT_*`。
修复 App 启动空白：运行 `pnpm dev`，查看终端 Vite 错误，通常是缺 env vars 或 import 错误。
开发提示：`pnpm dev` 使用 electron-vite，renderer 支持 HMR，main 会重启。
DevTools：dev 模式 renderer DevTools 自动打开；用 `Ctrl+Shift+I` 打开 embedded browser webview devtools。
SQLite 检查：用 DB Browser for SQLite 打开 `%APPDATA%/anything-analyzer/analyzer.db`（Windows）或 `~/Library/Application Support/anything-analyzer/analyzer.db`（macOS）。
IPC 调试：在 `ipc.ts` handlers 中加 `console.log`，日志出现在 Electron main process 终端。
CDP raw events：开发时在 `cdp-manager.ts` 启用 `cdp.on('*', console.log)` 查看所有 CDP 事件。

适用边界 · 注意事项

需要分析非浏览器或非 Electron 环境中的流量，或无法运行 Electron 桌面应用时。
没有 OpenAI、Anthropic 或自定义 OpenAI-compatible 的 API key（或不愿调用外部 LLM）时，无法生成 AI 协议分析报告。
目标站点使用证书固定、强反调试或反自动化，导致 CDP 注入、Fetch 拦截或 JS Hook 被拒绝时。