Chrome WebMCP 让网站学会向 AI「自我介绍」

📌 一句话定义

WebMCP（Web Model Context Protocol）是一项浏览器原生标准提案，让网站把自身能力注册为结构化工具，AI 智能体进入网页后直接像调用 API 一样调用它们------而不再靠截图识别、DOM 解析和模拟点击去"猜"网页怎么用。

基本信息	内容
全称	Web Model Context Protocol
发起方	Google Chrome 团队 + Microsoft Edge 团队
标准化	W3C Web Machine Learning Community Group
核心 API	`document.modelContext`（原 `navigator.modelContext`）
两套 API	声明式（HTML 注解）+ 命令式（JavaScript）
当前阶段	Chrome 149--156 Origin Trial
首批接入	Expedia、Booking.com、Shopify
开源状态	已开源
官方文档	https://developer.chrome.com/docs/ai/webmcp

一、AI 为什么"看不懂"你的网页？

1.1 当前 AI 操作网页的方式

2026 年的浏览器智能体（Browser Agent）访问网站时，本质上还在做一件非常原始的事：

复制代码

截图 → 视觉模型猜测哪里能点 → 模拟鼠标点击 → 再截图 → 再猜...

AI 看到的是像素，而不是语义。

1.2 "视觉套壳"模式的三大致命伤

痛点	具体表现	后果
昂贵	每帧截图约消耗 2000+ token	一个多步任务动辄数万 token
脆弱	CSS 一改、React 状态一变、分页一换	流程立刻断裂
失真	模型经常"幻觉"点击不存在的按钮	错误逐级累积，任务失败

1.3 根本原因

过去三十年，互联网是专门为人类视网膜构建的生态系统。 网页上的 CSS 排版、色彩层级、动画效果，都是为了讨好人类的眼睛。但 AI 没有眼睛。

二、WebMCP 是什么？核心思想

2.1 核心转变

复制代码

旧模式：AI 来"猜"你的网页怎么用（视觉识别 + 模拟操作）
新模式：你的网页主动"告诉" AI 怎么用（结构化工具注册）

2.2 官方定义

借助 WebMCP，您可以为 Web 应用与代理之间的互动提供规则。您可以声明界面元素（例如按钮或输入字段）的用途并管理页面状态，而不是让代理猜测界面元素的用途。

2.3 一个类比

类比	说明
没有 WebMCP	AI 像一个高度近视的人拿着放大镜在开车
有了 WebMCP	AI 直接拿到了方向盘、油门和刹车的精确控制接口

2.4 关键特性

浏览器原生：不是第三方库，不是 npm 包，是浏览器内置 API
渐进增强：作为增强功能添加，不影响现有用户体验
双模式：声明式（零 JS）+ 命令式（完全控制）
标准化：W3C 社区组交付物，非 Google 私有

三、发展时间线

复制代码

2025 年初    Alex Nahas 开发 MCP-B 原型（WebMCP 前身）
    │
2025 年中    Google Chrome 团队和 Microsoft Edge 团队探索类似方向
    │
2025.08.13   三方在 W3C 联合提案
    │
2025.09.25   成为 W3C 社区组正式交付物
    │
2026.02.10   Chrome 146 发布早期预览版（Early Preview）
    │
2026.03      推出抢先预览版（Early Access）
    │
2026.05.20   Google I/O 2026 正式发布
    │
2026.06.09   Chrome 149 开放 Origin Trial（源试用）
    │
2026.07.21   规范重大变更：navigator.modelContext → document.modelContext
    │
2026.07.28   MCP 第五版规范发布（与 WebMCP 互补）
    │
2026 下半年  Chrome 149--156 Origin Trial 持续进行
    │
预计 2027    正式标准化，Firefox/Safari 跟进

四、架构与工作原理

4.1 整体架构

复制代码

┌─────────────────────────────────────────────────────────┐
│                    AI 智能体（Agent）                    │
│         Gemini in Chrome / 第三方 Agent / 辅助功能        │
└────────────────────────┬────────────────────────────────┘
                         │  发现并调用工具
                         ▼
┌─────────────────────────────────────────────────────────┐
│              浏览器代理交互层                              │
│         解析工具定义 → 验证参数 → 执行 → 返回结果            │
└────────────────────────┬────────────────────────────────┘
                         │  document.modelContext API
                         ▼
