从 MCP 到 Claw：Browser Claw 如何让 Chrome DevTools MCP 沦为上个时代的产物

写在前面，这个项目不是纯蹭流量的项目（虽然从 logo 到名字都在蹭 openclaw 的流量）但是我真的是想尽可能的用我的想法去解决一个场景的痛点，比如：在跨境电商领域用 Chrome DevTools MCP 这类的 MCP 很麻烦的事情（帮我把标签为书包的商品的库存全部增加 10 个、售卖时间调整为一周后）用 Browser Claw 就能很简单的实现

一句话介绍

Browser Claw 是一款开源 Chrome 浏览器扩展，它让你可以用自然语言指挥 AI 调用任意 API、操控网页数据，并通过自定义 Skill 和工具包（Toolkit）组合出专属于你的自动化工作流。

无论你是 AI 爱好者、跨境电商运营、后端测试工程师还是自动化专家，这款插件都能让你的浏览器成为一台可编程的 AI 自动化引擎。

Github: github.com/xbenduan/br…

为什么你需要 Browser Claw？

痛点：浏览器里的重复劳动

每天，我们在浏览器中花费大量时间做重复性的操作：

跨境电商运营需要反复在多个平台查价格、更新库存、抓取竞品数据
后端测试工程师在 Swagger / Postman 和浏览器之间来回切换调试 API
自动化工程师希望快速原型化一个流程，却要写大量脚手架代码
AI 爱好者想体验 Function Calling 的威力，但缺少一个低门槛的 playground

Browser Claw 的回答：Skill = 可编程的 AI 能力单元

Browser Claw 提出了一个核心概念—— API Skill（ API 技能） 。每个 Skill 是一个结构化的 JSON 定义，描述了一个 API 端点的完整调用规范。AI Agent 会根据你的自然语言指令，自动选择合适的 Skill 并执行。

这意味着：

零代码：你不需要写一行代码，只需定义 JSON 格式的 API Skill
可组合：多个 API Skill 组合成一个 Toolkit（工具包），覆盖一整条业务链路
AI 驱动：通过 OpenAI 的 Function Calling 机制，AI 自动理解意图并选择工具
安全可控：所有危险操作都需用户确认，支持风险等级标记

核心架构揭秘

技术栈一览

层级	技术选型	说明
扩展框架	Chrome Extension Manifest V3	现代浏览器扩展标准
构建工具	Vite 7 + @crxjs/vite-plugin	极速 HMR 开发体验
前端框架	React 19 + TypeScript 5.8	类型安全的现代 UI
样式方案	Tailwind CSS 4 + Lucide Icons	精致且一致的视觉体验
AI 引擎	OpenAI SDK v6.25.0	支持 Streaming + Tool Calling
数据管理	内置 DataStore (Memory Pointer)	灵感来源于 IBM Research 论文

三层核心引擎

Browser Claw 的核心运行时由三个引擎协同工作：

1. AgentEngine — AI 编排中枢

AgentEngine 是整个系统的大脑。它负责：

动态构建 System Prompt：根据当前网站域名、已加载的 Skill 列表、执行规则自动生成系统提示词
Agent Loop 迭代：支持多轮 Tool Calling，AI 可以连续调用多个 Skill 完成复杂任务
流式响应：通过 AsyncGenerator 实时推送 AI 的执行结果
会话管理：维护最近 20 条对话历史，保证上下文连续性
确认流程：所有用户定义的 Skill 在执行前都会弹出确认卡片，用户可查看并修改参数

用户输入 → AgentEngine.processUserMessage()
    ↓
构建 System Prompt（含 Skill 列表）
    ↓
调用 LLM（Streaming + Tool Calling）
    ↓
LLM 返回 tool_calls → executeToolCall()
    ↓
内置 Skill? → 直接执行
用户 Skill? → 弹出确认卡片 → 用户确认/修改 → Content Script 执行 HTTP 请求
    ↓
结果 → Response Extractor 提取关键数据 → 返回 LLM
    ↓
LLM 继续推理或生成最终回复

2. DataStore — 智能数据仓库

灵感来源于 IBM Research 的 Memory Pointer 论文（arXiv:2511.22729），DataStore 解决了一个关键问题：当 API 返回的数据量远超 LLM ****上下文窗口 时怎么办？

传统做法是截断数据，导致信息丢失。Browser Claw 的方案是：

当 API 返回数据超过 3000 字符时，完整数据存入 DataStore
LLM 只收到一个指针 ID（如 ref_getUsers_1_abc123）和数据摘要
LLM 可以通过内置的 query_stored_data 工具，对存储数据进行路径导航、数组切片、字段过滤、字段投影
数据支持 LRU 淘汰策略，30 分钟过期，最多存储 50 条

