MCP

用 WebMCP 把商城和下单做成当前页工具

WebMCP 让浏览器 Agent 调用当前标签页里的结构化工具，而不是扒 DOM。本文用爱买 AI 的商品页、收银台、账户与 Agents 文章页说明边界、谁能真正调到工具，以及一份可复制的注册骨架。

发布于 2026-09-11WebMCPChromeMCP

在传统的浏览器自动化场景中，AI Agent 主要依靠截屏分析与 DOM 选择器模拟点击来操控页面。这种操作方式不仅推理延迟极高，而且一旦页面样式或结构微调，极易发生“点错”甚至误操作。

WebMCP 提供了一条截然不同的交互范式：网页在当前浏览器标签页的上下文中，将自身的业务逻辑直接注册为带结构化输入输出约束的工具（挂载于 document.modelContext），供具备页内交互能力的 AI 智能体直接调用，并天然继承用户当前在页面上已有的登录凭证。

必须明确的是，WebMCP 绝不是传统 MCP（Model Context Protocol）的替代品。MCP 解决的是宿主 Harness（如 Cursor、Claude Code）连接本地进程或远程服务的问题；而 WebMCP 解决的是已经打开并停留在当前网页中的浏览器 Agent 如何高效、安全地与前端页面交换状态的问题。

本文记录的是爱买 AI 的第一期工程实践与落地建议，并非 Chrome 官方教程。产品底层行为以 Chrome WebMCP 与 Imperative API 为准，核验日期为 2026-09-11（覆盖 Chrome Origin Trial 149 至 156 周期）。

为什么值得做页内工具：从“扒 DOM”到“声明式交互”

通过 WebMCP，网页可以向页内 Agent 显式暴露结构化的 JSON Schema 工具契约。用户能够在屏幕上实时注视到页面的状态变化，而对于具有业务副作用的操作，浏览器层可根据 consequentialHint 强制弹出确认通知。

本站在第一期实践中，严格遵循“最小暴露与强确认”原则，仅注册了四项基础能力：

商品页只读探测（get_product）：读取当前商品规格、实时库存状态、当前选择数量、已填券码与可用支付方式，返回结果中绝不包含卡密或账户机密；
商品页下单（create_order）：锁定当前规格的库存并自动为用户跳转至收银台，绝不代为扣款或支付；
内容中心检索（search_agent_posts）：在 /agents 频道按关键词、分类或技术标签检索文章元数据与访问路径；
文章规则复制（copy_rule_block）：将当前文章内的规约代码块复制到用户本地剪贴板，工具返回值仅提示复制状态，不回显大段规则正文。

二期演进提示：随着业务深入，我们在第二期进一步补齐了收银台（get_checkout_order）、账户列表（list_my_orders）与订单详情（get_order）的三枚只读状态工具，主线故事延伸至“人付款之后，只问卡在哪”。关于后续支付状态的投影边界与架构取舍，详见续篇：WebMCP 二期：付完款之后，只问卡在哪。

在认证边界上，未登录访客调用 create_order 时，系统仅会唤起邮箱验证码登录弹窗，而不会为游客代填表单；卡密明文、查单密码以及支付转账确认等核心敏感操作，始终完好保留在人眼可见的前端界面中。

注册工具的最小骨架与生命周期管理

下面的代码骨架是本站建议的前端挂载适配器。实现中采用 document.modelContext ?? navigator.modelContext 进行平滑特性检测；在未支持 WebMCP 的普通浏览器中，页面交互保持完好无损。

更关键的是生命周期管理：当用户在单页应用（SPA）中发生路由跳转时，必须通过 AbortController.abort() 显式注销当前页面的工具，杜绝工具在后续无关页面中残留。

function getModelContext() {
  return document.modelContext ?? navigator.modelContext ?? null;
}

export function registerTools(tools = []) {
  const context = getModelContext();
  if (!context?.registerTool) return () => {};
  const controller = new AbortController();
  for (const tool of tools) {
    context.registerTool({
      ...tool,
      execute: async (input, extras) => {
        const result = await tool.execute(input, extras);
        return typeof result === 'string' ? result : JSON.stringify(result);
      },
    }, { signal: controller.signal });
  }
  return () => controller.abort();
}

await document.modelContext?.registerTool({
  name: 'create_order',
  description: '锁定当前商品库存并进入收银台。不会代为支付。',
  inputSchema: {
    type: 'object',
    properties: {
      quantity: { type: 'number' },
      couponCode: { type: 'string' },
    },
  },
  annotations: {
    readOnlyHint: false,
    consequentialHint: true,
  },
  execute: async ({ quantity, couponCode }) => {
    await createOrderWithOverrides({ quantity, couponCode });
    return '库存已锁定，请在收银台完成付款。工具不会代为支付。';
  },
});

关键注解标注

