WebMCP适配教程：为浏览器AI预备好，让网页向 AI 提供工具，...

MCP 这两年快被说烂了。各种 server 遍地都是，数据库、搜索、设计工具一个个接进来。但有个东西一直没人正经做：网页自己。

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

WebMCP

先从 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
运行环境	独立 server / 守护进程	浏览器标签页
协议	JSON-RPC	浏览器原生 API
生命周期	持久运行	跟随标签页
使用场景	AI 随时调用外部服务	AI 访问网站时即时交互
界面能力	无头、外部	能访问 DOM 和页面状态

一句话概括：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：

打开 https://developers.chrome.com/origintrials/ ，用 Google 账号登录
在可用试用列表里找到 WebMCP，点 Register 注册，填你的完整域名（比如 https://blog.zhheo.com）和用途说明

WebMCP Origin Trial 注册页面

提交后生成 token，有效期大概半年（Chrome 149–156），到期在控制台点 Renew 续期

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

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

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

也可以用 HTTP 响应头：

1	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 差不多：

Edge WebMCP Origin Trial 注册页面

两个 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 模型）。

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

方式二：浏览器内置 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 控制开关。代码在博客主题里开源着，想给自己的站点接一套的可以直接参考。