30 秒快速回答
WebMCP（Web Model Context Protocol） 是 Google 与 Microsoft 联合起草、在 W3C Web Machine Learning Community Group 孵化的浏览器新标准：它让网站把自身能力（搜索、预订、加购、填写表单等）注册成结构化的工具，AI 智能体进入网页后直接像调用 API 一样调用它们，而不再靠截图识别、DOM 解析和模拟点击去”猜”网页怎么用。一句话价值：你的网站第一次有了一个为 AI 设计、与人类界面并行的官方接口。目前 Chrome 149–156 已开放 origin trial，Expedia、Booking.com、Shopify 等头部平台已抢先接入。
一、AI Agent 逛网站，为什么这么难？
2026 年的浏览器智能体（browser agent）访问网站时，本质上还在干一件非常原始的事：截图 → 视觉模型猜测哪里能点 → 模拟鼠标点击 → 再截图。这套”actuation（驱动）”路线有三个致命伤：
| 痛点 | 后果 |
|---|---|
| 昂贵 | 每帧截图约消耗 2000+ token，一个多步任务动辄数万 token |
| 脆弱 | CSS 一改、React 状态一变、分页一换，流程立刻断 |
| 失真 | 模型经常”幻觉”点击了根本不存在的按钮，且错误会逐级累积 |
根本原因在于：网站是为人的眼睛设计的，不是为机器设计的。WebMCP 正是针对这个结构性问题的答案。
二、WebMCP 与 MCP：一字之差，两个世界
很多人以为 WebMCP 是 MCP 的升级版，其实它俩是不同层的互补协议：
| 维度 | MCP（服务端） | WebMCP（浏览器端） |
|---|---|---|
| 连接对象 | 连接 Agent 与后端工具/API | 连接 Agent 与网页内的 JS 工具 |
| 运行位置 | 独立部署的 Server 进程 | 用户浏览器当前打开的标签页 |
| 鉴权方式 | 独立凭据/服务账号 | 直接继承当前登录用户会话 |
| 是否需要部署 | 需要单独 Server | 无需，纯前端 |
| 典型场景 | 查数据库、调内部 API | 在页面上搜索、下单、预订、填表 |
推荐架构是两者并用：用 MCP 让 Agent 查后端数据，用 WebMCP 让 Agent 在第三方网站上完成交易动作。就像官方说的：”MCP 让 Agent 调用你的数据库，WebMCP 让 Agent 帮用户在店里结账。”
三、怎么用？两种接入方式
方式一：声明式 API（零 JS 成本）
给现有 HTML 表单加上 toolname、tooldescription、toolparamdescription 三个属性即可，浏览器会自动为 Agent 生成类型化的工具：
<form toolname="search_products"
tooldescription="按关键词搜索商品目录">
<input name="query" type="text"
toolparamdescription="搜索关键词" required />
<select name="category">
<option value="electronics">电子</option>
<option value="books">图书</option>
</select>
<button type="submit">搜索</button>
</form>
Agent 现在可以一步调用 search_products({query:"laptop", category:"electronics"})，替代原本 8 次 UI 交互。
方式二：命令式 API（复杂场景）
动态流程、自定义逻辑用 document.modelContext.registerTool() 注册（Chrome 150 起旧写法 navigator.modelContext 已弃用）：
if (document.modelContext) {
document.modelContext.registerTool({
name: "add_to_cart",
description: "按 SKU 将商品加入购物车",
inputSchema: {
type: "object",
properties: {
sku: { type: "string", description: "商品 SKU" },
quantity: { type: "number", minimum: 1, default: 1 }
},
required: ["sku"]
},
execute: async ({ sku, quantity }) => {
const r = await cartAPI.addItem(sku, quantity);
return { cart_id: r.id, item_count: r.items.length };
}
});
}
三个核心机制支撑这一切：Discovery（Agent 发现页面上有哪些工具）、JSON Schema（输入输出类型精确约束，杜绝猜字段含义）、State（共享当前页面状态，多步流程不丢上下文）。
四、为什么效率提升是结构性的？
| 指标 | 截图式自动化 | WebMCP |
|---|---|---|
| 单次交互 token | 2000+ / 帧 | 20–100 / 次调用 |
| 准确率 | 约 70%（受布局影响） | 约 98%（结构化） |
| CSS 变更影响 | 立刻失效 | 零影响 |
| 多步流程 | 易漂移、错误累积 | 确定性执行 |
实测数据显示：WebMCP 相比视觉抓取带来 约 89% 的 token 节省、67% 更少的错误、45% 更高的任务完成率。对站点运营者意味着：同样的任务，Agent 在你的网站上更便宜、更可靠，自然更愿意”选中”你的站——这正是下一波 AI SEO 竞争的主战场。
五、安全模型与当前限制
安全设计是 WebMCP 的亮点，也带着明显约束：
- 权限边界：工具由
toolsPermissions Policy 管控，默认self（仅同源可注册），跨源 iframe 需显式加allow="tools"；且要求 origin isolation。 - 继承用户会话：工具以当前登录用户权限运行，无需新增凭据，但也意味着安全团队无法独立审计或回收 Agent 的访问——提示注入仍是活跃风险。
- readOnlyHint：用注解区分只读工具与改变状态的工具，敏感操作可要求用户确认。
现实限制：目前仅 Chrome（149–156 origin trial）可用，Edge 紧随其后，Firefox 预计 Q3 2026、Safari 尚无明确时间表；且必须打开可见的浏览器标签页（不支持无头调用）。API 仍在快速演进，生产落地前务必追踪最新规范。
总结
WebMCP 的使命一句话：把”让 Agent 猜你的网站怎么用”变成”告诉 Agent 你的网站能做什么”。它不替代 MCP，而是把 MCP 的”工具化”思路搬进浏览器，成为 Agentic Web 时代网站的基础设施。即便短期看不到 Agent 流量红利，抢先注册好工具、把表单语义化，是成本极低的”占位”——等 AI 驱动的浏览成为主流时，你不至于被跳过。
延伸阅读：