一、WebMCP是什么 1\. 基本定义 WebMCP（Web Model Context Protocol）是**Google与Microsoft在W3C框架下联合推动的浏览器原生Web API**，Chrome 146已推出早期预览版本，核心目标是让网页主动将自身能力封装为结构化工具，供AI Agent直接调用，解决当前Agent操作网页的稳定性与效率问题。 2\. 核心思想 **把交互从UI…
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：
<!-- 示例：请假申请表单 --><formtoolname="submitLeaveRequest"tooldescription="Submit a leave request with date and reason"><inputname="date"type="date"requiredtoolhint="Leave date in YYYY-MM-DD format"><inputname="reason"type="text"minlength="2"maxlength="200"required><buttontype="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"},// 非只读，需用户确认asyncexecute({ 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"}});
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
解析常见 curl 参数并生成 fetch、axios、PHP curl 或 Python requests 示例代码。 在线工具，curl 转代码在线工具，online
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online
将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online
通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online