WebMCP 从零上手Google 刚推出的 AI Agent 网页标准以后网站不用看了直接调上周 Google I/O 2026 上Chrome 团队扔出一个新标准叫 WebMCP。它要解决的问题很直白现在的 AI Agent 访问网站像个瞎子摸象——截图、识别、猜按钮在哪。WebMCP 让网站直接暴露工具给 Agent 调用。Expedia、Shopify、Booking.com 已经在实验了。这篇带你搞清楚它是什么、怎么写、什么时候能上线。AI Agent 访问网站的现状太蠢了如果你看过 Claude Code 或浏览器 Agent 操作一个网页你见过这个画面Agent 截一张网页截图把截图送给视觉模型模型说搜索框在左上角坐标 (320, 180)Agent 模拟鼠标点击那个位置再截图确认点对了没一趟来回 3-5 秒。搜一个酒店可能要 8-10 个来回。每一步都有概率看错。这还只是搜索。如果 Agent 想帮你「订一张 6 月 10 日深圳飞北京的机票靠窗不坐摆渡车」它得在携程的 DOM 树里翻好几层才能找到那个复选框——如果携程改版了Agent 就瞎了。核心问题网页 UI 是给人设计的但 AI Agent 需要的是结构化接口。WebMCP 是什么一句话让网站能对 AI Agent 说「我有哪些功能你直接调」而不是让 Agent 去猜。全称 Web Model Context ProtocolChrome 和 Edge 推的一个 W3C 标准提案。不用 MCP Server、不用后端改代码前端就能注册工具。它有兩種写法声明式Declarative— 给表单加个标签就行formidsearch-formwebmcp-toolsearch_hotelsinputnamedestinationwebmcp-paramcityplaceholder目的地/inputnamecheckinwebmcp-paramdate_intypedate/inputnameguestswebmcp-parampeopletypenumber/buttontypesubmit搜索/button/form加了webmcp-tool属性后Agent 不用找表单——它直接拿到一个search_hotels(city, date_in, people)函数签名传参就完事了。命令式Imperative— 更灵活可以做复杂逻辑// 注册一个工具让 Agent 能直接在页面上操作navigator.webmcp.registerTool({name:book_flight,description:预订航班返回订单号,parameters:{from:{type:string,description:出发城市},to:{type:string,description:到达城市},date:{type:string,description:日期 YYYY-MM-DD},window_seat:{type:boolean}},handler:async(params){// 正常的前端逻辑——调 API、填表单、验证constorderawaitflightAPI.book(params);return{order_id:order.id,total_price:order.price};}});Agent 调用book_flight({from:深圳, to:北京, date:2026-06-10, window_seat:true})——一行代码不用截图、不用模拟点击、不用怕改版。跟传统 MCP 有什么关系名字像其实是两个东西MCP (Model Context Protocol)WebMCP跑在哪后端服务器浏览器里谁提供服务后端开发者写 MCP Server前端开发者在网页上注册Agent 怎么连通过stdio或 HTTP浏览器内置 APIAgent 直接调典型场景IDE 里的代码工具网页上的预订、搜索、支付WebMCP 借了 MCP 的工具调用思想但实现方式完全不同——它不需要后端配合纯前端就能做。谁已经在用了Chrome 团队在 I/O 上公布了一份实验名单Expedia酒店搜索、Booking.com、Shopify商品搜索下单、Credit Karma、TurboTax、Redfin房源搜索、Etsy、Instacart、Target。怎么理解这批名字全是「用户在网页上完成交易」的场景。搜索商品 → 比价 → 下单 → 支付现在可以让 Agent 以函数调用的方式完成而不是模拟人类点击。开发者现在能做什么Chrome 149 开启 Origin Trial实验性功能需申请 token。配好之后你的网页就能注册 WebMCP 工具了。Gemini in Chrome 即将支持 WebMCP。意味着 Chrome 内置的 AI 助手能直接调用你网站上的工具——用户说「帮我在 Booking 上订一间下周曼谷的酒店」Gemini 不截图调函数。可以先用 Polyfill 体验。官方提供了mcp-b/global这个 npm 包在不支持 WebMCP 的浏览器上模拟整套 API。现在就能写 demo等 Chrome 149 一到直接切。npminstallmcp-b/globalimportmcp-b/global;// 之后 navigator.webmcp 就能用了不是什么万能药有几个坑要先知道安全问题还没完全解决。一个 Agent 调用你网站的transfer_money函数权限谁来管Chrome 的方案是浏览器层面做仲裁但具体机制还在讨论中。Google 自己管这叫「致命三角」lethal trifecta。不是所有网站都需要适配。内容型网站博客、文档Agent 用传统抓取就够了。WebMCP 真正有价值的是「交易型」网站——搜索、预订、支付、表单提交。手机端还早。目前只定了桌面端 Chrome/Edge 的路线图移动端 Safari 和 Chrome 还没时间表。跟开发者有什么关系如果你是一个前端开发者这个标准值得关注的原因就一条以后你的网站不仅要服务人类用户还要服务 AI Agent。这不是要不要的问题——Expedia 已经在做了你不做Agent 用户就不会来你的网站。如果你是后端开发者短期内不用动。WebMCP 的设计是前端注册工具Agent 直接调用不需要后端写 MCP Server。但长期来看如果你的网站有复杂业务流程比如金蝶的审批流WebMCP 后端 MCP 组合拳才是完整方案。总结WebMCP 解决了一个很实在的问题AI Agent 越来越多但网页还是给人类设计的。通过让网页暴露结构化工具Agent 不再需要看网页——直接调函数快、准、不怕改版。Chrome 149 Origin Trial 开放大厂已经在实验。现在学等标准落地你就是第一批能用的开发者。你用 AI Agent 操作过网页吗有没有被点不到按钮逼疯过评论区聊聊。 作者Aliaoo 专注 AI 工具实战、云部署、自动化脚本。每篇都是亲测可跑的教程。️需要云服务器跑项目 CSDN 开发云常年折扣新用户首单特惠 觉得有用就点个赞想追更就点个关注——下次搜到我不靠缘分。
WebMCP 从零上手：Google 刚推出的 AI Agent 网页标准，以后网站不用“看“了，直接“调“
WebMCP 从零上手Google 刚推出的 AI Agent 网页标准以后网站不用看了直接调上周 Google I/O 2026 上Chrome 团队扔出一个新标准叫 WebMCP。它要解决的问题很直白现在的 AI Agent 访问网站像个瞎子摸象——截图、识别、猜按钮在哪。WebMCP 让网站直接暴露工具给 Agent 调用。Expedia、Shopify、Booking.com 已经在实验了。这篇带你搞清楚它是什么、怎么写、什么时候能上线。AI Agent 访问网站的现状太蠢了如果你看过 Claude Code 或浏览器 Agent 操作一个网页你见过这个画面Agent 截一张网页截图把截图送给视觉模型模型说搜索框在左上角坐标 (320, 180)Agent 模拟鼠标点击那个位置再截图确认点对了没一趟来回 3-5 秒。搜一个酒店可能要 8-10 个来回。每一步都有概率看错。这还只是搜索。如果 Agent 想帮你「订一张 6 月 10 日深圳飞北京的机票靠窗不坐摆渡车」它得在携程的 DOM 树里翻好几层才能找到那个复选框——如果携程改版了Agent 就瞎了。核心问题网页 UI 是给人设计的但 AI Agent 需要的是结构化接口。WebMCP 是什么一句话让网站能对 AI Agent 说「我有哪些功能你直接调」而不是让 Agent 去猜。全称 Web Model Context ProtocolChrome 和 Edge 推的一个 W3C 标准提案。不用 MCP Server、不用后端改代码前端就能注册工具。它有兩種写法声明式Declarative— 给表单加个标签就行formidsearch-formwebmcp-toolsearch_hotelsinputnamedestinationwebmcp-paramcityplaceholder目的地/inputnamecheckinwebmcp-paramdate_intypedate/inputnameguestswebmcp-parampeopletypenumber/buttontypesubmit搜索/button/form加了webmcp-tool属性后Agent 不用找表单——它直接拿到一个search_hotels(city, date_in, people)函数签名传参就完事了。命令式Imperative— 更灵活可以做复杂逻辑// 注册一个工具让 Agent 能直接在页面上操作navigator.webmcp.registerTool({name:book_flight,description:预订航班返回订单号,parameters:{from:{type:string,description:出发城市},to:{type:string,description:到达城市},date:{type:string,description:日期 YYYY-MM-DD},window_seat:{type:boolean}},handler:async(params){// 正常的前端逻辑——调 API、填表单、验证constorderawaitflightAPI.book(params);return{order_id:order.id,total_price:order.price};}});Agent 调用book_flight({from:深圳, to:北京, date:2026-06-10, window_seat:true})——一行代码不用截图、不用模拟点击、不用怕改版。跟传统 MCP 有什么关系名字像其实是两个东西MCP (Model Context Protocol)WebMCP跑在哪后端服务器浏览器里谁提供服务后端开发者写 MCP Server前端开发者在网页上注册Agent 怎么连通过stdio或 HTTP浏览器内置 APIAgent 直接调典型场景IDE 里的代码工具网页上的预订、搜索、支付WebMCP 借了 MCP 的工具调用思想但实现方式完全不同——它不需要后端配合纯前端就能做。谁已经在用了Chrome 团队在 I/O 上公布了一份实验名单Expedia酒店搜索、Booking.com、Shopify商品搜索下单、Credit Karma、TurboTax、Redfin房源搜索、Etsy、Instacart、Target。怎么理解这批名字全是「用户在网页上完成交易」的场景。搜索商品 → 比价 → 下单 → 支付现在可以让 Agent 以函数调用的方式完成而不是模拟人类点击。开发者现在能做什么Chrome 149 开启 Origin Trial实验性功能需申请 token。配好之后你的网页就能注册 WebMCP 工具了。Gemini in Chrome 即将支持 WebMCP。意味着 Chrome 内置的 AI 助手能直接调用你网站上的工具——用户说「帮我在 Booking 上订一间下周曼谷的酒店」Gemini 不截图调函数。可以先用 Polyfill 体验。官方提供了mcp-b/global这个 npm 包在不支持 WebMCP 的浏览器上模拟整套 API。现在就能写 demo等 Chrome 149 一到直接切。npminstallmcp-b/globalimportmcp-b/global;// 之后 navigator.webmcp 就能用了不是什么万能药有几个坑要先知道安全问题还没完全解决。一个 Agent 调用你网站的transfer_money函数权限谁来管Chrome 的方案是浏览器层面做仲裁但具体机制还在讨论中。Google 自己管这叫「致命三角」lethal trifecta。不是所有网站都需要适配。内容型网站博客、文档Agent 用传统抓取就够了。WebMCP 真正有价值的是「交易型」网站——搜索、预订、支付、表单提交。手机端还早。目前只定了桌面端 Chrome/Edge 的路线图移动端 Safari 和 Chrome 还没时间表。跟开发者有什么关系如果你是一个前端开发者这个标准值得关注的原因就一条以后你的网站不仅要服务人类用户还要服务 AI Agent。这不是要不要的问题——Expedia 已经在做了你不做Agent 用户就不会来你的网站。如果你是后端开发者短期内不用动。WebMCP 的设计是前端注册工具Agent 直接调用不需要后端写 MCP Server。但长期来看如果你的网站有复杂业务流程比如金蝶的审批流WebMCP 后端 MCP 组合拳才是完整方案。总结WebMCP 解决了一个很实在的问题AI Agent 越来越多但网页还是给人类设计的。通过让网页暴露结构化工具Agent 不再需要看网页——直接调函数快、准、不怕改版。Chrome 149 Origin Trial 开放大厂已经在实验。现在学等标准落地你就是第一批能用的开发者。你用 AI Agent 操作过网页吗有没有被点不到按钮逼疯过评论区聊聊。 作者Aliaoo 专注 AI 工具实战、云部署、自动化脚本。每篇都是亲测可跑的教程。️需要云服务器跑项目 CSDN 开发云常年折扣新用户首单特惠 觉得有用就点个赞想追更就点个关注——下次搜到我不靠缘分。