┌─────────────────────────────────────────────────────────┐
│                    网页（Website）                        │
│                                                         │
│  ┌─────────────────┐    ┌─────────────────────────┐    │
│  │  声明式工具      │    │    命令式工具             │    │
│  │  (HTML 注解)     │    │    (JavaScript 注册)     │    │
│  │                 │    │                         │    │
│  │  <form          │    │  document.modelContext  │    │
│  │   toolname=...  │    │    .registerTool({...}) │    │
│  │  >              │    │                         │    │
│  └─────────────────┘    └─────────────────────────┘    │
└─────────────────────────────────────────────────────────┘

4.2 三步工作流程

复制代码

Step 1: 网站注册工具
        网站声明 Agent 可以执行的操作（名称 + 描述 + JSON Schema）

Step 2: Agent 发现工具
        AI 智能体进入页面后，自动发现所有已注册的可用工具

Step 3: Agent 调用工具
        Agent 根据用户意图，选择合适的工具，传入参数，获取结果

4.3 与传统方式的对比

复制代码

传统方式（视觉驱动）：
  Agent → 截图(2000+ token) → 视觉模型推理 → 坐标计算 → 模拟点击 → 验证
  ❌ 慢、贵、脆弱

WebMCP 方式（结构化调用）：
  Agent → 发现工具列表 → 选择工具 → 传入参数 → 直接执行 → 获取结果
  ✅ 快、准、稳定

五、两套 API 详解

5.1 声明式 API（Declarative API）

适用场景 ：标准表单提交、搜索查询等简单操作

特点：零 JavaScript，纯 HTML 注解

html 复制代码

<!-- 一个 HTML 表单 = 一个 AI 工具 -->
<form toolname="greet_user" tooldescription="向用户问好">
  <input name="name" type="text" description="你的名字" />
  <button type="submit">问好</button>
</form>

优势：

页面加载时即可被解析，甚至在 JS 执行之前
对 SEO 和可访问性友好
维护成本极低

5.2 命令式 API（Imperative API）

适用场景 ：复杂逻辑、中间状态、权限校验、动态工作流

特点：通过 JavaScript 精确控制工具行为

javascript 复制代码

// 注册工具
document.modelContext.registerTool({
  name: "book_flight",
  title: "预订机票",
  description: "根据出发地、目的地和日期搜索并预订机票",
  inputSchema: {
    type: "object",
    properties: {
      origin: { type: "string", description: "出发城市" },
      destination: { type: "string", description: "目的城市" },
      date: { type: "string", description: "出发日期 (YYYY-MM-DD)" },
      passengers: { type: "number", description: "乘客数量" }
    },
    required: ["origin", "destination", "date"]
  },
  execute: async (args) => {
    // 调用你的后端 API
    const result = await searchFlights(args);
    return {
      content: [{
        type: "text",
        text: JSON.stringify(result, null, 2)
      }]
    };
  }
});

优势：

完全控制执行逻辑
可访问应用内部状态
支持动态注册/注销
适合 SPA 应用

5.3 两种 API 对比

维度	声明式	命令式
实现方式	HTML 属性注解	JavaScript `registerTool()`
复杂度	低（零 JS）	中-高
适用场景	简单表单、搜索	复杂业务逻辑、多步流程
发现时机	页面加载时（JS 执行前）	JS 执行后
动态性	静态	可动态注册/注销
框架支持	所有框架	需要 JS 环境

六、代码实战：从零接入 WebMCP

6.1 环境准备

bash 复制代码

# 确认 Chrome 版本 ≥ 146
chrome://version

# 方式一：手动开启（开发测试用）
# 访问 chrome://flags/enable-webmcp-testing → 设为 Enabled → 重启

# 方式二：Origin Trial（生产环境用）
# 在 Chrome Origin Trials 后台注册你的域名

6.2 最简示例：天气查询工具

javascript 复制代码

// 检测浏览器是否支持 WebMCP
if (document.modelContext) {
  document.modelContext.registerTool({
    name: 'get_weather',
    description: '查询指定城市的实时天气',
    inputSchema: {
      type: 'object',
      properties: {
        city: { type: 'string', description: '城市名' }
      },
      required: ['city']
    },
    execute: async ({ city }) => {
      const resp = await fetch(`/api/weather?city=${city}`);
      const data = await resp.json();
      return {
        content: [{
          type: 'text',
          text: `${city}当前温度 ${data.temp}°C，${data.condition}`
        }]
      };
    }
  });
  console.log('WebMCP 工具注册成功！');
} else {
  console.warn('当前浏览器不支持 WebMCP');
}

