WebMCP适配教程：为浏览器AI预备好，让网页向 AI 提供工具，本博客已支持
内容提要
WebMCP是W3C孵化中的浏览器标准，由Chrome和Edge团队推动，让网页将自身功能注册为结构化工具供AI代理调用。它补充了MCP的盲区，管理前端界面。目前Chrome 146+可测试，149+支持Origin Trial，正式支持预计2026年中后期。文章还介绍了开发方式、注册工具示例及作者博客的15个工具应用。
延伸解读
WebMCP与MCP的分工
WebMCP与MCP并非竞争关系，而是互补：MCP运行在独立服务器，适合AI随时调用外部服务；WebMCP运行在浏览器标签页，能访问DOM和页面状态，适合AI与当前网页交互。这种分工意味着WebMCP能弥补MCP无法感知前端界面的盲区，让AI操作网页更直接、更稳定。
开发者需注意的兼容性细节
WebMCP目前仅Chrome支持，Firefox和Safari尚未跟进。Chrome 146+可手动开启flag测试，149+支持Origin Trial，正式支持预计2026年中后期。开发者需注意：token严格绑定域名，子域名需单独申请；Edge需单独申请token；接口已稳定，但需处理重复注册、路由切换后重新注册等问题。
实际体验的限制
目前WebMCP仍处于早期，没有正式发布的浏览器AI代理大规模调用网页工具。现在能体验的方式包括Chrome官方Inspector扩展和浏览器内置AI代理（逐步开放中）。使用前提是保持标签页打开，不支持无头调用。因此，普通用户暂时难以直接体验，更多是开发者先行测试。
Q&A
WebMCP是什么？它与MCP有什么区别？
WebMCP（Web Model Context Protocol）是W3C孵化中的浏览器标准提案，由Chrome和Edge团队推动，允许网页将自身功能注册为结构化工具供浏览器内的AI代理调用。与MCP不同，MCP运行在独立服务器上，通过JSON-RPC协议持久运行，用于AI调用外部服务；而WebMCP运行在浏览器标签页中，使用浏览器原生API，能访问DOM和页面状态，用于AI访问网站时的即时交互。简单说，MCP管后端，WebMCP管前端，两者互补。
WebMCP的浏览器兼容性现状如何？
Chrome 146+可通过chrome://flags/#enable-webmcp-testing手动开启；Chrome 149+支持Origin Trial，站点申请token后用户无需开flag；正式广泛支持预计在2026年中后期。Firefox和Safari目前没有公开跟进计划，但作为W3C提案，大概率会跟上。
如何为网站申请WebMCP的Origin Trial token？
需要去Chrome Origin Trials控制台（https://developers.chrome.com/origintrials/）用Google账号登录，找到WebMCP试用，点击Register注册，填写完整域名（如https://blog.zhheo.com）和用途说明，提交后生成token，有效期约半年（Chrome 149–156），到期可续期。注意token严格绑定origin，子域名需单独申请。
WebMCP的部署方式有哪些？如何验证token生效？
部署token有两种方式：meta标签（适合静态站）或HTTP响应头。验证是否生效：打开Chrome DevTools → Application → Origin Trials，看到WebMCP标记为active即可。
WebMCP的开发方式有哪些？注册工具的基本代码示例是什么？
WebMCP提供声明式和命令式两套API。声明式适合简单场景，在HTML属性中声明；命令式更灵活，核心接口是registerTool。Chrome 150后推荐用document.modelContext，旧构建用navigator.modelContext。示例代码：await document.modelContext.registerTool({ name: 'searchPosts', description: '搜索站内文章', inputSchema: { type: 'object', properties: { query: { type: 'string', description: '关键词' } }, required: ['query'] }, execute: async ({ query }) => { const res = await fetch(`/api/search?q=${encodeURIComponent(query)}`); const data = await res.json(); return JSON.stringify(data); } });
使用WebMCP时有哪些常见的坑？
常见坑包括：execute的返回值最好返回纯字符串，部分实现会拒收对象；用AbortSignal支持注销，重复注册会报Duplicate tool name；单页应用路由切换后要重新注册，工具读的是当前DOM；上线前用getTools()验证工具注册成功。
作者博客的WebMCP注册了哪些工具？
作者博客注册了15个工具，覆盖内容获取（如search_posts、read_page_content）、页面导航（如navigate_page、subscribe）、媒体与阅读（如music_control、play_podcast）、互动（如fill_comment、open_ai_chat）等。
如何体验WebMCP？
目前可以通过Chrome官方调试扩展「Model Context Tool Inspector」体验，安装后打开支持WebMCP的网站（如blog.zhheo.com），扩展中可查看工具、手动调用，还能用自然语言模拟代理对话。另外，等Chrome的Gemini AI和Edge的Copilot正式支持后，可直接在侧边栏对话使用。
