现在网页都能提供 MCP 了?!

你有没有过这种体验:让 AI 帮你填个表单、下个单,它要么疯狂截图"看"页面,要么对着 DOM 树猜哪个按钮是"提交",猜错了就点飞。你心里 OS:这玩意儿怎么这么笨。

其实不是 AI 笨。网页从头到尾都是给人看的,没人告诉机器"我能干嘛、该怎么调我"。直到最近,这个口子才被撬开,主角叫 WebMCP。

先澄清一个误会

看到标题你可能以为:MCP,就是你自己接的那堆连接器协议,能直接在网页里跑了?

不是。MCP 是后端协议,跑在 server 或进程里,跟浏览器没啥关系。WebMCP 是另一码事:一套正在 W3C WebML 社区组里孵化的浏览器标准,让网页在前端直接把"工具"亮给浏览器里的 AI 智能体。

你可以把它当成"受了 MCP 启发的浏览器 API",不是 MCP 的网页移植版。它俩是搭档,不是谁替代谁。

传统方式 vs WebMCP

以前 AI 跟网页打交道,就两条路,都又脆又费 token。一条叫"视觉派":截图丢给多模态模型,让它看页面推断怎么操作。另一条叫"语义派":解析 DOM 和无障碍树,模拟点击。页面一改版、按钮一挪位,全失效,复杂登录态更是重灾区。

WebMCP 换了思路:网页自己声明"我会什么"。开发者拿几行 JS 把页面里的函数注册成结构化工具,AI 智能体来了直接发现、直接调用,拿回结构化 JSON。不截图、不猜按钮、不依赖 UI 长啥样。

javascript 复制代码
const mc = document.modelContext || navigator.modelContext;
await mc.registerTool({
  name: 'get_order_status',
  description: '按时间段查订单,返回单号/物流状态/位置',
  inputSchema: {
    type: 'object',
    properties: {
      timeframe: { type: 'string',
        enum: ['today', 'yesterday', 'last_7_days', 'last_30_days', 'last_6_months'] }
    },
    required: ['timeframe']
  },
  execute: async ({ timeframe }) => { /* 接你已有的查询逻辑 */ }
});

浏览器在中间当传话人,它知道当前页面、session、Cookie,所以 AI 是以"你本人已经在页面上"的身份在操作,比无头自动化稳得多。

MCP 和 WebMCP 到底差在哪

维度 MCP WebMCP
位置 后端 / 服务端 前端 / 浏览器
生命周期 持久(常驻) 临时(关页即失效)
连接性 全局 仅当前标签页
交互 无头 API 调用 浏览器内、能碰 DOM / 会话
发现 手动配置 访问页面自动发现
适用 后台数据 / 动作 在真实 UI 上代你操作

一句话:MCP 管核心逻辑,哪儿都能调;WebMCP 管页面内的即时交互,你打开网页那刻 AI 就能上手。

现在的网站拿它能干啥

凡是"用户要在你网站上多步操作、又已经登录"的场景,都合适。比如让 AI 理解字段语义后帮你填结构化表单,不用盲点输入框;搜索、筛选、下单这种多步流程也不会因为按钮挪了位就跑偏;后台报表能直接吐 JSON,省得 AI 去解析 HTML 表格。

它还能干带登录态的活儿,复用浏览器现成的 session,复杂鉴权比 Playwright 稳。像购买这类敏感操作,可以加确认弹窗,工具调用在页面上可见执行,你盯着就行。

我看重的是三点:快,走浏览器内部通道,没有网络往返;抗改版,绑的是应用逻辑不是页面设计;规则你定,你明确告诉 AI 该怎么操作你的站,而不是盼它自己找对按钮。

怎么开始,以及坑

现在还偏早期,但已经能玩:

  1. Chrome 地址栏粘 chrome://flags/#enable-webmcp-testing,设成 Enabled,Relaunch;
  2. 页面得是 https 或 localhost,而且得是源隔离文档(不能设 Origin-Agent-Cluster: ?0,也不能改 document.domain);
  3. 跨源 iframe 要加 <iframe allow="tools"> 显式授权;
  4. 装 Model Context Tool Inspector 扩展,在 DevTools 里能看到注册的工具、手动执行,还能用自然语言让内置 agent 调它。

两个坑提醒一下。一是 API 名字在 149 是 navigator.modelContext,150 以上才迁到 document.modelContext,所以探测时两个都得试,就像上面代码那样先 || 再判空。二是目前只有 Chrome 系支持,Firefox、Safari 还是 undefined,线上必须做 feature detection 兜底,别裸调。

结语

WebMCP 还在提案、源试用阶段,离"人人都用"差得远。但方向挺清楚:JSON-LD 让网页能被搜索,WebMCP 想让网页能被 AI 操作。以后你打开一个站,浏览器里的 AI 助手不用再猜这个站怎么用,站自己把说明书递过去了。

Agentic Web,不是口号了。

相关推荐
子兮曰2 天前
jev-ultrafast 深度解析:7 秒订机票的浏览器 Agent 是如何炼成的
前端·后端·agent
回眸&啤酒鸭2 天前
【回眸】Minicart 电商购物车核心功能落地指南
人工智能
子兮曰2 天前
Jev 爆发一周:7 秒 Agent 背后的 System One 生态与三场争议
前端·后端·ai编程
一隅论数智2 天前
给AI一张“业务概念地图“:本体如何从哲学走向企业智能
大数据·人工智能·经验分享·笔记·学习·学习方法·政务
AI的探索之旅2 天前
97 个 OpenCV 实例(三十):双目立体,从标定到点云
人工智能·opencv·计算机视觉
AlbertZein2 天前
Step-5-Preview 上手实测:3D 游戏、金融分析、网页设计一次跑完
人工智能·aigc
前端小万2 天前
写公众号赚了 3000 块后,我做了一款叫 "一键成稿" 的软件
前端·微信小程序
LaughingZhu2 天前
Product Hunt 每日热榜 | 2026-09-19
人工智能·深度学习·神经网络·搜索引擎·百度
爱勇宝2 天前
ZCode 开源 24 小时:一份没有历史的账本,回答不了"有没有偷代码"
前端·后端·chatglm (智谱)