现在网页都能提供 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,不是口号了。

相关推荐
杉氧13 分钟前
状态管理变迁史:为什么我们放弃了 Redux 选择 Zustand?
android·前端·react native
京东云开发者17 分钟前
Claude Code vs Codex 记忆体系深度对比
人工智能
cidy_9827 分钟前
OpenCode 手动配置火山方舟 Agent Plan 教程
前端
鹏多多31 分钟前
PC 网站接入微信登录,这 10 个坑我替你踩完了!
前端·javascript·vue.js
律宏阔1 小时前
微信小程序使用 Orval + OpenAPI 自动生成接口:Axios 兼容踩坑记录
前端·微信小程序
律宏阔1 小时前
微信小程序集成 TDesign 完整记录:解决 NPM packages not found
前端·微信小程序
律宏阔1 小时前
微信小程序 ECharts 瘦身实战:分包异步化 + componentPlaceholder 避开主包 2MB 限制
前端·微信小程序
夏天要喝冰可乐1 小时前
从 Idea 到开源插件:我用 Vibe Coding 做了「文章摆渡」
前端·ai编程·vibecoding
小小小小宇1 小时前
pi agent
前端