6.3 电商场景：商品搜索 + 加购

javascript 复制代码

// 工具 1：商品搜索
document.modelContext.registerTool({
  name: 'search_products',
  description: '根据关键词搜索商品，返回价格和库存信息',
  inputSchema: {
    type: 'object',
    properties: {
      keyword: { type: 'string', description: '搜索关键词' },
      maxPrice: { type: 'number', description: '最高价格（可选）' },
      category: { type: 'string', description: '商品分类（可选）' }
    },
    required: ['keyword']
  },
  execute: async (args) => {
    const results = await productAPI.search(args);
    return {
      content: [{
        type: 'text',
        text: JSON.stringify(results, null, 2)
      }]
    };
  }
});

// 工具 2：加入购物车
document.modelContext.registerTool({
  name: 'add_to_cart',
  description: '将指定商品加入购物车',
  inputSchema: {
    type: 'object',
    properties: {
      productId: { type: 'string', description: '商品 ID' },
      quantity: { type: 'number', description: '数量，默认 1' }
    },
    required: ['productId']
  },
  execute: async ({ productId, quantity = 1 }) => {
    const result = await cartAPI.add(productId, quantity);
    return {
      content: [{
        type: 'text',
        text: `已将 ${result.productName} × ${quantity} 加入购物车`
      }]
    };
  }
});

6.4 声明式示例：活动报名表单

html 复制代码

<form toolname="event_signup" 
      tooldescription="报名参加线下活动，填写姓名和邮箱即可完成报名">
  <label>
    姓名
    <input name="fullName" type="text" required 
           description="参加者的真实姓名" />
  </label>
  <label>
    邮箱
    <input name="email" type="email" required 
           description="用于接收活动通知的邮箱地址" />
  </label>
  <label>
    参加场次
    <select name="session" description="选择想参加的场次">
      <option value="morning">上午场 (9:00-12:00)</option>
      <option value="afternoon">下午场 (14:00-17:00)</option>
    </select>
  </label>
  <button type="submit">立即报名</button>
</form>

6.5 Vue 3 组合式封装

javascript 复制代码

// composables/useWebMCP.js
import { onMounted, onUnmounted, ref } from 'vue';

export function useWebMCP(tools) {
  const registeredTools = ref([]);

  onMounted(() => {
    if (!document.modelContext) return;
    
    tools.forEach(tool => {
      document.modelContext.registerTool({
        name: tool.name,
        description: tool.description,
        inputSchema: tool.schema || {
          type: 'object',
          properties: {},
          required: []
        },
        execute: tool.execute
      });
      registeredTools.value.push(tool.name);
    });
  });

  onUnmounted(() => {
    // 组件卸载时清理工具
    registeredTools.value.forEach(name => {
      document.modelContext.unregisterTool(name);
    });
  });

  return { registeredTools };
}

js 复制代码

<!-- 在组件中使用 -->
<script setup>
import { useWebMCP } from '@/composables/useWebMCP';

useWebMCP([{
  name: 'search_products',
  description: '根据关键词搜索产品',
  schema: {
    type: 'object',
    properties: {
      keyword: { type: 'string' },
      maxResults: { type: 'number' }
    },
    required: ['keyword']
  },
  execute: async ({ keyword, maxResults = 10 }) => {
    const results = await searchAPI(keyword, maxResults);
    return { content: [{ type: 'text', text: JSON.stringify(results) }] };
  }
}]);
</script>

6.6 动态工具管理（根据登录状态）

javascript 复制代码

// 用户登录后才注册"下单"工具
function onUserLogin(user) {
  if (!document.modelContext) return;
  
  document.modelContext.registerTool({
    name: 'place_order',
    description: `为 ${user.name} 下单（已登录）`,
    inputSchema: { /* ... */ },
    execute: async (args) => { /* ... */ }
  });
}

// 用户登出时注销
function onUserLogout() {
  document.modelContext.unregisterTool('place_order');
}

七、WebMCP vs MCP：一字之差，两个世界

7.1 常见误解

❌ "WebMCP 是 MCP 的升级版"

❌ "有了 WebMCP 就不需要 MCP 了"

✅ 它们是不同层的互补协议

7.2 详细对比