这意味着零信息丢失 + 大幅降低 Token 消耗，AI 可以处理任意大小的 API 响应。

3. BatchExecutor — 批量执行引擎

针对需要对大量数据执行相同操作的场景（如：批量更新 100 个商品价格），BatchExecutor 提供：

并发控制：可配置并发数（默认 3），避免触发 API 限流
进度回调：实时报告执行进度（已完成 / 总数 / 成功 / 失败）
暂停机制：支持随时暂停批量任务
错误隔离：单个失败不影响整体执行，所有错误独立记录

重点功能：可自定义 Skill 系统

这是 Browser Claw 最强大的特性。让我们深入了解 Skill 的定义结构和实际应用。

Skill 定义结构

每个 Skill 是一个 JSON 对象，包含以下核心部分：

1. 基础信息

{
  "id": "get_iflow_mcp_list",
  "name": "获取 mcp 列表",
  "description": "获取 iflow 网站的 mcp 列表",
  "version": "1.0.0",
}

description 字段至关重要——AI 正是根据这段描述来判断什么时候应该调用这个 Skill。

2. API 定义

{
  "api": {
    "method": "GET",
    "path": "/api/mcp/v1/openapi/public-tool-groups/search",
    "baseUrl": "https://platform.iflow.cn",
    "headers": {},
    "timeout": 10000
  }
}

支持 GET / POST / PUT / DELETE / PATCH 所有 HTTP 方法，路径参数用 {param} 占位符表示。

3. 参数定义（重点）

{
  "parameters": [
    {
      "name": "full",
      "type": "boolean",
      "location": "query",
      "required": true,
      "description": "是否获取全部",
      "default": true
    },
    {
      "name": "pageNumber",
      "type": "number",
      "location": "query",
      "required": true,
      "description": "pageNumber",
      "default": 1
    },
    {
      "name": "pageSize",
      "type": "number",
      "location": "query",
      "required": true,
      "description": "pageSize  默认十条如果用户有要求可修改",
      "default": 10
    },
    {
      "name": "aclAuthorities",
      "type": "string",
      "location": "query",
      "required": true,
      "description": "aclAuthorities 必须传空字符串"
    },
    {
      "name": "sort",
      "type": "string",
      "location": "query",
      "required": true,
      "description": "sort",
      "default": "FAVORITE_WEIGHTED_DESC",
      "enum": ["FAVORITE_WEIGHTED_DESC", "UPDATE_TIME_DESC", "FAVORITE_DESC"]
    },
    {
      "name": "keyword",
      "type": "string",
      "location": "query",
      "required": false,
      "description": "keyword，用于搜索搜索关键词，可选"
    }
  ],
}

参数系统支持的特性：

特性	说明
location	参数位置：`path`（路径）/ `query`（查询字符串）/ `body`（请求体）/ `header`（请求头）
type	数据类型：`string` / `number` / `boolean` / `array` / `object`
validation	校验规则：`min` / `max` / `minLength` / `maxLength` / `pattern`（正则）
enum	枚举值列表，AI 会自动从中选择
nested	支持嵌套 `object` 和 `array` 类型，可递归定义子参数

4. 响应提取器

{
  "response": {
    "type": "json",
    "extractors": [
      {
        "name": "result",
        "path": "$.result",
        "description": "返回数据"
      }
    ]
  }
}

提取器支持简易 JSONPath 语法和 5 种 transform 操作：count（计数）、first（取第一个）、last（取最后一个）、flatten（展平）、unique（去重）。

5. 安全 元数据

{
  "meta": {
    "category": "分类",
    "tags": ["mcp"],
    "riskLevel": "safe",
    "requireConfirm": false
  }
}

三级风险标记：

风险等级	说明	确认策略
`safe`	只读查询，无副作用	可跳过确认
`moderate`	创建或修改资源	建议确认
`dangerous`	删除或不可逆操作	强制确认

6. 域名绑定

{
  "binding": {
    "hostPatterns": ["platform.iflow.cn"]
  }
}

Skill 只在匹配的域名下激活，确保 API 调用走对应网站的认证上下文（Cookie / Session）。

Skill → OpenAI Function Calling 的转换

Browser Claw 内置了一个 SkillConverter，它会自动将 Skill JSON 定义转换为 OpenAI Tool 格式，包括：

将参数定义映射为 JSON Schema
将 validation 规则转换为 minimum / maximum / pattern 等约束
将嵌套参数递归展开为完整的 schema 结构
自动识别 required 字段

这意味着你定义好 Skill JSON 后，Browser Claw 会帮你完成所有与 LLM 对接的工作。

内置能力：开箱即用

除了用户自定义 Skill，Browser Claw 还提供两个强大的内置 Skill：

READ_PAGE_CONTENT — 网页阅读器

