109 lines
5.4 KiB
Markdown
109 lines
5.4 KiB
Markdown
# 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 成功还是失败
|
||
|
||
可以用 `navigator.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 进化。
|
||
|
||
正式 demo 入口：
|
||
|
||
- `public/demo/webmcp/`：WebMCP 工具契约演示。
|
||
- `scripts/demo-modern-web-guidance.sh` 和 `public/demo/modern-web-guidance/`：Modern Web Guidance 官方 CLI 演示。
|
||
- `public/demo/devtools-agents/`：DevTools for agents 检查目标页。
|
||
- `public/html-in-canvas/`：HTML-in-Canvas origin trial / fallback 演示。
|
||
- `public/demo/view-transitions/`：View Transitions 渐进增强演示。
|
||
|
||
### 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/)：模拟展示详情页
|
||
- [public/demo/](./public/demo/)：可运行浏览器 demo 入口
|
||
- [public/html-in-canvas/](./public/html-in-canvas/)：HTML-in-Canvas 专门演示
|
||
- [scripts/demo-modern-web-guidance.sh](./scripts/demo-modern-web-guidance.sh)：Modern Web Guidance 官方 CLI 演示脚本
|
||
- [style.css](./style.css)：主题微调
|
||
|
||
## 常用脚本
|
||
|
||
- `pnpm dev`：启动演示模式
|
||
- `pnpm build`：构建静态站点
|
||
- `pnpm export`：导出幻灯片
|