Claude Code: 实战：Chrome 扩展与并行任务

> 创建一个 Chrome 扩展：网页高亮标注工具

功能要求：
1. 选中文字后右键菜单"高亮标注"
2. 支持 4 种颜色：黄/绿/蓝/红
3. 标注持久化（Chrome storage API）
4. Popup 面板管理标注列表
5. 一键导出为 Markdown

技术要求：
- Manifest V3
- TypeScript
- 无框架（原生 DOM）
- 遵循 Chrome 扩展最佳实践

Claude Code:
  → Creating project structure...
  → Creating manifest.json (Manifest V3)
  → Creating src/background.ts (service worker)
  → Creating src/content.ts (content script)
  → Creating src/popup/ (popup UI)
  → Creating src/storage.ts (标注持久化)
  → Creating src/export.ts (Markdown 导出)
  → Creating tsconfig.json & package.json
  → Running: npm run build ✓

  项目创建完成！7 个源文件，功能完整。

# 第一轮：基础功能完成，开始迭代

> 添加功能：点击已有高亮可以取消标注

Claude Code:
  → Reading src/content.ts
  → Adding click-to-remove handler
  → Adding remove-highlight animation
  → Running: npm run build ✓

> 添加功能：标注列表支持搜索

Claude Code:
  → Reading src/popup/popup.ts
  → Adding search input with filter
  → Running: npm run build ✓

> 添加功能：支持在 PDF 页面中标注

Claude Code:
  → PDF 使用 embed/object，无法直接注入 content script
  → 替代方案：使用 PDF.js 渲染 PDF，然后注入标注功能
  → This is a significant change. /checkpoint "PDF support"
  → Adding PDF.js integration
  → Creating src/pdf-viewer.ts
  → Modifying manifest.json for PDF handling
  → Running: npm run build ✓

chrome-highlighter/
├── manifest.json
├── src/
│   ├── background.ts      # Service Worker
│   ├── content.ts          # Content Script
│   ├── popup/
│   │   ├── popup.html
│   │   ├── popup.ts
│   │   └── popup.css
│   ├── storage.ts          # 标注持久化
│   ├── export.ts           # Markdown 导出
│   └── pdf-viewer.ts       # PDF 支持
├── icons/
├── dist/                   # 构建输出
├── package.json
└── tsconfig.json

# 串行方式（一个接一个）
> 添加用户头像上传功能
[8 min]
> 实现数据导出 API
[6 min]
> 重构日志系统
[10 min]
> 补充缺失的测试
[5 min]
总计: 29 min

# 并行方式（同时执行）
> 同时处理以下4个任务：
> 1. src/api/avatar.ts - 添加头像上传
> 2. src/api/export.ts - 数据导出 API
> 3. src/utils/logger.ts - 重构日志
> 4. tests/ - 补充测试

Claude Code 启动 4 个子代理并行执行：
  子代理1 [avatar]  → ✅ 8min
  子代理2 [export]  → ✅ 6min
  子代理3 [logger]  → ✅ 10min
  子代理4 [tests]   → ✅ 5min
总计: 10 min（最慢子代理的时间）

# 问题：并行修改同一文件会冲突

> 并行修改 src/routes/index.ts 中的路由注册

❌ 冲突！多个子代理同时修改同一文件

# 解决：每个任务修改不同文件

> 头像上传只涉及 src/api/avatar.ts 和 src/routes/avatar.ts
> 数据导出只涉及 src/api/export.ts 和 src/routes/export.ts
> 不要修改 src/routes/index.ts（我手动注册路由）

Claude Code:
  子代理1 [avatar files]  → ✅
  子代理2 [export files]  → ✅
  主代理: 汇总结果，生成路由注册代码
  → "请在 src/routes/index.ts 中添加以下两行：
     import avatarRoutes from './avatar';
     import exportRoutes from './export';"

# Alice 的电商项目重构

原始任务："将项目从 REST 迁移到 GraphQL"

拆解：
1. 定义 GraphQL Schema（独立）
2. 创建 User Resolver（独立，依赖 Schema 定义完成）
3. 创建 Order Resolver（独立，依赖 Schema 定义完成）
4. 创建 Payment Resolver（独立，依赖 Schema 定义完成）
5. 添加 DataLoader 优化 N+1（独立）
6. 迁移路由层（依赖所有 Resolver 完成）
7. 删除旧 REST 路由（最后一步）

执行顺序：
  Step 1: Schema → 完成后
  Step 2-5: 4个 Resolver 并行 → 完成后
  Step 6: 迁移路由 → 完成后
  Step 7: 清理

# Phase 1: Schema
> 只创建 GraphQL Schema 定义文件

/checkpoint "schema-complete"

# Phase 2: 并行创建 Resolver
> 基于已创建的 Schema，并行创建所有 Resolver

/checkpoint "resolvers-complete"

# Phase 3: 路由迁移
> 将路由从 REST 迁移到 GraphQL，删除旧路由

/checkpoint "migration-complete"

# 验证
> 运行全量测试
✅ All 134 tests passed

# 每个阶段检查成本

> /cost

Phase 1 (Schema):    $0.45, 15K tokens
Phase 2 (Resolvers): $2.30, 78K tokens (4子代理)
Phase 3 (Migration): $1.80, 60K tokens
─────────────────────────────
Total:               $4.55, 153K tokens

# 对比人工时间：
# 串行开发约 4 小时，Claude Code 约 30 分钟
# 成本 $4.55 vs 工时成本 $200+（$50/h × 4h）