网站主动告诉AI能做什么：WebMCP把操作网页的主动权交还给了谁

核心洞察

WebMCPWeb Model Context Protocol（Web模型上下文协议），由谷歌和微软工程师联合开发、通过W3C Web机器学习社区组孵化的网页标准提案，允许网站通过浏览器API向AI代理暴露结构化、可调用的工具。 这件事最有意思的地方在于，它把"AI 操作网页"的主动权交还给了网站自己。过去我们总想着让 AI 去猜按钮在哪、模拟点击，现在网站可以主动告诉 AI"我有哪些能力"，这个思路的转变比技术本身更值得关注。不过说实话，现在能真正用上的场景还很少，Chrome 和 Edge 的支持都在路上，这篇文章更像是提前占个坑。

---

MCPModel Context Protocol - a protocol that enables AI models to access external tools, data sources, and services to enhance their capabilities and context awareness. 这两年快被说烂了。各种 server 遍地都是，数据库、搜索、设计工具一个个接进来。但有个东西一直没人正经做：网页自己。

网页其实是 AI 最该直接操作的载体。它有 UI、有状态、带着用户的登录身份，AI 想帮你干活的时候，与其靠截图猜、靠坐标点，不如让网站自己把能力说清楚。这个想法就是 WebMCP。

核心结论

1. WebMCP 是 W3C 孵化中的浏览器标准提案，由 Chrome 和 Edge 团队共同推进，允许网页将自身功能注册为结构化工具，供浏览器内 AI 代理直接发现和调用，与后端 MCP 形成前后端互补关系。

2. 兼容性方面，Chrome 146+ 可通过 chrome://flags/#enable-webmcp-testing 手动开启，Chrome 149+ 支持 Origin TrialChrome提供的实验性功能线上试用机制，站点申请token后可在生产环境启用未正式发布的Web平台特性，用户无需手动开启flag。 让线上站点无需用户开 flag 即可生效，正式广泛支持预计在 2026 年中后期；Firefox 和 Safari 目前无公开跟进计划。

3. WebMCP 提供声明式和命令式两套 API，核心接口为 registerTool，Chrome 150 之后推荐使用 document.modelContext；实际开发中需注意 execute 返回值应为纯字符串、单页应用路由切换后需重新注册工具等坑点。

4. 该博客已上线 15 个 WebMCP 工具，覆盖内容获取（如 search_posts、read_page_content）、页面导航（如 navigate_page）、媒体与阅读（如 music_control、play_podcast）及互动（如 fill_comment、open_ai_chat）四类功能，脚本自动探测 modelContext 存在则注册、不存在则静默跳过。

5. 当前 WebMCP 仍处早期，尚无正式发布的浏览器 AI 代理在生产环境大规模调用网页工具；现阶段可通过 Chrome 官方 "Model Context Tool InspectorChrome官方提供的调试扩展，可在真实页面上查看已注册工具、手动调用，并用自然语言模拟代理对话。" 扩展在真实页面上查看和手动调用工具进行体验，Chrome Gemini AI 与 Edge Copilot 的支持仍在路上。

先从 MCP 说起

MCP（Model Context Protocol）是给 AI 定义的一套标准接口，让模型能调用外部工具、读数据、执行操作。常见的做法是单独搭一个 MCP server，把 API、数据库、命令行暴露给 AI，再在客户端里配置连接。这套东西已经比较成熟，适合"AI 随时调用某个服务"的场景。

但它有个盲区：网站的前端界面。MCP server 是独立进程，不知道页面长什么样、用户登录了什么、正在看哪篇文章。要让 AI 操作网页，过去只能靠浏览器自动化去模拟点击，脆弱且慢。

WebMCP 就是补这个空位的。

WebMCP（Web Model Context Protocol）是 W3C 孵化中的浏览器标准提案，由 Chrome 和 Edge 团队一起推。它允许网页把自身功能注册成结构化工具，供浏览器内的 AI 代理直接发现和调用。

和 MCP 的定位不一样：

一句话概括：MCP 管后端，WebMCP 管前端，两者互补，不冲突。

兼容性现状

• Chrome 146+ 可以到 chrome://flags/#enable-webmcp-testing 手动开启
• Chrome 149+ 支持 Origin Trial，站点可以申请 token 后线上生效，用户不需要开 flag
• 正式广泛支持预计在 2026 年中后期

Firefox 和 Safari 目前没有公开的跟进计划，不过既然是 W3C 提案，大概率会跟上。做开发的话现在就可以上手，接口已经稳定到可以写生产代码了。

申请 Origin Trial

想让线上站点生效（用户不用开 flag），需要去 Chrome Origin Trials 控制台申请一个 token：

1. 打开 https://developers.chrome.com/origintrials/ ，用 Google 账号登录
2. 在可用试用列表里找到 WebMCP，点 Register 注册，填你的完整域名（比如 https://blog.zhheo.com）和用途说明
3. 提交后生成 token，有效期大概半年（Chrome 149–156），到期在控制台点 Renew 续期

注意 token 严格绑定 origin，blog.zhheo.com 和 zhheo.com 是分开的，子域名要单独申请。

部署 token 有两种方式，meta 标签适合静态站：

<meta http-equiv="origin-trial" content="你的token">

也可以用 HTTP 响应头：

Origin-Trial: 你的token

验证是否生效：打开 Chrome DevTools → Application → Origin Trials，能看到 WebMCP 标记为 active 就对了。

Edge 要单独申请

Chrome 的 token 只在 Chrome 生效，Edge 跑的是自己的一套 WebMCP 试用，需要去 Edge 的 Origin Trials 控制台（https://developer.microsoft.com/en-us/microsoft-edge/origin-trials/trials）单独申请，用 GitHub 账号登录，流程和 Chrome 差不多。