consequentialHint: true：向浏览器明确宣告此操作具有实质性业务后果（如扣减库存配额、生成待付款单）。Agent 调用时，宿主环境应弹出授权确认，严禁静默执行；
readOnlyHint: true：对于像 get_product 这样的纯读取操作，标注只读提示可免去多余的交互阻碍；
状态覆盖机制：购买数量、优惠券码与支付方式必须作为参数直接注入下单函数。切忌先在 React 中调用 setState 再立即下单，否则组件闭包中读取到的仍将是旧值。

验证途径与宿主支持现状

在工程实践中，必须严格区分“页内 Agent”与“本地/IDE Coding Agent”的调用环境，切忌将两者混淆：

截至 2026-09-11，经实测可正常发现并调用 WebMCP 工具的环境：

ChatGPT 桌面版内置浏览器（Site tools）：在 Work 或 Codex 工作区下选用 GPT-5.6 Sol 或 Terra 模型（Luna、Enterprise 及 Edu 许可除外）。该路径运行在 ChatGPT 的自研 WebMCP 运行时中，完全不依赖站方下发的 Chrome Origin Trial 令牌；
Chrome 原生环境与调试器：运行版本处于 149–156 窗口期的 Chrome，或手动开启 chrome://flags/#enable-webmcp-testing 开关，结合官方提供的 Model Context Tool Inspector 扩展手动测试工具调用（默认对接 gemini-3-flash-preview）。

在核验时暂未确认支持的环境：Gemini in Chrome、Dia 浏览器、Claude for Chrome，以及各类 IDE（如 Cursor）的内置聊天面板。Cursor 这类宿主使用的是基于 JSON-RPC 的标准 MCP Server 协议，并不监听浏览器 DOM 上下文中的 document.modelContext，更无法读取站点在浏览器标签中的用户 Session。

Origin Trial 发现性机制

站方通过服务端响应头 Origin-Trial 以及 HTML 首屏 <meta http-equiv="origin-trial" /> 下发 NEXT_PUBLIC_WEBMCP_ORIGIN_TRIAL_TOKEN。该令牌严格绑定生产 Origin（如 https://aimaiai.cc），使目标 Chrome 访客无需配置任何实验 flag 即可激活页内 API。若站方未配置令牌，未开启实验开关的访客将完全感知不到工具存在，原有 Web 体验完全不受干扰。

WebMCP 与 MCP、Coding Agent 的职责划分

浏览器内访问本站：依托 WebMCP。交互主体是驻留在当前标签页、且受浏览器安全沙箱管控的页内 Agent，专注协助用户理解页面并加速操作；
IDE 内编写与重构代码：依托 MCP Server 与项目规约（如 AGENTS.md）。IDE 无法也不应探知用户在浏览器里登录的 Cookie；
无头巡检、批量对账与定时任务：依托受控的后端 API 或自动化服务。WebMCP 始终以“用户当前正注视着该页面”作为前置假设。

不要交给工具的事

将页内交互能力做少、做轻、做可控，远比激进追求全流程自动化更契合 WebMCP 的设计初衷：

严禁代为支付：严禁由工具发起链上转账、免密扣款或代签支付；
严禁输出敏感凭据：卡密明文、兑换凭证、用户查询密码与支付二维码原文绝不可进入工具返回值（否则大模型会留存副本）；
严禁替代全站 API：不要试图将 WebMCP 包装为开放的无头爬虫接口，一旦 Origin Trial 周期结束或用户浏览器不支持，应用层必须具备静默优雅的降级表现。

用户盯着屏幕，Agent 读写结构化状态，资金与凭据的交付始终由人亲手确认——这是构建现代安全 WebMCP 体验不可动摇的基石。

参考资料

WebMCP 开发者指南，Chrome for Developers，核验日期 2026-09-11。
WebMCP Imperative API 规范，含 registerTool、annotations 与 AbortSignal 标准，核验日期 2026-09-11。
WebMCP Explainer 标准草案，W3C WebML Community Group，核验日期 2026-09-11。
进阶手记：WebMCP 二期：付完款之后，只问卡在哪，爱买 AI 架构实践，核验日期 2026-09-12。

MCP

用 WebMCP 把商城和下单做成当前页工具

发布于 2026-09-11WebMCPChromeMCP

为什么值得做页内工具：从“扒 DOM”到“声明式交互”

本站在第一期实践中，严格遵循“最小暴露与强确认”原则，仅注册了四项基础能力：

商品页只读探测（get_product）：读取当前商品规格、实时库存状态、当前选择数量、已填券码与可用支付方式，返回结果中绝不包含卡密或账户机密；
商品页下单（create_order）：锁定当前规格的库存并自动为用户跳转至收银台，绝不代为扣款或支付；
内容中心检索（search_agent_posts）：在 /agents 频道按关键词、分类或技术标签检索文章元数据与访问路径；
文章规则复制（copy_rule_block）：将当前文章内的规约代码块复制到用户本地剪贴板，工具返回值仅提示复制状态，不回显大段规则正文。

