web-Api-scrapper

# 🕵️ API 流跟踪器 *(作为 [`browser-flow-tracker`](https://www.npmjs.com/package/browser-flow-tracker) 包在 npm 上发布)* [](https://www.npmjs.com/package/browser-flow-tracker) [](LICENSE) [](https://apiflowtracker.com/) 🌐 **网站： [apiflowtracker.com](https://apiflowtracker.com/)** — 一行安装和快速启动。 **用于 Claude 和 Cursor 的本地 MCP 服务器，记录任何网页的 API 流 -** 当您点击它时 - 并将其转换为文档。 只需对您的 AI 说： > ### 🗣️ *"让我们为此 URL 记录会话 `https://your-app.com`"* 一个真正的浏览器窗口打开 → **您**导航流程（登录，点击）→ 说 **"完成"** 或关闭窗口 → 您获得一个干净的 **Markdown 流文档** （带有流程图），一个结构化的 **`.flow.json`**，和一个标准的 **`.har`** — 噪音过滤，机密信息删除。 ## ⚡ 快速启动（MCP） **1. 安装** —一行命令，无需 Node.js： ```bash # macOS & Linux (终端) curl -fsSL https://apiflowtracker.com/install.sh | sh ``` ```powershell # Windows (PowerShell) irm https://apiflowtracker.com/install.ps1 | iex ``` **2. 添加到 Claude Code / Cursor** （安装程序会打印您的确切路径）： ```json { "mcpServers": { "browser-flow-tracker": { "command": "/usr/local/bin/browser-flow-tracker" } } } ``` **3. 重启您的 AI 应用并说出该短语。** 就是这样 - 详情，npx 替代方案以及配置文件的位置都在 [连接到 Claude / Cursor](#-connecting-to-claude--cursor)。 --- ### *"这个网站背后到底在做什么？* 您知道那种感觉，当您点击网站上的一个按钮，然后发生了一堆看不见的事情 - API 被调用，神奇的事情发生 - 但您完全不知道发生了什么， 除非您打开令人恐惧的黑色开发者工具控制台并盯着一大堆文本？ **这个工具是您的间谍。 🔍** 它在您点击时监视页面，记录每个 API 对话，然后为您提供带有图表的可读文档。无需盯着控制台。无需控制台。 （喜欢终端？还有一个 [CLI](#way-2--let-the-tool-open-a-browser-for-you-terminal) 。） --- ## 🎯 您能得到什么 在您记录流程后，工具会为您生成 **3 个文件**： | 文件 | 表情符号 | 用途 | 谁读取它 | |------|-------|---------------|--------------| | `something.md` | 📄 | 一个不错的，可读的文档：概述，**图表**，每个 API 调用顺序的表格和详细信息 | **您！**（和 Claude/Cursor） | | `something.flow.json` | 🤖 | 相同的信息以“机器人语言”表示 | Claude / Cursor，帮助您编写更好的文档 | | `something.har` | 🔧 | 行业标准文件 | 开发人员，像 Postman/DevTools 这样的工具 | 👉 **您实际上会打开并阅读的是 `.md` 文件。** 在任何 Markdown 查看器，VS Code，甚至只是一个文本编辑器中打开它。 ### 📁 文件去哪了？ 默认情况下，所有内容都保存到一个名为 **`recordings/`** 的文件夹中： 位于此项目中： ``` Scrapper/ └── recordings/ ├── flow-2026-07-01T14-30-00.md ← 📄 打开这个 ├── flow-2026-07-01T14-30-00.flow.json └── flow-2026-07-01T14-30-00.har ``` 每个记录都会自动以 **日期和时间** 命名，以便它们永远不会 互相覆盖。想要一个更好的名称或不同的文件夹？请参见 [选项](#-handy-options) 以下。 --- ## 🍬 完成的文档是什么样子 这是您的 `.md` 文件中的内容预览： > ## 流程图 > ```mermaid > sequenceDiagram > participant B as Browser > participant S0 as api.myapp.com > B->>S0: GET /products > S0-->>B: 200 > B->>S0: POST /cart/add > S0-->>B: 201 > ``` > > ## 调用顺序 > | # | 方法 | 端点 | 状态 | 时间 | > |---|--------|----------|--------|------| > | 1 | GET | `api.myapp.com/products` | 200 | 120ms | > | 2 | POST | `api.myapp.com/cart/add` | 201 | 340ms | …以及每个调用的完整请求和响应详细信息。 🎉 它也很智能：它会 **删除无聊的噪音** （图像，字体，样式， 跟踪/分析像素）并保留有意义的内容。 它会 **隐藏您的机密信息** 默认情况下 - 授权标头和 cookie，以及请求和响应正文以及 URL 中的密码/令牌样式字段 - 所以您可以安全地分享文档。 如果您的流程 **打开弹出窗口或新标签页** （OAuth 登录，支付窗口），该标签页的 API 调用也会被捕获到同一个记录中。 --- ## 🚀 首次设置（只需执行一次） > ✅ **通过 Claude 或 Cursor 使用它？** 您可以跳过整个部分 - > 只需在 [连接到 Claude / Cursor](#-connecting-to-claude--cursor) 中添加 > 小型配置即可。 以下步骤仅适用于 **终端 / `bft` 命令** 用法。 您需要此 **一次性** 设置。 它分为两步。 **1. 确保您已安装 Node.js.** 打开 **终端** 应用程序并粘贴： ```bash node --version ``` 如果您看到类似 `v18` 的数字，则可以正常使用。 如果它显示“命令未找到”, 请从 [nodejs.org](https://nodejs.org) 下载 Node 并安装它（只需单击“下一步” → “下一步” → 完成）。 **2. 安装工具的二进制文件.** 将以下内容粘贴到终端： ```bash cd path/to/browser-flow-tracker # 👈 工具所在的文件夹 npm install ``` 等待几秒钟。 完成且永久 ✅ > 💡 **什么是“终端”？** 它是您的 Mac 上您可以输入命令的应用程序。 > 按 `Cmd + Space`，输入“终端”，然后按 Enter。 > 📌 **我应该在 `path/to/browser-flow-tracker` 处输入什么？** 最简单的技巧： > 输入 `cd ` （带空格），然后 **将工具的文件夹从 Finder 拖到终端窗口** > 并按 Enter - 正确的路径会自动填充。 从那时起， > 以下命令中的 `cd ...` 行都是相同的。 --- ## 🎬 如何使用它 - 3 种方式 选择您觉得舒适的方式。 它们都会生成相同的好文件。 ### 方式 1： 🗣️ 直接询问 Claude 或 Cursor（最简单 - 零命令） 一旦工具连接（它已经连接 - 请参见 [连接到 Claude/Cursor](#-connecting-to-claude--cursor)）， 您只需 **说出神奇的短语**: > ### *"让我们为此 URL 记录会话 `https://your-website.com`"* 以下是自动发生的情况: 1. 🪟 AI 会在该 URL 打开一个 **真正的浏览器窗口** （它会自行选择一个空闲端口 - 您无需配置任何内容）。 2. 🖱️ **您**点击流程。 *您* 驱动 - AI 不会为您点击。 3. 🛑 完成后，您可以 **说“完成”** 或 **关闭浏览器窗口**。 4. 📄 AI 编写 `.flow.json` / `.har` / `.md` 文件，并为您提供干净的文档。 您无需输入单个命令。 ✨ > 🔐 **登录？** 窗口使用其自己的保存配置文件，因此您只需登录 **第一次** - > 以后的记录会记住您。 > ⚠️ **如果您的 AI 忽略该短语** 并开始自行探索而不是 > 使用此工具，您尚未安装规则 - 请参见 > [让您的 AI 始终使用它](#-make-your-ai-always-use-it)。 --- ### 方式 2： 🧼 让工具为您打开浏览器（终端） 在终端中粘贴以下内容（更改网站）： ```bash cd path/to/browser-flow-tracker # 👈 工具所在的文件夹 node bin/bft.js record --launch --browser brave --url https://your-website.com ``` 浏览器窗口会自行弹出到 **私人配置文件** （它永远不会触及您的正常 Brave）。 **点击并执行您要记录的操作** - 如果需要登录。 完成后，您可以按 **`Ctrl + C`** 或关闭浏览器窗口 - 两者都会保存记录。 💥 您的文件会出现在 `recordings/` 文件夹中。 > 🔐 您只需在 **第一次** 登录 - 私人配置文件会为您记住。 > 如果您没有 Brave，请运行 `node bin/bft.js list` 查看您有哪些浏览器， > 然后将 `brave` 替换为 `arc`，`chrome` 等。 --- ### 方式 3： 🔐 监视您自己的主浏览器（高级） 通常 **方式 1 或方式 2 已经足够**，即使对于已登录的网站（您只需在工具的窗口中登录一次并记住）。 仅当您需要记录 **现有、已打开** 的浏览器会话时，才使用此选项。 **步骤 1.** 向工具询问神奇命令： ```bash cd path/to/browser-flow-tracker # 👈 工具所在的文件夹 node bin/bft.js attach-help brave ``` 它会打印一个确切的命令 - **复制它，完全退出 Brave，然后将该命令粘贴到终端** 中。 Brave 会以“监视我”的模式重新打开。 **步骤 2.** 登录并进入流程开始的位置。 然后，在 **新** 终端窗口中： ```bash cd path/to/browser-flow-tracker # 👈 工具所在的文件夹 node bin/bft.js record --attach --url-match your-website.com ``` **步骤 3.** 在浏览器中执行操作，然后按 **`Ctrl + C`** 或终端。 💥 文件出现在 `recordings/` 中。 --- ## 🎛️ 便捷选项 在 `record` 命令末尾添加以下任何一个： | 选项 | 它执行的操作 | 示例 | |--------|--------------|---------| | `--name checkout` | 将文件命名为 `checkout` 而不是时间戳 | `--name checkout` | | `--out ~/Desktop/docs` | 将文件保存在其他地方（例如桌面） | `--out ~/Desktop/docs` | | `--title "Checkout Flow"` | 给文档一个适当的标题 | `--title "Checkout Flow"` | | `--url-match myapp` | 监视正确的浏览器标签 | `--url-match myapp` | | `--include-noise` | 保留 **所有内容** （图像，字体，跟踪等） | `--include-noise` | | `--no-redact` | 显示密码/令牌（⚠️ 然后不要共享文件） | `--no-redact` | 完整示例： ```bash node bin/bft.js record --launch --browser brave \ --url https://shop.example.com \ --name checkout-flow \ --title "Shop Checkout Flow" \ --out ~/Desktop ``` --- ## 🤖 连接到 Claude / Cursor ### ✅ 推荐： 一行安装（无需 Node.js，适用于 macOS、Windows 和 Linux） 最可靠的方式 - **无需 Node.js** - 它避免了 `spawn npx ENOENT` PATH 问题，这些问题会阻碍 GUI 应用程序。 它安装一个独立的二进制文件并打印确切的 MCP 配置以粘贴。 **macOS 和 Linux** - 在终端中： ```bash curl -fsSL https://apiflowtracker.com/install.sh | sh ``` 然后您的 MCP 配置命令是（每个 Mac/Linux 机器上的路径相同）： ```json { "mcpServers": { "browser-flow-tracker": { "command": "/usr/local/bin/browser-flow-tracker" } } } ``` **Windows** - 在 PowerShell 中： ```powershell irm https://apiflowtracker.com/install.ps1 | iex ``` 然后您的 MCP 配置命令是安装程序打印的路径，例如： ```json { "mcpServers": { "browser-flow-tracker": { "command": "C:\\Users\\you\\AppData\\Local\\browser-flow-tracker\\browser-flow-tracker.exe" } } } ``` > 安装程序会自动下载适合您的 CPU 的正确版本（Apple Silicon 或 > Intel Mac，x64 或 arm64 Linux，x64 Windows）。 在添加配置后重启 AI 应用。 ### 替代方案：通过 npx（仅当您已经安装 Node.js） 如果 Node 18+ 已安装 *且* 在您的应用程序的 PATH 上，您可以跳过安装并直接从 npm 运行： ```json { "mcpServers": { "browser-flow-tracker": { "command": "npx", "args": ["-y", "browser-flow-tracker@latest"] } } } ``` Claude Code 快捷方式： `claude mcp add browser-flow-tracker -- npx -y browser-flow-tracker@latest` > 如果您遇到 `spawn npx ENOENT`，您的应用程序无法看到 `npx` 在其 PATH 上 - > 使用上面的安装程序，它解决了整个问题。 ### 配置文件的位置 - **Claude Code:** `.mcp.json` 在项目中，或您的用户配置（由 `claude mcp` 管理）。 - **Cursor:** `.cursor/mcp.json`（每个项目）或 `~/.cursor/mcp.json`（全局） > ⚠️ **已经使用其他 MCP 工具？** 不要替换您的文件 - **添加** > `browser-flow-tracker` 块 **内部** 现有的 `mcpServers`，并在 > 您的最后一个工具后面加逗号。 保持有效的 JSON（逗号之间有逗号，最后一个没有）。 准备好的副本位于此存储库中 `.mcp.json.example` 和 `.cursor/mcp.json.example`。 ### 喜欢从源代码运行？（用于 CLI 或开发） 您不需要此用于 AI 用例，但如果您想要 `bft` 命令行工具或 想要对代码进行黑客攻击： ```bash git clone https://github.com/devggaurav/web-Api-scrapper.git cd web-Api-scrapper npm install npm test # 单元测试（编辑，过滤，导出器） # MCP: 将您的配置命令指向“node”并带有参数 ["<full-path>/mcp/server.js"]） # CLI: node bin/bft.js record --launch --browser brave --url https://example.com ```--- --- ## 🧲 让您的 AI 始终使用它 有时 AI 会“有帮助地”尝试 **分析页面 **（使用脚本）而不是使用此工具。 阻止它，给它一个永久规则，以便短语 **“让我们为此 URL 记录会话 ...”** 始终触发工具。 执行一次，它 适用于每个项目。 ### Cursor 添加一个 **用户规则**（适用于所有项目）： **设置 → 规则和记忆 → 用户规则 → + 添加**，并粘贴： ``` 当我说“让我们为此 URL 记录会话 <URL>” - 或询问您记录/分析/记录页面的 API或流程 - 使用browser-flow-tracker MCP 工具（启动跟踪，获取流程，停止跟踪）。不要启动浏览器， 触摸调试端口或自己嗅探流量。循环：调用 start_tracking with launch:true, browser:”brave”, url:<URL>。然后让 ME 导航 - 不要为我点击。录制在我说“完成”时结束（调用 stop_tracking with a name+title）或我关闭浏览器（它会自动完成；通过 get_flow 返回 status:”ended”检测）。两者都写入 .flow.json/.har/.md - 读取 .flow.json 然后给我一个干净的流程文档。 ``` *(此规则的副本也包含在 `.cursor/rules/browser-flow-tracker.mdc` 中， 只要您在该项目中工作，它就会自动应用。)* ### Claude Code 将相同的指导添加到您的 **全局** `~/.claude/CLAUDE.md` （如果它不存在，请创建该文件）， 这样它适用于每个项目。确切的文本位于 [`.cursor/rules/browser-flow-tracker.mdc`](.cursor/rules/browser-flow-tracker.mdc) - 复制 正文到 `~/.claude/CLAUDE.md`。 > 添加规则后，**重启 AI 应用** 以使其生效。 --- ## ❓ 常见问题和修复 **“我的 AI 没有使用该工具 - 它开始做它自己的事情。”** 您尚未给它永久的规则。 请参见 [让您的 AI 始终使用它](#-make-your-ai-always-use-it)，然后重启 AI 应用。 **“如何停止录制？”** 两种方法，您喜欢哪种： **说“完成”** 给您的 AI，**或直接关闭浏览器窗口**。 两者都会自动保存文件。 （在终端中，`Ctrl + C` 也有效。） **“我每次都需要登录吗？”** 否 - 工具的浏览器窗口保留其自己的已保存配置文件，因此您 **第一次** 登录后， 之后的记录会记住您。 **“它显示‘找不到已知浏览器’。”** 运行 `node bin/bft.js list`。 如果它是空的，则您没有安装受支持的浏览器。 安装 Brave 或 Chrome（两者都是免费的）并重试。 **“我的记录中什么也没出现。”** 确保您实际上 **做了您要记录的操作** 在浏览器中，然后再停止。 有些页面需要点击或页面加载来触发它们的 API。 **“我的文件在哪里？”** 在 `recordings/` 文件夹中 - 除非您使用了 `--out` （或 AI 设置了不同的位置）。 工具在完成时打印确切的文件路径， AI 可以将其读回给您。 **“我可以使用 Safari 吗？”** 还没 😔 - Safari 和 Firefox 在底层工作方式不同。 目前使用 Brave， Chrome， Arc 或 Edge。 （Safari 支持正在开发中。） **“是否安全分享文档？”** 默认情况下， **是的**。 工具在所有三个地方都隐藏了机密信息： 身份验证/cookie标头，令牌样式 URL 参数（？token=…，？api_key=…）， 以及 JSON 和表单请求/响应正文中的令牌/机密字段（ `password`，`access_token`，`client_secret`，`otp`，卡号，…）。 字段名称 它不识别为机密信息的内容将被保留 - 因此如果应用程序使用不寻常的名称 对于一个秘密，浏览文档一次，然后再分享。 只有当您使用 `--no-redact` 您应该小心。 **“我的流程打开了一个弹出窗口/新标签页 - 它被捕获了吗？”** 是的。 OAuth 窗口，支付弹出窗口和“在新标签页中打开”链接都附加到 自动（它们甚至在出生时暂停了一毫秒，以免错过它们的第一条请求）。 它们的调用出现在同一个文档中，标记为它们来自的标签。 --- ## 🧠 它是如何工作的（20 秒版） 该工具使用浏览器与自己的开发者工具相同的秘密语言进行通信 （这称为“Chrome 开发者工具协议”）。 因此，它可以监听网页上的每个 网络请求 - 开发者工具选项卡中会看到的相同信息 - 然后清理，过滤掉垃圾并格式化成人类可以阅读的内容。 就是这样。 🎩 --- ## 🗺️ 路线图（即将推出） - 🧭 Safari 和 Firefox 支持（使用不同的监听方法） - 🔀 “差异”模式 - 比较两个记录以查看更改的内容 - 🧩 自动将调用分组为文档中的逻辑步骤 --- 由节省您不需再打开浏览器控制台而打造。 愉快跟踪！ 🕵️‍♀️ 🌐 [apiflowtracker.com](https://apiflowtracker.com/) · 📦 [npm](https://www.npmjs.com/package/browser-flow-tracker) · 🐙 [GitHub](https://github.com/devggaurav/web-Api-scrapper)