维度	MCP（服务端）	WebMCP（浏览器端）
运行环境	独立 Server / 守护进程	浏览器标签页内
协议	JSON-RPC 2.0	浏览器原生 JavaScript API
生命周期	持久运行	跟随标签页（关闭即消失）
连接对象	Agent ↔ 后端工具/数据库	Agent ↔ 网页前端功能
界面能力	无头、外部	能访问 DOM 和页面状态
发现方式	配置文件指定	访问网页时自动发现
使用场景	AI 随时调用外部服务	AI 访问网站时即时交互
类比	公司的客服呼叫中心	实体店的现场专家

7.3 推荐架构：两者并用

复制代码

┌──────────────────────────────────────────────────────┐
│                   AI Agent                           │
└──────────┬───────────────────────────┬───────────────┘
           │                           │
           │ MCP                       │ WebMCP
           ▼                           ▼
┌─────────────────────┐    ┌─────────────────────────┐
│   你的后端服务        │    │   第三方网站              │
│   • 查数据库         │    │   • 完成预订             │
│   • 读内部文档       │    │   • 填写表单             │
│   • 调用私有 API     │    │   • 执行交易             │
└─────────────────────┘    └─────────────────────────┘

官方总结：MCP 让 Agent 调用你的数据库，WebMCP 让 Agent 在第三方网站上完成交易动作。

八、调试与开发工具

8.1 Chrome DevTools WebMCP 面板

Chrome 149+ 内置了 WebMCP 调试面板：

打开方式：

打开 Chrome DevTools（F12）
点击 应用（Application） 标签页
在边栏选择 WebMCP 窗格

功能：

查看当前页面注册的所有工具
检查工具的 JSON Schema 是否合法
手动触发工具调用进行测试
查看调用历史记录
验证参数格式

8.2 命令行检测

javascript 复制代码

// 在 Console 中检查支持情况
console.log('WebMCP 支持:', !!document.modelContext);

// 列出已注册工具（如果浏览器支持）
if (document.modelContext?.getTools) {
  console.log(document.modelContext.getTools());
}

8.3 社区工具：webmcp-devtools-server

将浏览器中的 WebMCP 工具桥接到 Cursor / Claude Desktop：

json 复制代码

// .cursor/mcp.json
{
  "mcpServers": {
    "webmcp-devtools": {
      "command": "npx",
      "args": ["-y", "webmcp-devtools-server"]
    }
  }
}

配置后即可在 AI 编辑器中：

复制代码

> webmcp_list_tools
Found 8 WebMCP tool(s):
- search_products: 搜索商品 [read-only]
- add_to_cart: 加入购物车
- place_order: 下单 [需登录]
- event_signup: 活动报名 [declarative]
...

> webmcp_call_tool search_products {"keyword": "机械键盘", "maxPrice": 500}
{"results": [...]}

九、实际应用场景

9.1 电商购物

复制代码

用户: "帮我找一双 42 码的黑色跑鞋，500 块以内，直接下单"

Agent 通过 WebMCP:
  1. 调用 search_products({keyword:"黑色跑鞋", size:42, maxPrice:500})
  2. 调用 add_to_cart({productId:"SKU123", quantity:1})
  3. 调用 place_order({address:"默认地址", payment:"支付宝"})
  → 3 秒完成，无需截图、无需猜按钮位置

9.2 旅行预订（Expedia / Booking.com）

复制代码

用户: "帮我订下周三北京到上海的机票，早上的航班"

Agent 通过 WebMCP:
  1. 调用 search_flights({from:"北京", to:"上海", date:"2026-09-09", time:"morning"})
  2. 展示结果给用户选择
  3. 调用 book_flight({flightId:"CA1234", passenger:...})

9.3 复杂表单填写

复制代码

场景: 签证申请表（20+ 字段，多步骤）

传统方式: AI 需要逐字段截图识别 → 模拟输入 → 极易出错
WebMCP:  网站注册 "fill_visa_form" 工具，Agent 一次性传入所有字段

9.4 应用内诊断与客服

复制代码

用户: "我的订单为什么一直显示处理中？"

Agent 通过 WebMCP:
  1. 调用 get_order_status({orderId:"ORD456"})
  2. 调用 diagnose_order({orderId:"ORD456"})
  3. 调用 trigger_fix({orderId:"ORD456", action:"retry_payment"})
  → 无需人工客服介入

9.5 开发者工具

复制代码

场景: 前端监控面板

