WebMCP 是 Google 与 Microsoft 联合推动的浏览器原生 Web API，允许网页将业务动作封装为结构化工具供 AI Agent 直接调用。相比 Anthropic MCP 的后端架构，WebMCP 采用纯客户端模式，利用浏览器上下文降低 Token 消耗并提升稳定性。接入支持声明式 HTML 属性与命令式 JS 注册两种方案。实施需遵循最小权限原则，注意安全风险如权限放大与隐私泄露，建议优先在可控内部系统从只读工具试点。
WebMCP（Web Model Context Protocol）是 Google 与 Microsoft 在 W3C 框架下联合推动的浏览器原生 Web API，Chrome 146 已推出早期预览版本，核心目标是让网页主动将自身能力封装为结构化工具，供 AI Agent 直接调用，解决当前 Agent 操作网页的稳定性与效率问题。
把交互从 UI 层搬到语义层：不再依赖按钮点击、坐标定位或 DOM 解析，而是让网页直接暴露'提交请假''搜索航班''加入购物车'等业务动作，形成结构化工具契约，Agent 按契约调用而非'猜 UI'。
当前 Agent 操作网页的两大路线均存在缺陷：
| 交互路线 | 核心问题 | WebMCP 解决方案 |
|---|---|---|
| 视觉路线（截图识别） | 慢、贵（约 2000 token/次）、易出错 | 语义化工具调用，Token 消耗减少约 89% |
| DOM/选择器路线 | 脆弱（改版即失效）、复杂场景难处理 | 工具契约不变则不受 UI 变更影响 |
WebMCP 让 Agent 从'呈现层倒推业务动作'转变为'直接调用业务动作'，稳定性与效率显著提升。
WebMCP 与 Anthropic MCP（Model Context Protocol）虽同名，但架构完全不同，聚焦领域互补，成熟应用可同时部署。
| 对比维度 | Anthropic MCP | WebMCP |
|---|---|---|
| 协议基础 | JSON-RPC 2.0 | 非 JSON-RPC，纯 Web 原生 API |
| 架构模式 | Client-Server（需后端服务器） | 纯客户端（网页即'服务器'） |
| 运行位置 | 后端独立服务 | 浏览器前端环境 |
| 认证机制 | OAuth 2.1 | 浏览器原有认证（Cookie、Session） |
| 可用性 | 服务器常驻运行 | 用户导航到页面时才可用 |
| 聚焦场景 | 后端服务集成、跨系统数据访问 | 前端浏览器交互、网页功能调用 |
| 核心优势 | 统一后端集成标准 | 天然复用浏览器上下文、低接入成本 |
关键结论：Anthropic MCP 解决'AI 如何连接后端服务'，WebMCP 解决'AI 如何操作前端网页'，二者相辅相成，非竞争关系。
chrome://flags/#enable-web-model-context）或使用 MCP-B Polyfill 兼容其他浏览器适用于简单表单场景，直接在 HTML 标签添加属性，浏览器自动生成工具 Schema：
<!-- 示例：请假申请表单 -->
<form toolname="submitLeaveRequest" tooldescription="Submit a leave request with date and reason">
<input name="date" type="date" required toolhint="Leave date in YYYY-MM-DD format">
<input name="reason" type="text" minlength="2" maxlength="200" required>
<button type="submit">提交申请</button>
</form>
适用于复杂交互场景，通过 navigator.modelContext.registerTool() 注册动态工具：
// 示例：注册'提交请假'工具
navigator.modelContext.registerTool({
name: "submitLeaveRequest",
description: "Submit a leave request in the current OA session",
inputSchema: {
type: "object",
properties: {
date: { type: "string", pattern: "^\\d{4}-\\d{2}-\\d{2}$" },
reason: { type: "string", minLength: 2, maxLength: 200 }
},
required: ["date", "reason"]
},
outputSchema: { type: "string", description: "Result message" },
annotations: { readOnlyHint: "false" }, // 非只读，需用户确认
async execute({ date, reason }) {
// 复用现有业务逻辑
const result = await window.oa.leave.submit({ date, reason });
return {
content: [{ type: "text", text: result.message }]
};
}
});
// 示例：提供购物车上下文
navigator.modelContext.provideContext({
name: "cart",
description: "Current shopping cart snapshot",
data: {
items: [
{ sku: "SKU-001", qty: 2, name: "无线鼠标" }
],
total: 199.0,
currency: "CNY"
}
});
createOrder() 而非 clickSubmitBtn()，避免 UI 耦合annotations 区分只读、需确认、破坏性动作，强化安全控制@mcp-b/webmcp-ts-sdk）支持非 Chrome 浏览器useWebMCP 钩子）、Vue 3（组合式 API）等已有成熟适配方案适合使用 WebMCP 的场景：
不适合使用 WebMCP 的场景：
WebMCP 标志着浏览器开始将 AI Agent 视为'一等公民'，推动 Web 生态向'双用户群'（人类+Agent）演进。短期落地将是'WebMCP 工具化站点 + 传统自动化兜底'的混合路线，长期有望成为 AI 与 Web 交互的标准范式。
核心建议：将 WebMCP 视为工程化能力而非银弹，优先在可控内部系统试点，从只读工具入手，强化安全与可观测性，逐步扩展至核心业务流程，为 Agent 时代的 Web 交互提前布局。
参考资料
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online