# What's New in Chrome 分享项目

这是一个基于 [Slidev](https://github.com/slidevjs/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. 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 进化。

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

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

## 本地开发

- `pnpm install`
- `pnpm dev`
- 打开 <http://localhost:3030>

## 内容结构

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

## 常用脚本

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