能力：读取当前浏览器标签页的网页内容，包括正文文本、标题、页面描述、标题结构（h1-h6）和页面链接。

使用场景：

"帮我总结这个页面的内容"
"这篇文章的核心观点是什么？"
"提取页面上所有的外部链接"

QUERY_STORED_DATA — 数据查询引擎

能力：通过指针 ID 查询之前 API 返回的大型数据，支持路径导航、数组切片、字段过滤和字段投影。

使用场景：

"从刚才获取的用户列表中，找出所有来自北京的用户"
"显示前 10 条订单的金额和状态"
"统计数据中有多少条记录满足条件"

工具包（Toolkit）组合实战（举例实际使用需要定制）

Skill 的真正威力在于组合。你可以把多个 Skill 组装成一个工具包，覆盖一整条业务链路。

实战场景一：跨境电商运营工具包

想象你在运营一个 Shopify + 速卖通的跨境电商业务，你可以定义以下 Skill 组合：

Skill	功能	风险等级
`shopify_list_products`	获取 Shopify 商品列表	safe
`shopify_update_price`	批量更新商品价格	moderate
`aliexpress_search`	速卖通竞品搜索	safe
`aliexpress_get_price`	获取竞品价格详情	safe
`exchange_rate`	实时汇率查询	safe

组合使用时，你只需要说：

"帮我对比一下我 Shopify 店铺里前 20 个产品和速卖通上同类产品的价格差异，考虑当前汇率，把利润率低于 15% 的产品标出来。"

AI 会自动执行：shopify_list_products → aliexpress_search → aliexpress_get_price → exchange_rate → 汇总分析 → 输出报告

配合 BatchExecutor，还可以一键批量调整价格。

实战场景二：后端 API 测试工具包

作为后端测试工程师，你可以为你的服务定义一套完整的 API 测试 Skill：

Skill	功能	风险等级
`create_user`	创建测试用户	moderate
`get_user`	查询用户信息	safe
`update_user`	修改用户信息	moderate
`delete_user`	删除测试用户	dangerous
`list_orders`	查询订单列表	safe
`create_order`	创建测试订单	moderate

然后你可以用自然语言驱动测试：

"创建一个测试用户，然后用这个用户创建 3 个订单，查询订单列表确认都创建成功了，最后把测试用户删除清理环境。"

AI 会自动编排执行顺序，处理数据依赖（上一步的 userId 传给下一步），并在危险操作（删除用户）前请求确认。

实战场景三：AI 爱好者的 Function Calling 实验室

对于想学习和体验 AI Function Calling 的开发者，Browser Claw 是完美的 playground：

即开即用：内置 GitHub API 和 JSONPlaceholder 示例 Skill
可视化调试：每次 Tool Call 的参数和结果都实时展示在聊天界面
自由组合：快速验证不同 Skill 组合下 AI 的推理能力
学习模板：Skill JSON 本身就是 Function Calling 的 schema 教学材料

实战场景四：自动化工程师的流程原型工具

自动化工程师可以用 Browser Claw 快速原型化自动化流程：

读取网页内容 → 提取关键数据 → 调用 API → 处理结果 → 批量操作
不需要写代码，验证流程可行性后再转为正式自动化脚本
利用 Content Script 天然携带浏览器认证信息，省去了 token / session 管理的麻烦

安全设计：确认优先原则

Browser Claw 在安全性上做了深度考量：

1. 确认卡片机制

所有用户定义的 Skill 在执行前，都会弹出一个确认卡片（ConfirmationCard），展示：

即将调用的 API 端点
所有参数的名称和值
风险等级标识

用户可以：

直接确认执行
修改任意参数后再执行
取消操作

2. 三级风险标记

开发者在定义 Skill 时必须声明风险等级，系统据此决定确认策略。dangerous 级别的操作会以醒目的红色标记展示。

3. Content Script 沙箱

所有 HTTP 请求通过 Content Script 执行，天然隔离了扩展环境和页面环境。API 调用使用浏览器原生的 Cookie / Session，不需要在扩展中存储任何敏感凭证。

4. 域名绑定

Skill 通过 hostPatterns 绑定到特定域名，防止 API 被错误地在其他网站上调用。支持通配符匹配（如 *.github.com）。

5. 速率限制

可在 Skill 元数据中配置 rateLimit，限制单位时间内的调用次数，防止误操作导致的 API 滥用。

5 分钟快速上手

第一步：安装

也可以直接在 GitHub 上下载 github.com/xbenduan/br… 构建好的版本

克隆项目并安装依赖：

git clone https://github.com/xbenduan/browser-claw.git
cd browser-claw
pnpm install
pnpm build

在 Chrome 中打开 chrome://extensions，开启"开发者模式"
点击"加载已解压的扩展程序"，选择 dist 目录

第二步：配置 AI 模型

