Chrome 149 给网站加了一层 AI Agent 接口：WebMCP origin trial 实测省 90% token

阿柯·前端架构 内容创作者 2026-09-02 13 阅读

现在的 AI Agent 操作网站，靠的是截图给视觉模型看、猜这个按钮是干嘛的。慢，不准，一改名就崩。Google 在 Chrome 149 里推了一个 origin trial，让网站主动把自己声明成「工具箱」——Agent 不再需要猜，直接调方法就行。早期的 polyfill 实测数据是：省 90% token。

Agent 操控网站的现状问题

一个 Agent 想帮你完成「在这个网站预约会议室」任务，传统的做法是：

  1. 加载页面，截图
  2. 给视觉模型看：「这是页面截图，哪个按钮是预约？」
  3. 模型猜是「立即预订」那个蓝色按钮
  4. 模拟点击，填表单
  5. 每一步都可能出错：按钮改名了、React 重新渲染后 DOM 结构变了、页面是单页应用没有 URL 变化

本质上，Agent 在用「破坏性读取」的方式理解网页。它完全不知道页面上到底有哪些「工具」可以用，只能靠猜。

WebMCP 是什么

WebMCP（Web Model Context Protocol）是 Chrome 149 开始 origin trial 的浏览器标准，让网站主动声明「我有哪些工具可以调用」。

核心思想：你的网页不只是一个 UI，而是一个带工具清单的 API。

声明式：给 HTML form 加两个属性

<form model-context:tool="bookSlot" model-context:tool-title="预约会议室">
  <input name="date" type="date">
  <input name="time" type="time">
  <button type="submit">确认预约</button>
</form>

浏览器自动把这个 form 打包成一个结构化工具。Agent 调用时直接传 {date: "...", time: "..."}，不需要解析 DOM。

命令式：JavaScript 注册复杂工具

document.modelContext.registerTool({
  name: "addToCart",
  description: "将商品加入购物车",
  inputSchema: {
    type: "object",
    properties: {
      productId: { type: "string" },
      quantity: { type: "number" }
    },
    required: ["productId", "quantity"]
  },
  annotations: { readOnlyHint: false },
  execute: async (input) => {
    const result = await api.addItem(input.productId, input.quantity);
    return `已添加 ${input.quantity} 件商品`;
  }
});

Agent 拿到的是结构化 JSON Schema 定义，不是猜出来的字段名。

90% token 节省怎么来的

传统 DOM 抓取方案：Agent 需要把整个页面结构发给模型，让模型从 HTML 里找哪里是预约表单、每个字段叫什么。

WebMCP 方案：网站声明工具清单 + 输入输出 Schema，Agent 只传 {date: "2026-09-03", time: "14:00"} 这样结构化的参数。

早期 polyfill 实测数据是：相比 DOM 截图方案，LLM token 消耗降低 90%。这个差距在大规模自动化场景里是决定性的。

安全模型：这里有真正的坑

Origin 隔离是硬前提。WebMCP 依赖 Origin-Agent-Cluster: ?1 HTTP 头。一旦页面通过 document.domain 做了跨域平滑（Origin-Agent-Cluster: ?0），WebMCP API 会被浏览器直接禁用。

Permissions-Policy: tools=(self)

工具注册默认只对同源主框架开启。跨域 iframe 想暴露工具，必须显式加 allow="tools"。

Indirect Prompt Injection 是真正的威胁。Agent 读取网页内容时，恶意方可以在页面里植入隐藏文本，让 Agent 执行非预期的操作。官方文档提到了两个缓解 hint：

  • untrustedContentHint：标注哪些内容来自不可信来源
  • readOnlyHint：声明某个工具是否会产生副作用

注意这是给 Agent 看的提示，不是浏览器强制执行的访问控制——最终还是要靠 Agent 自己判断。

用户知情同意是有的。工具执行需要用户交互确认，Agent 说「帮你预约」，浏览器会弹窗让用户点「确认」，不是静默执行。

和传统 MCP 的关系

Anthropic 的 MCP（Model Context Protocol）是「服务器端」工具的接口标准——让模型能调 Slack、GitHub、数据库。WebMCP 把同样的设计逻辑带进了浏览器：网站成了「本地 MCP 服务器」，Agent 在页面里直接调用工具。

这意味着同一套 schema 描述语言，对接后端工具和对接网页工具不需要两套理解方式。

三步下一步

第一步：跑通本地 Demo

Chrome 开启 chrome://flags/#enable-webmcp-testing 即可本地调试，无需 origin trial token。Google 官方有三个 Demo（zaMaker 点餐、React 航班搜索、法餐厅表单），clone 下来直接跑。

第二步：给现有表单加声明式工具

找一个搜索或预约表单，加上 model-context:tool 属性，注册 origin trial token 后上线。用 Chrome DevTools 的 Model Context Tool Inspector 扩展看 Agent 眼里这个表单长什么样。

第三步：评估哪些工具值得暴露

搜索框、预约表单、结账流程——这些是 Agent 完成用户任务的关键路径。先从这些开始，内部管理界面不要暴露。

局限性：origin trial 有效期到 2026 年 11 月 17 日，Firefox/Safari 暂无支持计划，暂无 headless 模式。

评论区

0 条评论

登录后可评论。

阿柯·前端架构 13 阅读