注册工具:
  - get_error_logs: 获取前端错误日志
  - get_performance_metrics: 获取性能指标
  - clear_cache: 清除缓存
  - toggle_feature_flag: 切换功能开关

9.6 SaaS 平台操作

复制代码

用户: "帮我把这个项目的部署环境从 staging 切到 production"

Agent 通过 WebMCP:
  1. 调用 list_environments({project:"my-app"})
  2. 调用 switch_environment({project:"my-app", from:"staging", to:"production"})
  3. 调用 verify_deployment({project:"my-app", env:"production"})

十、性能数据与行业影响

10.1 性能对比

指标	视觉驱动（截图+模拟）	WebMCP（结构化调用）	提升
单次操作 Token 消耗	2000+	~200	↓ 90%
多步任务总消耗	数万 token	数千 token	↓ 67% 算力成本
任务准确率	~70%（幻觉频发）	~98%	↑ 28 个百分点
单步执行时间	3-5 秒（截图+推理）	<1 秒（直接调用）	↓ 80%
UI 变更容忍度	极低（改个像素就崩）	极高（接口不变就不影响）	质的飞跃

10.2 行业影响

复制代码

┌─────────────────────────────────────────────────────────┐
│  对网站开发者：                                           │
│  • 新增一个"为 AI 设计"的接口层（与人类 UI 并行）             │
│  • 类似当年做移动端适配，现在要做"Agent 端适配"               │
│                                                         │
│  对 AI 行业：                                            │
│  • Agent 操作网页的成本降低到可忽略不计                      │
│  • 从"概率性视觉盲猜"变为"确定性结构化调用"                   │
│                                                         │
│  对商业模式：                                             │
│  • 传统 SEO → AEO（Agentic Engine Optimization）         │
│  • 不接入 = 在 AI 视界中是"一片无法通行的原始丛林"            │
│  • 接入 = 进入 AI 的"结构化高速公路"                        │
└─────────────────────────────────────────────────────────┘

10.3 首批接入平台

平台	场景	状态
Expedia	机票/酒店搜索与预订	✅ 已接入
Booking.com	住宿预订	✅ 已接入
Shopify	商品搜索、加购、下单	✅ 已接入
Gemini in Chrome	Google 官方 AI 助手	🔜 即将成为首个消费者

十一、安全模型与争议

11.1 信任模型的变化

复制代码

传统模型：用户 → 浏览器 → 网站（用户直接控制）
WebMCP 模型：用户 → AI Agent → 浏览器 → 网站工具（中间多了一层）

⚠️ 开发者警告：「WebMCP 翻转了信任模型：网站定义工具，浏览器决定调用，安全风险远高于本地 MCP」

11.2 主要安全关切

风险	说明	缓解措施
恶意工具	网站定义"订机票"工具，但内部偷偷发送用户数据到第三方	浏览器沙箱 + 权限审核
隐式支付	网站通过 AI 代理在用户不知情下完成高风险操作	用户确认机制
数据泄露	工具执行时可访问页面所有状态	最小权限原则
Prompt 注入	恶意网站通过工具描述注入指令	输入过滤 + 浏览器验证

11.3 社区争议

支持方观点：

结构化调用比截图识别更安全（确定性 > 概率性）
网站主动暴露接口 = 可控、可审计
标准化 > 各家私有方案

质疑方观点：

"这不过是让网站暴露更多接口给 AI，维护成本全由网站承担"
"为什么网站要为 AI 适配？这只会让竞争对手更容易获取数据"
"与 20 年前的语义网（Semantic Web）如出一辙------没人愿意花时间标记数据"
"类似 Google AMP 的又一次平台锁定"

11.4 Google 的安全指南要点

工具必须是幂等的或有明确的副作用声明
敏感操作（支付、删除）必须要求用户确认
工具描述不得包含 Prompt 注入内容
遵循最小权限原则，不暴露不必要的内部状态

十二、生态现状与未来展望

12.1 当前状态（2026 年 9 月）

维度	状态
Chrome 支持	✅ 149--156 Origin Trial 进行中
Edge 支持	⚠️ 实验性标志后，需手动开启
Firefox	❌ 暂无公开跟进计划
Safari	❌ 暂无公开跟进计划
真实网站部署率	📊 接近于零（除首批试点）
AI Agent 接入	🔜 Gemini in Chrome 将是首个
Angular 支持	⚠️ 实验性
Vue/React	社区封装可用
Lighthouse 审计	✅ 已有专门检测类别

12.2 API 变更注意

