diff --git a/README.md b/README.md index 6554601..4774812 100644 --- a/README.md +++ b/README.md @@ -56,9 +56,11 @@ WebMCP 可以理解为“网页给 AI Agent 暴露的一组工具说明书”。 可以用 `document.modelContext.registerTool` 作为概念示例。需要强调：WebMCP 仍是实验性方向，适合作为渐进增强，不应该假设所有浏览器都已经稳定支持。 -### 5. 核心概念：WebSkills +### 5. 核心概念：任务流程说明 -WebMCP 解决“能调用什么工具”。WebSkills 解决“复杂任务应该怎么走”。 +WebMCP 解决“能调用什么工具”。复杂任务还需要一层任务流程说明，解决“应该按什么步骤走”。 + +这里不要把这层流程能力包装成官方浏览器标准或 WebMCP 同级概念。更稳妥的表述是：在应用实践中，可以把复杂任务沉淀成 skill、recipe、runbook 或任务说明，让 Agent 先理解流程，再按步骤调用页面暴露的工具。 例如用户说“帮我申请价保”，这不是一个单工具任务。它可能需要： @@ -68,9 +70,9 @@ WebMCP 解决“能调用什么工具”。WebSkills 解决“复杂任务应该 4. 填申请单 5. 最后让用户确认提交 -WebSkills 的角色就是告诉 Agent 这些流程规则。可以用一句话总结： +任务流程说明的角色就是告诉 Agent 这些流程规则。可以用一句话总结： -> WebMCP 是工具箱，WebSkills 是操作手册。 +> WebMCP 是工具箱，任务流程说明是操作手册。 ### 6. Chrome 新特性快闪 diff --git a/pages/adoption-now.md b/pages/adoption-now.md new file mode 100644 index 0000000..c4b7dde --- /dev/null +++ b/pages/adoption-now.md @@ -0,0 +1,45 @@ +# 现在怎么落地：先做 Agent 友好，不赌单一 API + +
+ +
+
现在就值得做
+
+ +- 补语义化 HTML 与可访问性 +- 梳理核心业务动作边界 +- 把复杂流程沉淀成任务说明 +- 在内部系统试验 WebMCP / SDK +- 给高风险动作加确认和审计 + +
+
+ +
+
暂时不要这样做
+
+ +- 把实验 API 当生产强依赖 +- 假设 Safari / Firefox 已支持 +- 让 Agent 自动执行不可逆操作 +- 用工具调用绕过权限系统 +- 忽略降级和人工接管路径 + +
+
+ +
+ + diff --git a/pages/chrome-flash.md b/pages/chrome-flash.md new file mode 100644 index 0000000..3c60b36 --- /dev/null +++ b/pages/chrome-flash.md @@ -0,0 +1,56 @@ +# Chrome 新特性快闪：三条线一起推进 + +
+ +
+
Agent 交互
+
+ +- WebMCP +- 可复用任务能力 +- Prompt API / Built-in AI + +
+
+ +
+
开发者工具
+
+ +- Modern Web Guidance +- DevTools for agents +- Baseline + +
+
+ +
+
体验升级
+
+ +- HTML in Canvas +- View Transitions +- Navigation API + +
+
+ +
+ +
+主线不是“Chrome 又加了几个 API”，而是 Web 的使用者和开发方式都在变。 +
+ + diff --git a/pages/closing.md b/pages/closing.md index b649568..5bf43e3 100644 --- a/pages/closing.md +++ b/pages/closing.md @@ -1,21 +1,39 @@ -# 收尾：建立团队的 Chrome 更新雷达 +# 开发者现在该记住什么？
-
-Chrome 更新不是新闻流，而是 Web 产品能力池。 +
+Web 页面未来不只是给人看的，也会被 Agent 理解、调用和操作。
-
-真正的价值是筛选、验证、降级和沉淀，而不是追逐每一个新 API。 +
+语义化、可访问性、清晰的业务函数边界，会变成新的工程基础设施。
-
-建议形成固定节奏：每月扫描一次，季度做一次 demo day，成熟能力进入技术方案模板。 +
+WebMCP 的方向是从“AI 猜 UI”走向“网页主动提供能力”。 +
+ +
+越自动化，越需要权限、确认、审计和渐进增强。
diff --git a/pages/demo/adoption-plan.md b/pages/demo/adoption-plan.md index 16e03f5..0da68a2 100644 --- a/pages/demo/adoption-plan.md +++ b/pages/demo/adoption-plan.md @@ -1,33 +1,42 @@ -# 模拟展示 4：团队落地清单 +# 任务流程说明：工具箱之外，还要操作手册 -
+
+ +```mermaid {scale: 0.72} +flowchart LR + A[用户目标] --> B[识别任务类型] + B --> C[读取流程说明] + C --> D[打开必要页面] + D --> E[调用工具] + E --> F[关键动作交给用户确认] +``` + +
+ +
+ +
+
WebMCP
+
解决“有哪些工具可以调用”。
+
-
本周可做
-
- -- 建一个 Chrome 更新跟踪文档 -- 选 1 个 DevTools 工作流做内部演示 -- 为 1 个新能力写最小 demo -- 标注生产可用与仅实验的边界 - -
-
- -
-
不要直接做
-
- -- 只因 Chrome 支持就上线 -- 忽略 Safari / Firefox 用户 -- 把实验能力写进核心链路 -- 跳过权限与隐私评估 - -
+
任务流程说明
+
解决“复杂任务应该按什么流程走”。
diff --git a/pages/demo/devtools-workflow.md b/pages/demo/devtools-workflow.md index d6c64a7..01774b6 100644 --- a/pages/demo/devtools-workflow.md +++ b/pages/demo/devtools-workflow.md @@ -1,32 +1,52 @@ -# 模拟展示 2：DevTools 排查链路 +# WebMCP 的两种接入方式 -
+
-```mermaid {scale: 0.82} -flowchart LR - A[用户反馈卡顿] --> B[Performance 录制] - B --> C[定位长任务] - C --> D[Network 查资源瀑布] - D --> E[Coverage 查无效代码] - E --> F[形成优化清单] +
+
声明式：增强表单语义
+ +```html +
+ +
``` -
- -
- -
-
演示素材
-
准备一个加载慢、交互卡顿、资源偏大的页面作为示例。
+
适合已有 HTML 表单和渐进增强。
-
观众收获
-
把 DevTools 从“会打开”变成“按链路定位问题”。
+
命令式：注册业务工具
+ +```ts +document.modelContext.registerTool({ + name: 'create_order_menu', + description: '创建订单管理菜单', + inputSchema, + execute: createOrderMenu, +}) +``` + +
适合复杂业务动作和后台系统。
+
+WebMCP 仍属于实验性方向，实际接入要做能力检测、渐进增强和人工确认。 +
+ diff --git a/pages/demo/platform-api.md b/pages/demo/platform-api.md index ee00c57..3434d7c 100644 --- a/pages/demo/platform-api.md +++ b/pages/demo/platform-api.md @@ -1,38 +1,48 @@ -# 模拟展示 3：Web 平台能力评估卡 +# WebMCP：网页给 Agent 的工具说明书
-
能力示例
+
一个工具通常描述什么？
-- CSS 新布局与交互能力 -- View Transitions -- File System / Clipboard / Share APIs -- PWA 安装与离线体验 -- 本地 AI 与浏览器内置能力探索 +- 名字：工具叫什么 +- 描述：什么时候应该调用 +- 参数：需要哪些输入 +- 执行：调用后做什么业务逻辑 +- 返回：成功、失败和结果信息
-
-
评估维度
-
+
+
它改变了什么？
+
-- 用户价值：解决什么真实问题？ -- 兼容性：Chrome-only 还是跨浏览器？ -- 降级方案：不可用时如何处理？ -- 风险：权限、隐私、性能、安全 +- UI 改版不等于能力失效 +- Agent 不再猜按钮位置 +- 业务边界由开发者定义 +- 权限、确认、审计可以前置设计
-
-推荐输出格式：能力名称 / Chrome 支持状态 / 业务场景 / Demo 链接 / 风险 / 下一步。 +
+从“AI 操作页面”升级为“页面向 AI 暴露能力”。
diff --git a/pages/demo/release-scan.md b/pages/demo/release-scan.md index 00a988f..f9400d3 100644 --- a/pages/demo/release-scan.md +++ b/pages/demo/release-scan.md @@ -1,44 +1,49 @@ -# 模拟展示 1：快速扫一版 Chrome 更新 +# 同一个任务，三种完成方式 -
+
-
-
信息源
-
- -- Chrome Developers Blog -- ChromeStatus -- DevTools Release Notes -- MDN Baseline - -
-
- -
-
筛选标准
-
- -- 是否默认启用 -- 是否跨浏览器可用 -- 是否影响现有代码 -- 是否带来明显产品收益 - -
+
+
方式 1
+
看截图
+
逐屏识别、逐步点击、逐项填表。
+
分钟级
+
案例中 token 可到几十万级
-
输出物
-
- -- 3 个可试验能力 -- 2 个需要关注的变更 -- 1 个团队落地建议 - -
+
方式 2
+
读结构
+
读取 DOM / 可访问性树，再定位控件。
+
更快但脆
+
复杂交互下仍可能点错或漏选
+
+
方式 3
+
调工具
+
调用页面暴露的业务工具。
+
秒级
+
案例中约 30-40 秒、约 1.7 万 token
+
+ +
+ +
+案例任务：后台系统内完成“创建订单管理模块”，包括词条、菜单、角色权限绑定。数据来自仓库原始实战材料，作为特定案例结果，不代表所有场景通用值。
diff --git a/pages/devtools-agents.md b/pages/devtools-agents.md new file mode 100644 index 0000000..947e801 --- /dev/null +++ b/pages/devtools-agents.md @@ -0,0 +1,49 @@ +# DevTools for agents：让 Agent 看见真实浏览器 + +
+ +
+
人类调试时看什么？
+
+ +- Console 错误 +- Network 请求 +- Performance 录制 +- Lighthouse 结果 +- Memory / Heap snapshot + +
+
+ +
+
Agent 也应该看什么？
+
+ +- 页面真实渲染状态 +- 运行时错误和警告 +- 资源瀑布与接口失败 +- 性能瓶颈和内存线索 +- 扩展和多窗口调试上下文 + +
+
+ +
+ +
+只把代码发给 Agent 不够，它还需要理解代码在浏览器里怎么运行。 +
+ + diff --git a/pages/modern-web-guidance.md b/pages/modern-web-guidance.md new file mode 100644 index 0000000..0c81447 --- /dev/null +++ b/pages/modern-web-guidance.md @@ -0,0 +1,47 @@ +# Modern Web Guidance：给编码 Agent 补现代 Web 知识 + +
+ +
+
问题
+
+ +- 浏览器能力每几周更新 +- 模型训练知识经常滞后 +- AI 容易写旧方案或复杂 polyfill +- 兼容性和降级策略容易漏掉 + +
+
+ +
+
解法
+
+ +- 把现代 Web 指南装进 AI 工具 +- 查询 Baseline 和最佳实践 +- 给出 gotchas 与 fallbacks +- 让 Agent 写“今天的 Web” + +
+
+ +
+ +
+可以把它类比成：以前 Browserslist / Autoprefixer 帮构建工具查兼容性；现在 Modern Web Guidance 帮编码 Agent 查现代 Web 知识。 +
+ + diff --git a/pages/outline.md b/pages/outline.md index 3e42893..bd7bb01 100644 --- a/pages/outline.md +++ b/pages/outline.md @@ -1,33 +1,39 @@ -# 分享大纲 +# 为什么 AI 操作网页会不可靠？ -
+
-
-
01
-
Chrome 更新怎么看
-
Release Notes · ChromeStatus · Baseline · Origin Trials
+
+
视觉识别
+
AI 看截图，猜按钮和输入框在哪里。
+
通用性强，但慢、贵、受 UI 变化影响。
-
-
02
-
Web 平台新能力
-
CSS · Web APIs · PWA · Media · AI-adjacent APIs
+
+
DOM / 可访问性树
+
AI 读取结构，寻找元素再点击。
+
比视觉结构化，但复杂组件和隐藏状态仍会干扰。
-
-
03
-
DevTools 工作流
-
Performance · Network · CSS Overview · Recorder
+
+
WebMCP 工具调用
+
网页主动暴露工具，AI 调用明确能力。
+
把“猜 UI”变成“调业务能力”。
-
-
04
-
落地与风险
-
兼容性 · 安全边界 · 灰度策略 · 团队清单
+
+AI 擅长结构化信息，不擅长在复杂 UI 里猜下一步。
diff --git a/pages/overview.md b/pages/overview.md index b48900c..f4d49d6 100644 --- a/pages/overview.md +++ b/pages/overview.md @@ -1,33 +1,45 @@ -# 这次分享解决什么问题？ +# 一个变化：网页不只给人用了
-
听众能获得
+
过去的 Web
-- Chrome 近期值得关注的新能力地图 -- 哪些能力已经适合进入生产评估 -- 如何用 DevTools 更快定位性能与兼容性问题 -- 如何把浏览器更新转成团队行动项 +- 用户看页面 +- 用户理解信息 +- 用户点击控件 +- 用户完成流程
-
-
不展开做什么
-
+
+
Agentic Web
+
-- 不逐条朗读全部 release notes -- 不做浏览器内核源码分析 -- 不承诺所有实验能力都可直接上线 -- 不替代真实项目的兼容性验证 +- Agent 理解页面意图 +- Agent 拆解多步任务 +- Agent 调用网页能力 +- 用户确认关键动作
+
+核心判断：今天的网页“能被 AI 操作”，但还没有真正“为 Agent 优化”。 +
+ diff --git a/pages/platform-shifts.md b/pages/platform-shifts.md new file mode 100644 index 0000000..70ee3f5 --- /dev/null +++ b/pages/platform-shifts.md @@ -0,0 +1,38 @@ +# 体验侧的新能力：让 Web 更像应用，也更可组合 + +
+ +
+
HTML in Canvas
+
把真实 DOM 内容放进 Canvas / 3D 场景，保留选择、翻译和可访问性等 Web 能力。
+
+ +
+
View Transitions
+
用更少的 JavaScript 做页面状态切换，让 Web 应用的过渡更自然。
+
+ +
+
Navigation API
+
用统一事件管理前进、后退和应用导航，为 SPA 和跨页转场打基础。
+
+ +
+ +
+这些能力服务同一个目标：把 Web 的开放性、可访问性和应用体验放到同一条轨道上。 +
+ + diff --git a/slides.md b/slides.md index 838b12b..1394c74 100644 --- a/slides.md +++ b/slides.md @@ -3,8 +3,8 @@ theme: penguin colorSchema: light title: What's New in Chrome info: | - ## Chrome 新特性分享 - 面向前端、产品与技术团队的浏览器能力更新速览 + ## What's New in Chrome + 面向 Agentic Web / WebMCP 的 Chrome 新特性分享 transition: slide-left mdc: true drawings: @@ -17,9 +17,19 @@ layout: intro # What's New in Chrome -Web 平台能力、DevTools 工作流与产品落地机会 +Web 正在进入 Agentic 时代 -
分享项目模板 · 首页 · 大纲 · 模拟展示详情页
+
WebMCP · Task Flows · Modern Web Guidance · DevTools for agents · Baseline
+ + --- src: ./pages/overview.md @@ -29,28 +39,42 @@ src: ./pages/overview.md src: ./pages/outline.md --- ---- -layout: new-section ---- - -# 模拟展示：从 Chrome Release Notes 到团队落地 - --- src: ./pages/demo/release-scan.md --- ---- -src: ./pages/demo/devtools-workflow.md ---- - --- src: ./pages/demo/platform-api.md --- +--- +src: ./pages/demo/devtools-workflow.md +--- + --- src: ./pages/demo/adoption-plan.md --- +--- +src: ./pages/chrome-flash.md +--- + +--- +src: ./pages/modern-web-guidance.md +--- + +--- +src: ./pages/devtools-agents.md +--- + +--- +src: ./pages/platform-shifts.md +--- + +--- +src: ./pages/adoption-now.md +--- + --- src: ./pages/closing.md ---