点击扩展图标，进入设置页面，配置你的 OpenAI API Key 和模型（推荐 iflow 的免费模型感谢 iflow 在调试阶段的免费模型支持）

第三步：添加你的第一个 Skill

进入 Skill 管理页面，可以：

使用内置示例：直接添加 GitHub 仓库查询、Issue 创建等示例 Skill
从模板创建：基于空白模板，填入你自己的 API 定义
导入 JSON：直接粘贴 Skill JSON 定义

第四步：开始对话

打开任意网页，点击 Browser Claw 图标，在聊天框中输入你的需求。AI 会自动理解你的意图，选择合适的 Skill 并执行。

与同类工具的对比

特性	Browser Claw	传统 Chrome 自动化扩展	Postman / API 工具	RPA 工具
自然语言驱动	是	否	否	否
自定义 Skill	无限扩展（JSON 定义）	预设功能	需手动配置集合	可视化编排
AI Function Calling	原生支持	不支持	不支持	不支持
浏览器认证复用	自动（Cookie/Session）	部分支持	需手动配置	需手动配置
大数据处理	DataStore 指针系统	不支持	不支持	有限支持
批量操作	内置 BatchExecutor	需插件配合	Runner 功能	支持
学习成本	低（JSON + 自然语言）	低	中	高
开源	是	视情况	否（核心功能）	否

快速体验

项目中 src/utils/skills.demo.json 内置了一个 API Skills

{
  "id": "get_iflow_mcp_list",
  "name": "获取 mcp 列表",
  "description": "获取 iflow 网站的 mcp 列表",
  "version": "1.0.0",
  "api": {
    "method": "GET",
    "path": "/api/mcp/v1/openapi/public-tool-groups/search",
    "baseUrl": "https://platform.iflow.cn",
    "timeout": 10000
  },
  "parameters": [
    {
      "name": "full",
      "type": "boolean",
      "location": "query",
      "required": true,
      "description": "是否获取全部",
      "default": true
    },
    {
      "name": "pageNumber",
      "type": "number",
      "location": "query",
      "required": true,
      "description": "pageNumber",
      "default": 1
    },
    {
      "name": "pageSize",
      "type": "number",
      "location": "query",
      "required": true,
      "description": "pageSize",
      "default": 50
    },
    {
      "name": "aclAuthorities",
      "type": "string",
      "location": "query",
      "required": true,
      "description": "aclAuthorities 传空字符串或者 null 都行，但必须要传"
    },
    {
      "name": "sort",
      "type": "string",
      "location": "query",
      "required": true,
      "description": "sort",
      "default": "FAVORITE_WEIGHTED_DESC",
      "enum": ["FAVORITE_WEIGHTED_DESC", "UPDATE_TIME_DESC", "FAVORITE_DESC"]
    },{
      "name": "keyword",
      "type": "string",
      "location": "query",
      "required": false,
      "description": "keyword，用于搜索搜索关键词，可选"
    }
  ],
  "response": {
    "type": "json",
    "extractors": [
      {
        "name": "result",
        "path": "$.result",
        "description": "返回数据"
      }
    ]
  },
  "meta": {
    "category": "分类",
    "tags": ["mcp"],
    "riskLevel": "safe",
    "requireConfirm": false
  },
  "binding": {
    "hostPatterns": ["platform.iflow.cn"]
  }
}

导入这个 API Skills 后可以在 platform.iflow.cn 页面就可以对AI 说关于 iflow 所提供的 MCP 的任务了，比如：

帮我查找一个叫做“民法典”的 MCP，并告诉我他的作用是什么
帮我按照收藏排序找出收藏最多的 5 个 MCP

技术亮点总结

亮点	说明
Skill 即代码	JSON 声明式定义，无需编写任何代码即可赋予 AI 新能力
工具包组合	多个 Skill 自由组合，AI 自动编排执行顺序和数据传递
Memory Pointer	基于学术论文的大数据处理方案，零丢失 + 低 Token 消耗
确认优先	三级风险标记 + 可编辑参数的确认卡片，安全可控
原生认证	Content Script 天然复用浏览器 Cookie/Session，零配置认证
批量执行	并发控制 + 进度追踪 + 错误隔离的批量操作引擎
流式体验	基于 AsyncGenerator 的实时流式响应，所见即所得
类型安全	完整的 TypeScript 类型定义，从 Skill 定义到 Agent 执行全链路类型化

一起共建

Browser Claw 是一个开源项目，我们欢迎社区贡献：

提交你创建的 API Skill 定义，丰富社区工具库
反馈使用中遇到的问题和改进建议
贡献代码，一起完善核心引擎

无论你是哪个领域的从业者，只要你和浏览器打交道，Browser Claw 都能成为你的效率倍增器。

让 AI 帮你干活，从定义一个 Skill 开始。