浅谈 chrome 146 引入的 webmcp

问题描述：

这两天不止看到一个帖子提到了 chrome 146 版本带来的 webmcp 能力，发现部分佬友们对 webmcp 的认知存在着误区，这里我结合 epp 文档和我的一些理解，给大家做个科普

首先这里要先跟 chrome devtools mcp 做一个区分，chrome devtools mcp 是基于 cdp 实现的 mcp 工具，不是 webmcp，webmcp 是页面给 AI agent 提供能力、让AI控制页面的规范和实现

以前 AI agent 主要消费的是包括 DOM、截图、无障碍树、文本内容、按钮位置、表单结构等给人看的界面、交互，AI 需要自己推断页面中的元素是干什么用的，怎么交互使用

而引入 webmcp 之后，网页开发者可以把一部分页面能力显式暴露成结构化工具，AI 消费的不再只是界面本身，还可以优先消费页面主动提供的 tools + schema + 执行入口

参考 chrome webmcp 的 epp 文档 WebMCP Early Preview - Google 文档

怎么用
前提：

• Chrome 版本至少是 146
• 已开启 chrome://flags/#enable-webmcp-testing
• f12打开控制台，能拿到

  navigator.modelContext;

页面主动提供的工具可通过注册式和声明式

// 注册式：js <script> const notes = []; function renderNotes() { console.log("当前便签:", notes); } const addNoteTool = { name: "add_note", description: "向当前页面添加一条便签。