⚠️ 重要：2026 年 7 月 21 日规范草案发生重大变更------

从 navigator.modelContext 移动到 document.modelContext。

Chrome 150 已开始弃用旧位置。早期尝鲜者需注意迁移。

12.3 限制与约束

限制	说明
需要浏览环境	工具调用在 JS 中处理，必须打开标签页，无法无头运行
复杂界面开销	极复杂网站可能需要重构才能适配
工具可发现性	必须直接访问网站才能发现工具，无全局注册表
标准未定稿	API 仍在演进，存在 Breaking Change 风险

12.4 未来路线图

复制代码

2026 Q4    Origin Trial 结束，收集反馈
2027 H1    预计进入 W3C 推荐标准流程
2027 H2    Chrome 正式默认启用
2027+      Firefox / Safari 跟进实现
远期       成为 Web 平台基础能力，如同 fetch()、localStorage 一样普及

十三、开发者接入指南（Checklist）

13.1 评估阶段

确认你的网站是否有 AI Agent 交互需求
识别最适合暴露为工具的核心功能（搜索、预订、表单等）
评估现有架构是否支持（SPA 需要额外考虑状态管理）

13.2 开发阶段

安装 Chrome 149+，开启 chrome://flags/enable-webmcp-testing
从声明式 API 开始（简单表单）
复杂功能使用命令式 API（document.modelContext.registerTool）
为每个工具编写清晰的 description（这是 AI 理解工具的关键）
定义严格的 inputSchema（JSON Schema 格式）
处理浏览器不支持的降级逻辑

13.3 测试阶段

使用 DevTools → Application → WebMCP 面板验证注册
手动触发工具调用，验证输入/输出
测试边界情况和错误处理
确认敏感操作有用户确认机制

13.4 上线阶段

注册 Origin Trial（https://developer.chrome.com/origintrials/）
在 HTML <head> 中添加 Origin Trial token
监控工具调用日志
准备降级方案（不支持的浏览器回退到传统交互）

13.5 代码模板（快速开始）

html 复制代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- Origin Trial Token（生产环境需要） -->
  <!-- <meta http-equiv="origin-trial" content="YOUR_TOKEN_HERE"> -->
  <title>WebMCP Demo</title>
</head>
<body>
  <h1>我的网站</h1>
  
  <!-- 声明式工具 -->
  <form toolname="contact_us" tooldescription="联系客服，留下问题描述">
    <input name="message" type="text" description="问题描述" required />
    <button type="submit">提交</button>
  </form>

  <script>
    // 命令式工具
    if (document.modelContext) {
      document.modelContext.registerTool({
        name: 'get_store_info',
        description: '获取店铺基本信息（营业时间、地址、电话）',
        inputSchema: { type: 'object', properties: {} },
        execute: async () => ({
          content: [{
            type: 'text',
            text: JSON.stringify({
              name: '示例商店',
              hours: '9:00-21:00',
              address: '北京市朝阳区...',
              phone: '010-12345678'
            })
          }]
        })
      });
    }
  </script>
</body>
</html>

总结

复制代码

┌────────────────────────────────────────────────────────┐
│                                                        │
│   WebMCP 的本质：                                       │
│   让网站从"给人看的视觉界面"升级为"给人+AI 双用的接口"        │
│                                                        │
│   • 对开发者：新增一个与人类 UI 并行的"AI 接口层"            │
│   • 对 AI：从"像素猜测"到"确定性调用"，成本降 67%            │
│   • 对用户：Agent 真正能帮你完成复杂网页操作                 │
│   • 对行业：Web 正在进入"Agent-Ready"时代                  │
│                                                         │
│   一句话：你的网站第一次有了一个为 AI 设计的官方接口。          │
│                                                         │
└─────────────────────────────────────────────────────────┘

参考资源

资源	链接
WebMCP 官方文档	https://developer.chrome.com/docs/ai/webmcp
WebMCP 源试用注册	https://developer.chrome.com/origintrials/
WebMCP 规范讨论（W3C）	GitHub WebMCP Explainer
WebMCP DevTools 调试	https://developer.chrome.com/docs/devtools/application/webmcp
WebMCP vs MCP 对比	https://developer.chrome.com/docs/ai/webmcp/compare-mcp
Chrome 149 DevTools 更新	https://developer.chrome.com/blog/new-in-devtools-149
webmcp-devtools-server	npm: webmcp-devtools-server