ji3206/what-new-in-chrome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
part2-official-demo
what-new-in-chrome/README.md
T

5.4 KiB
Raw Permalink Blame History

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 成功还是失败

可以用 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 dev：启动演示模式
  • pnpm build：构建静态站点
  • pnpm export：导出幻灯片
Reference in New Issue View Git Blame Copy Permalink