浅谈 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: "向当前页面添加一条便签。",
inputSchema: {
type: "object",
properties: {
text: {
type: "string",
description: "要添加的便签内容"
}
},
required: ["text"]
},
execute: async ({ text }) => {
const clean = String(text || "").trim();
if (!clean) {
throw new Error("便签内容不能为空");
}
notes.unshift(clean);
renderNotes();
return {
content: [
{ type: "text", text: `已添加便签：${clean}` }
]
};
}
};
if (navigator.modelContext) {
navigator.modelContext.registerTool(addNoteTool);
}
window.addEventListener("beforeunload", () => {
if (navigator.modelContext) {
navigator.modelContext.unregisterTool("add_note");
}
});
</script>
// 声明式：表单类型
// 浏览器会把这个表单推断成一个工具，相关的字段会变成对应的 schema 参数
<form
id="support-form"
toolname="submit_support_ticket"
tooldescription="创建一张支持工单。"
toolautosubmit
action="/noop"
>
<label>
优先级
<select
name="priority"
required
toolparamdescription="工单优先级，若问题紧急请选择 urgent"
>
<option value="normal">普通</option>
<option value="high">高</option>
<option value="urgent">紧急</option>
</select>
</label>
<label>
主题
<input
name="subject"
type="text"
required
toolparamdescription="一句话概括当前问题"
/>
</label>
<label>
详细说明
<textarea
name="details"
required
toolparamdescription="补充背景、错误现象和期望行为"
></textarea>
</label>
<button type="submit">提交</button>
</form>
最简单体验方式：
使用官方提供的 demo 页面 WebMCP Travel 以及安装浏览器拓展 Model Context Tool Inspector Extension 体验，如图
6663832×1642 459 KB
--【壹】--：
有一些场景会需要当前的浏览器上下文，后台复现不方便或者不好实现，或者说系统没有比较成熟的 openapi 体系，直接前端接，会更快更安全；又或者有一些场景产品期望有更好的交互，希望将 AI 融入到交互中，提升体验，而不是让 AI 在后台全程接管，这也是场景
--【贰】--：
其实跟现在的 mcp server 相近，有些不提供，有些是主动提供的，webmcp 只是多一种方式
--【叁】--： 江湖骗子:
控制浏览器
控制浏览器有很多种方式，不一定是这个，这个目前还没成熟
--【肆】--：
佬 请问ai怎么知道有哪些tools可以调用
用cc让他访问某个页面 然后再让它调用某个api获取tools吗?
如果直接语义化的给ai说 ai也不会主动去看有哪些工具可以用吧我理解 还是得让他知道这个规范才行
--【伍】--：
国内网站巴不得全都引流到APP上使用，生态数据封闭，没有啥动力将web网页的数据暴露给AI的
--【陆】--：
所以小龙虾官方说能控制浏览器了(大概是13-14号的推文)，就是因为chrome出了这个功能吧
--【柒】--：
我就说为什么我问gpt问不出来，原来是web mcp，我一直以为是cdp什么新的升级
--【捌】--：
没啥用 感觉没几个网站会暴露
大概率还是 ai 自己开发的时候给自己调试方便用
--【玖】--：
太好了终于有人能讲明白了，我昨天那个帖子就觉得奇怪了，大伙好像都不是很明白
Chrome 146 昨天更新了，新的功能：内置 MCP 支持 前沿快讯webmcp 和 devtools mcp应该是不一样的吧 但我不知道怎么用 [image] 目前只找到这个 只能用gemini的api
--【拾】--：
呃..既然都让开发者提供mcp让AI来操作网页了，那干嘛不直接提供API呢？还非要套个浏览器壳子？
--【拾壹】--：
是的，大家都跟 chrome devtools mcp 混淆了
--【拾贰】--：
需要网页开发者主动注册工具
--【拾叁】--：
这么说，那openclaw不是可以通过这个直接给你进行网络操作。
--【拾肆】--：
不过最后总归是需要开发者用户用脚投票，不是每一个特性都能被广泛使用
--【拾伍】--：
本来也是可以的，通过 cdp
有了 webmcp 之后，如果网站开发者自己提供工具出来，openclaw 操作网站的效率会更高
--【拾陆】--：
我wsl内的codex啥浏览器都难用
--【拾柒】--：
其实就是前端tool调用
--【拾捌】--：
那这个意义在哪里，能让开发者提供工具出来的话，那不是可以直接要api
--【拾玖】--：
说得很好！
由站点自己暴露 AI 能力支持，理想情况下更稳定、可靠。
对于参差不齐的站点页面，准确率一样能提升。
应该也能大大减少解析、推理、token。
这两天不止看到一个帖子提到了 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: "向当前页面添加一条便签。",
inputSchema: {
type: "object",
properties: {
text: {
type: "string",
description: "要添加的便签内容"
}
},
required: ["text"]
},
execute: async ({ text }) => {
const clean = String(text || "").trim();
if (!clean) {
throw new Error("便签内容不能为空");
}
notes.unshift(clean);
renderNotes();
return {
content: [
{ type: "text", text: `已添加便签：${clean}` }
]
};
}
};
if (navigator.modelContext) {
navigator.modelContext.registerTool(addNoteTool);
}
window.addEventListener("beforeunload", () => {
if (navigator.modelContext) {
navigator.modelContext.unregisterTool("add_note");
}
});
</script>
// 声明式：表单类型
// 浏览器会把这个表单推断成一个工具，相关的字段会变成对应的 schema 参数
<form
id="support-form"
toolname="submit_support_ticket"
tooldescription="创建一张支持工单。"
toolautosubmit
action="/noop"
>
<label>
优先级
<select
name="priority"
required
toolparamdescription="工单优先级，若问题紧急请选择 urgent"
>
<option value="normal">普通</option>
<option value="high">高</option>
<option value="urgent">紧急</option>
</select>
</label>
<label>
主题
<input
name="subject"
type="text"
required
toolparamdescription="一句话概括当前问题"
/>
</label>
<label>
详细说明
<textarea
name="details"
required
toolparamdescription="补充背景、错误现象和期望行为"
></textarea>
</label>
<button type="submit">提交</button>
</form>
最简单体验方式：
使用官方提供的 demo 页面 WebMCP Travel 以及安装浏览器拓展 Model Context Tool Inspector Extension 体验，如图
6663832×1642 459 KB
--【壹】--：
有一些场景会需要当前的浏览器上下文，后台复现不方便或者不好实现，或者说系统没有比较成熟的 openapi 体系，直接前端接，会更快更安全；又或者有一些场景产品期望有更好的交互，希望将 AI 融入到交互中，提升体验，而不是让 AI 在后台全程接管，这也是场景
--【贰】--：
其实跟现在的 mcp server 相近，有些不提供，有些是主动提供的，webmcp 只是多一种方式
--【叁】--： 江湖骗子:
控制浏览器
控制浏览器有很多种方式，不一定是这个，这个目前还没成熟
--【肆】--：
佬 请问ai怎么知道有哪些tools可以调用
用cc让他访问某个页面 然后再让它调用某个api获取tools吗?
如果直接语义化的给ai说 ai也不会主动去看有哪些工具可以用吧我理解 还是得让他知道这个规范才行
--【伍】--：
国内网站巴不得全都引流到APP上使用，生态数据封闭，没有啥动力将web网页的数据暴露给AI的
--【陆】--：
所以小龙虾官方说能控制浏览器了(大概是13-14号的推文)，就是因为chrome出了这个功能吧
--【柒】--：
我就说为什么我问gpt问不出来，原来是web mcp，我一直以为是cdp什么新的升级
--【捌】--：
没啥用 感觉没几个网站会暴露
大概率还是 ai 自己开发的时候给自己调试方便用
--【玖】--：
太好了终于有人能讲明白了，我昨天那个帖子就觉得奇怪了，大伙好像都不是很明白
Chrome 146 昨天更新了，新的功能：内置 MCP 支持 前沿快讯webmcp 和 devtools mcp应该是不一样的吧 但我不知道怎么用 [image] 目前只找到这个 只能用gemini的api
--【拾】--：
呃..既然都让开发者提供mcp让AI来操作网页了，那干嘛不直接提供API呢？还非要套个浏览器壳子？
--【拾壹】--：
是的，大家都跟 chrome devtools mcp 混淆了
--【拾贰】--：
需要网页开发者主动注册工具
--【拾叁】--：
这么说，那openclaw不是可以通过这个直接给你进行网络操作。
--【拾肆】--：
不过最后总归是需要开发者用户用脚投票，不是每一个特性都能被广泛使用
--【拾伍】--：
本来也是可以的，通过 cdp
有了 webmcp 之后，如果网站开发者自己提供工具出来，openclaw 操作网站的效率会更高
--【拾陆】--：
我wsl内的codex啥浏览器都难用
--【拾柒】--：
其实就是前端tool调用
--【拾捌】--：
那这个意义在哪里，能让开发者提供工具出来的话，那不是可以直接要api
--【拾玖】--：
说得很好！
由站点自己暴露 AI 能力支持，理想情况下更稳定、可靠。
对于参差不齐的站点页面，准确率一样能提升。
应该也能大大减少解析、推理、token。