Chrome 引入 WebMCP：让网页直接为 AI 提供原生接口，告别 UI 自动化

在 Chrome 刚刚发布的 146 版本中，加入了一项很有意思的实验能力：WebMCP。

简单总结就是：网页可以直接把自己的能力暴露给 AI Agent 调用。过去 AI 想操作网页，只能模拟人的操作；而 WebMCP 的思路是：让网页直接提供“函数接口”。

AI 不再操作 UI，而是直接调用工具。这其实是一次挺重要的架构变化。

过去：AI 操作网页只能模拟人类

在 WebMCP 出现之前，如果 AI Agent 想和网页交互，一般需要借助浏览器自动化工具，比如：

• Puppeteer

• Playwright

这些工具底层其实依赖的是 Chrome DevTools Protocol（CDP）。

CDP 可以理解为一套浏览器远程控制协议，它允许程序直接控制浏览器，例如：

• 点击按钮

• 填写表单

• 获取 DOM

• 执行 JavaScript

很多自动化工具（例如 Puppeteer、Playwright）本质上都是通过 CDP 在控制浏览器。

整体流程通常是：

Agent → 自动化脚本 → 浏览器 → 网页

Agent 并不真正理解网页功能，它只是模拟用户行为：

• 打开网页

• 找输入框

• 输入内容

• 点击按钮

目前主流 Agent 大致有三种实现方式。

DOM 自动化

最传统的方式是读取 DOM。例如：

click("#submit")
fill("#email")

这种方式和爬虫很像，速度快、成本低，但 UI 一旦变化就容易失效。

截图 + 视觉模型

另一种方式是让 AI“看网页”。例如：

• OpenAI Operator

• Claude Computer Use

流程通常是：

截图页面 → AI理解界面 → 找按钮 → 执行动作

这种方式理论上可以操作任何网页，但成本比较高。一次页面理解往往会消耗几万甚至十几万 tokens。

DOM + Screenshot 混合

很多 Agent 框架会同时使用：

• DOM

• Screenshot

• Accessibility tree

DOM 提供结构信息，截图提供视觉信息。

但不管是哪种方式，本质上都是：让 AI 去适配人类设计的 UI。

如果把目前 Agent 操作网页的方式放在一起，大致可以分成三类：

可以看到，WebMCP 最大的变化其实不是“更快”，而是：网页第一次可以为 AI 提供正式接口。

WebMCP：让网页直接提供 Agent 工具

WebMCP 想解决的问题其实很简单：让网页直接为 AI 提供接口。

如果网页实现了 WebMCP，浏览器就可以把网页能力暴露给 Agent。

相比传统自动化方案，这其实是一次架构变化：

过去：

Agent → 自动化脚本 → 浏览器 → 网页

现在：

Agent → Browser → Web Page（MCP Tools）

网页可以声明：

• 有哪些工具

• 工具需要什么参数

• 返回什么结果

例如电商网站可以提供：

search_products(query)

AI 可以直接调用：

search_products("iphone")

网页返回 JSON 数据即可。

整个过程甚至不需要操作 UI。

前端代码可以注册 Agent 工具

WebMCP 提供了浏览器原生 API，例如：

if ('modelContext' in navigator) {
  navigator.modelContext.registerTool({
    name: "search_products",
    description: "搜索商品",
    inputSchema: {
      type: "object",
      properties: {
        query: { type: "string" }
      },
      required: ["query"]
    },
    execute: async (params) => {
      return await api.search(params);
    }
  });
}

这样网页就可以向 AI 暴露一个工具。

Agent 不需要操作 UI，直接调用即可。

甚至可以“零代码”接入

WebMCP 还支持一种声明式方式。

很多网站甚至不需要写 JS，只需要给表单加几个属性，例如：

<form
  >="search_products"
  >="搜索商品">
  <input name="query" required>
  <button type="submit">搜索</button>
</form>

浏览器会把这个表单自动转换成 Agent 工具。

AI 可以直接调用：

search_products("iphone")

而不需要真正提交 UI 表单。

WebMCP 为什么重要

传统 Agent 操作网页通常是：

截图 → AI解析UI → 找元素 → 点击

一次页面解析可能需要几万 tokens。

而 WebMCP 的方式是：

Agent → 调用工具 → 返回 JSON

Token 消耗往往可以降低一个数量级。

更重要的是：稳定性会大幅提高。

因为 AI 不再依赖 UI。

目前的状态

WebMCP 目前仍然是早期实验版。

在 Chrome 146 中可以通过 flag 启用：

chrome://flags/#enable-webmcp-testing

同时网站也需要主动实现 WebMCP。

所以短期内它不会取代网页自动化。

但如果未来越来越多网站开始提供 Agent Tools，AI 与互联网交互的方式可能会发生一次很大的变化。