两个 token 可以同时输出在页面上（meta 标签支持多个），Chrome 认 Chrome 的、Edge 认 Edge 的，互不干扰。

开发方式

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);
  }
});

几个实际踩过的坑：

• execute 的返回值最好返回纯字符串，部分实现会拒收对象
• 用 AbortSignal 支持注销，重复注册会报 Duplicate tool name
• 单页应用路由切换后要重新注册，工具读的是当前 DOM
• 上线前先拿 getTools() 验证一下工具确实注册进去了

本博客的 WebMCP

我的博客已经上线了 WebMCP，一共注册了 15 个工具，覆盖主要功能。脚本在页面加载后自动探测 modelContext，有就注册，没有就静默跳过，不影响任何现有功能。

内容获取

• search_posts：全文搜索，支持多关键词 AND 匹配，按相关度返回标题、URL、标签、分类
• read_page_content：读取当前页面正文（标题 + 正文摘要）
• get_site_context：获取站点上下文，包括 URL、标题、主题、是否文章页、滚动进度
• list_pages：列出非文章页面（关于、友链、订阅、热门等）
• hot_posts：打开热门文章页
• random_post：随机打开一篇文章

页面导航

• navigate_page：跳转到站内页面或文章
• subscribe：打开订阅页，支持 rss / wechat / openclaw / all
• show_comments：滚动到当前文章评论区

媒体与阅读

• music_control：控制导航栏音乐播放器，play / pause / toggle / next / prev / volume / playlist
• play_podcast：播放或切换当前文章的播客音频
• toggle_radio：电台模式开关（自动播放文章播客）
• toggle_read_mode：沉浸式阅读模式开关

互动

• fill_comment：把文本填入评论输入框并聚焦，提交还是由用户自己点
• open_ai_chat：打开站内"张洪Heo AI"对话面板，可以带着问题继续深入问

用法

先说清楚现状：WebMCP 还在早期，目前没有哪个正式发布的浏览器 AI 代理在生产环境大规模调用网页工具，Chrome 的 Gemini AI 和 Edge 的 Copilot 支持都在路上。现在能实际体验的，是 Chrome 官方的测试入口，以及浏览器内置代理逐步放开后的用法。

前置条件

• Chrome 146 及以上版本，打开 chrome://flags/#enable-webmcp-testing 开启 WebMCP（本地测试）；等 Origin Trial token 部署上线后，用户不用开 flag 也能生效
• 保持博客标签页打开。WebMCP 工具调用需要可见的标签页上下文，不支持无头调用

方式一：官方 Inspector 扩展（现在就能体验）

Chrome 官方提供了调试扩展"Model Context Tool Inspector"，可以在真实页面上查看工具、手动调用，还能用自然语言模拟代理对话（默认走 gemini-3-flash-preview 模型）。

1. 从 Chrome 应用商店安装 Model Context Tool Inspector
2. 打开 blog.zhheo.com，扩展里能看到页面注册的全部 15 个工具
3. 用自然语言提问，看它会不会正确识别并调用对应工具

方式二：浏览器内置 AI 代理（逐步开放中）

等 Chrome 的 Gemini AI、Edge 的 Copilot 正式支持 WebMCP 后，直接在侧边栏对话就能用，不需要额外装任何东西。打开博客页面，问它：

• "搜索这个博客里 OpenClaw 相关的文章" → 调用 search_posts
• "这篇博客主要讲了什么，帮我总结一下" → 调用 read_page_content
• "打开热门文章页" → 调用 hot_posts
• "随机给我看一篇文章" → 调用 random_post
• "这个博客有哪些非文章页面？" → 调用 list_pages
• "跳到关于页面" → 调用 navigate_page
• "打开评论区" → 调用 show_comments
• "把当前文章用播客播出来" → 调用 play_podcast
• "帮我写一条夸作者的评论" → 调用 fill_comment 填入评论框

和传统方式的区别在于：AI 不再靠截图猜按钮位置，而是直接执行网站注册的函数，页面上的动作是可见的（跳转、滚动、播放都是真实发生）。

怎么确认工具被调用了

• 页面上能看到真实动作：跳转到新页面、滚动到评论区、音乐开始播放
• 打开 DevTools → Application → Origin Trials，WebMCP 标记为 active 说明 token 生效
• 控制台里能看到 [heo-webmcp] 开头的注册日志

实现上，我在主题的 head 里加了 Origin Trial 的 meta 标签，工具脚本放在独立的 heo-webmcp.js，通过主题配置 webmcp.enable 控制开关。代码在博客主题里开源着，想给自己的站点接一套的可以直接参考。

常见问题（FAQ）

WebMCP和MCP到底有什么区别？

MCP是独立server，走JSON-RPC，持久运行，管后端服务调用；WebMCP跑在浏览器标签页里，用浏览器原生API，能访问DOM和页面状态，管前端交互。两者互补不冲突。

WebMCP现在哪些浏览器能用？怎么申请Origin Trial？

Chrome 146+可开flag测试，149+支持Origin Trial，去Chrome控制台注册域名拿token，有效期约半年。Edge要单独去微软控制台申请，两个token可同时输出。

WebMCP怎么开发？注册工具有什么坑？

有声明式和命令式两套API，命令式核心是registerToolWebMCP 提供的方法，用于注册一个可供 LLM 调用的工具，包含名称、描述、参数结构和执行函数。，Chrome 150后用document.modelContext。坑包括execute最好返回纯字符串、重复注册报错、SPA路由切换要重新注册。