What's New in Chrome 分享项目

这是一个基于 Slidev 的 Chrome 新特性分享项目骨架。

内容定位

这次分享面向对 Chrome 新特性不太熟悉、但有 Web 开发经验的开发者。内容不做落地教程，不展开 SDK 接入和企业级架构，也不覆盖所有业务场景；核心目标是用科普方式讲清楚一个方向：

Web 正在进入 Agentic 时代。网页未来不只是给人看的，也会被 AI Agent 理解、调用和操作。

因此，分享主线选择 Agentic Web / WebMCP。Chrome 的其它新特性作为辅助背景，用来说明浏览器正在同时升级用户体验、开发者工作流和 Agent 交互能力。

推荐讲述大纲

1. 背景：浏览器的新变化

以前 Web 页面主要服务人类用户：看、点、输入、提交。现在 AI Agent 也开始成为一种新的使用者：它要理解网页、执行任务、跨页面操作、帮用户完成流程。

这一部分只建立认知，不急着讲 API。重点让听众先接受一个判断：Web 开发者未来可能要同时设计“人类层”和“Agent 层”。

2. 问题：为什么 AI 操作网页不可靠

用三种方案做对比：

• 视觉识别：AI 看截图，判断按钮在哪里。优点是通用、不需要改页面；问题是慢、贵、token 高，UI 一变就容易失误。
• DOM / 可访问性树识别：AI 读取页面结构，寻找按钮、表单、菜单。它比纯视觉更结构化，但仍然容易被复杂组件、隐藏状态和错误点击影响。
• WebMCP / 工具调用：网页主动告诉 AI：“我这里有这些工具，参数是这些，调用后会执行这些业务逻辑。”AI 不再猜 UI，而是调用明确的工具。

这一段的核心结论是：AI 最擅长处理结构化信息，不擅长猜复杂 UI。WebMCP 的价值就是把网页能力结构化地交给 Agent。

3. Demo 对比：同一个任务，三种方式

Demo 只做科普对比，不做现场代码改造。

建议任务设定为：在一个后台系统里完成“创建订单管理模块”，包括创建词条、创建菜单、绑定角色权限。

对比讲法：

• 视觉识别：一步一步截图、找菜单、填表单，可能能完成，但过程慢，token 消耗高。
• DOM / 结构识别：可能更快，但复杂交互下容易点错、漏选、误删或陷入错误流程。
• WebMCP：直接调用页面暴露的业务工具，速度快，过程清晰，token 更少，行为也更可控。

注意：中文实战材料里的 token 和耗时数据可以作为案例素材，但要标注为特定案例结果，不作为所有场景的通用结论。

4. 核心概念：WebMCP 是什么

WebMCP 可以理解为“网页给 AI Agent 暴露的一组工具说明书”。

一个工具通常包含：

• 名字：这个工具叫什么
• 描述：它适合什么时候用
• 参数：需要哪些输入
• 执行逻辑：调用后网页做什么
• 返回结果：告诉 Agent 成功还是失败

可以用 document.modelContext.registerTool 作为概念示例。需要强调：WebMCP 仍是实验性方向，适合作为渐进增强，不应该假设所有浏览器都已经稳定支持。

5. 核心概念：WebSkills

WebMCP 解决“能调用什么工具”。WebSkills 解决“复杂任务应该怎么走”。

例如用户说“帮我申请价保”，这不是一个单工具任务。它可能需要：

1. 去订单页查订单
2. 拿到订单号
3. 跳到价保页
4. 填申请单
5. 最后让用户确认提交

WebSkills 的角色就是告诉 Agent 这些流程规则。可以用一句话总结：

WebMCP 是工具箱，WebSkills 是操作手册。

6. Chrome 新特性快闪

这一部分只做快速展示，不展开细节：

• Modern Web Guidance：给 AI 编程工具补现代 Web 知识，避免写过时代码。
• Chrome DevTools for agents：让 AI 能读取 console、network、performance、Lighthouse 等真实浏览器信息。
• Prompt API / Built-in AI：浏览器内置本地 AI 能力，适合渐进增强。
• HTML-in-Canvas：把真实 DOM 放进 Canvas / 3D 场景。
• Baseline：告诉开发者哪些 Web 能力已经可以跨浏览器放心用。
• View Transitions / Navigation API：让 Web 应用切换体验更自然。

这一章服务于主线：Chrome 正在让 Web 同时面向人、开发者工具和 AI Agent 进化。

7. 收束：开发者现在该记住什么

• Web 页面未来不只是给人看的，也会被 Agent 使用。
• 语义化、可访问性、清晰的业务函数边界会变得更重要。
• WebMCP 代表一种方向：从“AI 猜 UI”转向“网页主动提供能力”。
• 高风险操作仍然需要权限、确认和审计边界。
• 新能力要渐进增强，不要假设所有浏览器都已支持。

本地开发

• pnpm install
• pnpm dev
• 打开 http://localhost:3030

内容结构

• slides.md：默认首页、章节入口和全局顺序
• pages/outline.md：分享大纲
• pages/demo/：模拟展示详情页
• style.css：主题微调

常用脚本

• pnpm dev：启动演示模式
• pnpm build：构建静态站点
• pnpm export：导出幻灯片