Hotdry.
归档
web

Chrome WebMCP 预览实现：浏览器代理分发循环与工具调用取代 CLI

在 Chrome 早期预览 WebMCP，实现浏览器内代理工具调用与多步分发循环，提供工程化参数、监控要点与 CLI 替换策略。

WebMCP（Web Model Context Protocol）作为 W3C 提案，在 Chrome 146 Canary 的早期预览中落地，标志着浏览器正式成为代理（Agent）生态的核心基础设施。通过 navigator.modelContext API，网站可直接暴露结构化工具给 AI 代理，实现精确的工具调用与分发循环，从而取代传统的 CLI 工作流。这种浏览器原生支持的机制，避免了 DOM 刮取、截图分析或外部服务器依赖，大幅提升代理交互的可靠性和效率。

WebMCP 的核心价值：从 CLI 到浏览器原生代理循环

传统代理开发依赖 CLI 工具链，如 LangChain 或 AutoGPT，通过命令行驱动浏览器自动化。这种方式 token 消耗高（需描述 UI 变化）、延迟大（网络往返）、且易碎（UI 变动即失效）。WebMCP 则将代理逻辑迁移到浏览器 Tab 内：代理直接调用页面注册的工具，浏览器中介执行，返回结构化 JSON 响应。结果是代理分发循环（dispatch loop）可在单一 Tab 中闭环运行，支持 ReAct（Reason-Act）模式的多步推理。

例如，代理需完成 “查询航班 - 过滤价格 - 预订” 任务：在 CLI 中需多次 Playwright 调用；在 WebMCP 中，页面注册 searchFlights、filterByPrice、bookTicket 工具，代理循环调用即可。Chrome 官方博客指出，这种结构化交互可将计算开销降低 67%，任务准确率达 98%[1]。

启用 Chrome WebMCP 预览

  1. 下载 Chrome 146+ Canary。
  2. 访问 chrome://flags，搜索 “Experimental Web Platform Features”，启用并重启。
  3. 确认：console.log('modelContext' in navigator) 返回 true。
  4. 开发环境：HTTPS 或 localhost；生产需 Secure Context。

阈值建议：测试时限制工具注册 ≤20 个，避免代理发现阶段 token 爆炸。

Imperative API：动态工具注册与调用

核心是 navigator.modelContext.registerTool()，参数包括：

  • name：唯一字符串，如 "searchUser"。
  • description：自然语言提示，<100 字，指导代理用法。
  • inputSchema：JSON Schema，定义参数类型 / 约束（如 enum、required）。
  • handler：async 函数，接收解构参数，返回 JSON 对象或 Promise。

示例代码（用户搜索工具）：

if ('modelContext' in navigator) {
  navigator.modelContext.registerTool({
    name: 'searchUsers',
    description: '根据邮箱或 ID 搜索用户，支持分页',
    inputSchema: {
      type: 'object',
      properties: {
        query: { type: 'string', description: '邮箱或用户名' },
        limit: { type: 'number', minimum: 1, maximum: 50, default: 10 }
      },
      required: ['query']
    },
    handler: async ({ query, limit = 10 }) => {
      const users = await fetch(`/api/users?query=${encodeURIComponent(query)}&limit=${limit}`).then(r => r.json());
      return { users, total: users.length, nextPage: limit < users.length };
    }
  });
}

关键参数优化：

  • Schema 严格：使用 enum 限制选项，减少代理幻觉。
  • Handler 超时：内部 setTimeout 500ms，回滚默认值。
  • 缓存：handler 中集成 Redis-like localStorage，命中率阈值 80%。

对于破坏性操作，添加 destructiveHint: true，浏览器提示用户确认。

Declarative API：零 JS 表单工具化

适用于简单表单：添加 tool-name、tool-description 属性。

<form tool-name="submitFeedback" tool-description="提交用户反馈">
  <input name="content" required>
  <button>提交</button>
</form>

提交时检查 event.agentInvoked，用 event.respondWith({ status: 'success', data }) 返回结构化结果。参数：表单字段自动推断 Schema，无需手动定义。适用于替换 CLI 中的简单命令如 "login"。

浏览器代理分发循环实现

WebMCP 天然支持 agent dispatch loops：在外部代理（如 Claude 或自定义 LLM）中循环：

  1. 发现工具：代理查询 navigator.modelContext.getAvailableTools() 获取列表。
  2. 推理：LLM 基于工具描述生成调用计划。
  3. 执行：调用工具，浏览器运行 handler。
  4. 观察：返回结果注入提示，循环至任务完成。

伪代码（外部代理循环）：

async function agentLoop(task) {
  let state = { task, observations: [] };
  while (!done(state)) {
    const tools = await page.evaluate(() => navigator.modelContext.getAvailableTools());
    const action = await llm.reason(state, tools);  // ReAct: Thought -> Action
    if (action.type === 'tool') {
      const result = await page.evaluate((toolCall) => 
        navigator.modelContext.callTool(toolCall.name, toolCall.args)
      );
      state.observations.push(result);
    } else break;
  }
  return state.finalObservation;
}

落地参数：

  • 循环上限：10 步，超时 30s / 步。
  • 状态序列化：JSON，仅保留关键字段 <4KB。
  • 回滚：若工具失败 >3 次，降级 CLI 模式。

此循环取代 CLI 工作流：无需 Puppeteer，token 节省 90%，速度提升 5x（HN 讨论中 CDP MCP 变体）[2]。

监控与运维要点

  • 日志：handler 内 console.error，代理监控 DevTools Console。
  • 指标：工具调用率（>95% 成功）、延迟（<200ms）、用户确认率（敏感工具 <20% 拒绝）。
  • 告警：工具滥用（>100 次 / 分），prompt injection（输出异常模式）。
  • 回滚：feature flag 包裹注册，A/B 测试启用率 10%。

安全清单：

  1. 输入验证：handler 用 Zod/JSON Schema 校验。
  2. 速率限流：localStorage 计数，1s / 调用。
  3. 用户交互：navigator.modelContext.requestUserInteraction() 阻塞敏感链路，超时 10s。
  4. 隔离：工具不共享全局状态，使用 closure。

取代 CLI 的迁移清单

  1. 审计 CLI 脚本：提取核心函数为 handler。
  2. 注册工具：1:1 映射，添加 Schema。
  3. 测试循环：模拟 5 场景，准确率 >90%。
  4. 部署：CDN JS 注入，支持渐进增强。
  5. 监控 1 周，迭代 Schema。

风险：API 不稳定（预览阶段），浏览器锁定（暂 Chrome），规模限（<50 工具 / 页）。但作为代理未来的入口，值得先行投资。

资料来源： [1] Chrome Developers Blog: WebMCP early preview. https://developer.chrome.com/blog/webmcp-epp [2] HN WebMCP thread. https://news.ycombinator.com/item?id=45622604

（本文约 1200 字）

查看归档