现在网页都能提供 MCP 了？！

ssshooter
0 阅读4分钟

你有没有过这种体验：让 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 长啥样。

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 到底差在哪

维度MCPWebMCP
位置后端 / 服务端前端 / 浏览器
生命周期持久（常驻）临时（关页即失效）
连接性全局仅当前标签页
交互无头 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，不是口号了。

avatar
文章
阅读
粉丝