二期演进提示：随着业务深入，我们在第二期进一步补齐了收银台（get_checkout_order）、账户列表（list_my_orders）与订单详情（get_order）的三枚只读状态工具，主线故事延伸至“人付款之后，只问卡在哪”。关于后续支付状态的投影边界与架构取舍，详见续篇：WebMCP 二期：付完款之后，只问卡在哪。

注册工具的最小骨架与生命周期管理

function getModelContext() {
  return document.modelContext ?? navigator.modelContext ?? null;
}

export function registerTools(tools = []) {
  const context = getModelContext();
  if (!context?.registerTool) return () => {};
  const controller = new AbortController();
  for (const tool of tools) {
    context.registerTool({
      ...tool,
      execute: async (input, extras) => {
        const result = await tool.execute(input, extras);
        return typeof result === 'string' ? result : JSON.stringify(result);
      },
    }, { signal: controller.signal });
  }
  return () => controller.abort();
}

await document.modelContext?.registerTool({
  name: 'create_order',
  description: '锁定当前商品库存并进入收银台。不会代为支付。',
  inputSchema: {
    type: 'object',
    properties: {
      quantity: { type: 'number' },
      couponCode: { type: 'string' },
    },
  },
  annotations: {
    readOnlyHint: false,
    consequentialHint: true,
  },
  execute: async ({ quantity, couponCode }) => {
    await createOrderWithOverrides({ quantity, couponCode });
    return '库存已锁定，请在收银台完成付款。工具不会代为支付。';
  },
});

关键注解标注

consequentialHint: true：向浏览器明确宣告此操作具有实质性业务后果（如扣减库存配额、生成待付款单）。Agent 调用时，宿主环境应弹出授权确认，严禁静默执行；
readOnlyHint: true：对于像 get_product 这样的纯读取操作，标注只读提示可免去多余的交互阻碍；
状态覆盖机制：购买数量、优惠券码与支付方式必须作为参数直接注入下单函数。切忌先在 React 中调用 setState 再立即下单，否则组件闭包中读取到的仍将是旧值。

验证途径与宿主支持现状

在工程实践中，必须严格区分“页内 Agent”与“本地/IDE Coding Agent”的调用环境，切忌将两者混淆：

截至 2026-09-11，经实测可正常发现并调用 WebMCP 工具的环境：

ChatGPT 桌面版内置浏览器（Site tools）：在 Work 或 Codex 工作区下选用 GPT-5.6 Sol 或 Terra 模型（Luna、Enterprise 及 Edu 许可除外）。该路径运行在 ChatGPT 的自研 WebMCP 运行时中，完全不依赖站方下发的 Chrome Origin Trial 令牌；
Chrome 原生环境与调试器：运行版本处于 149–156 窗口期的 Chrome，或手动开启 chrome://flags/#enable-webmcp-testing 开关，结合官方提供的 Model Context Tool Inspector 扩展手动测试工具调用（默认对接 gemini-3-flash-preview）。

Origin Trial 发现性机制

WebMCP 与 MCP、Coding Agent 的职责划分

浏览器内访问本站：依托 WebMCP。交互主体是驻留在当前标签页、且受浏览器安全沙箱管控的页内 Agent，专注协助用户理解页面并加速操作；
IDE 内编写与重构代码：依托 MCP Server 与项目规约（如 AGENTS.md）。IDE 无法也不应探知用户在浏览器里登录的 Cookie；
无头巡检、批量对账与定时任务：依托受控的后端 API 或自动化服务。WebMCP 始终以“用户当前正注视着该页面”作为前置假设。

不要交给工具的事

将页内交互能力做少、做轻、做可控，远比激进追求全流程自动化更契合 WebMCP 的设计初衷：

严禁代为支付：严禁由工具发起链上转账、免密扣款或代签支付；
严禁输出敏感凭据：卡密明文、兑换凭证、用户查询密码与支付二维码原文绝不可进入工具返回值（否则大模型会留存副本）；
严禁替代全站 API：不要试图将 WebMCP 包装为开放的无头爬虫接口，一旦 Origin Trial 周期结束或用户浏览器不支持，应用层必须具备静默优雅的降级表现。

用户盯着屏幕，Agent 读写结构化状态，资金与凭据的交付始终由人亲手确认——这是构建现代安全 WebMCP 体验不可动摇的基石。

参考资料

WebMCP 开发者指南，Chrome for Developers，核验日期 2026-09-11。
WebMCP Imperative API 规范，含 registerTool、annotations 与 AbortSignal 标准，核验日期 2026-09-11。
WebMCP Explainer 标准草案，W3C WebML Community Group，核验日期 2026-09-11。
进阶手记：WebMCP 二期：付完款之后，只问卡在哪，爱买 AI 架构实践，核验日期 2026-09-12。