在 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 操作网页的方式放在一起，大致可以分成三类：
| 维度 | 视觉 Agent | CDP / 浏览器自动化 | WebMCP（Chrome 原生） |
|---|---|---|---|
| 是否需要额外后端 | 否 | 是 | 否 |
| Token 消耗 | 极高 | 中等 | 很低 |
| 准确率 / 稳定性 | 低 | 中等 | 高（显式声明） |
| 登录态继承 | 困难 | 复杂 | 天然继承 |
| 开发成本 | 无需改网站 | 需要后端桥接 | 前端几行代码 |
可以看到，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) => {
returnawait api.search(params);
}
});
}
这样网页就可以向 AI 暴露一个工具。
Agent 不需要操作 UI，直接调用即可。
甚至可以“零代码”接入
WebMCP 还支持一种 声明式方式。
很多网站甚至不需要写 JS，只需要给表单加几个属性，例如：
<form
data-tool-name="search_products"
data-tool-description="搜索商品">
<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 与互联网交互的方式，可能会发生一次很大的变化。
相关文章
