Claude Code: Practical: Chrome Extension and Parallel Tasks
Last updated: 2026-08-31
Time for real combat. This chapter demonstrates Claude Code's capabilities through two practical scenarios — Chrome extension development and parallel task management.
💡 Tip: Claude Code's value in practice isn't single-shot output, but the "understand requirements → decompose tasks → execute → verify → iterate" complete closed loop.
📋 Prerequisites: Chapter 20 - Checkpoints and Rollback
1. What You'll Learn
- Chrome extension development full flow
- Parallel task practical application
- Large task decomposition strategies
- Iterative development practices
- Cost control in practice
2. Practice 1: Chrome Extension Development
(1) Project Overview
Alice needs a Chrome extension — "Webpage Highlight Annotation Tool":
- Highlight selected text on any webpage
- Support multiple color labels
- Persistent annotation storage
- Export annotations as Markdown
(2) Let Claude Code Handle Development
TEXT
📖 Display only
> Create a Chrome extension: Webpage highlight annotation tool
Features:
1. Right-click menu "Highlight" after selecting text
2. Support 4 colors: yellow/green/blue/red
3. Persistent annotations (Chrome storage API)
4. Popup panel to manage annotation list
5. One-click export to Markdown
Tech: Manifest V3, TypeScript, no framework, native DOM
Claude Code:
→ Creating project structure (7 source files)
→ Creating manifest.json (Manifest V3)
→ Creating background.ts, content.ts, popup UI
→ Creating storage.ts, export.ts
→ Running: npm run build ✓
Project created! Features complete.
▶ Example 1: Iterative Enhancement
TEXT
📖 Display only
# Round 1: Base features complete, start iterating
> Add feature: Click existing highlight to remove annotation
Claude Code: ✅ Added click-to-remove handler
> Add feature: Annotation list search support
Claude Code: ✅ Added search with filter
> Add feature: Support annotation in PDF pages
Claude Code: ✅ Added PDF.js integration
(3) Project Structure
TEXT
📖 Display only
chrome-highlighter/
├── manifest.json
├── src/
│ ├── background.ts
│ ├── content.ts
│ ├── popup/
│ ├── storage.ts
│ ├── export.ts
│ └── pdf-viewer.ts
├── dist/
├── package.json
└── tsconfig.json
3. Practice 2: Parallel Task Management
(1) Scenario
Bob needs to handle 4 independent tasks simultaneously:
- Add user avatar upload
- Implement data export API
- Refactor logging system
- Add missing tests
(2) Serial vs Parallel
TEXT
📖 Display only
# Serial: 8 + 6 + 10 + 5 = 29 min total
# Parallel: max(8, 6, 10, 5) = 10 min total
# 65% time savings
▶ Example 2: Parallel Task Caveats
TEXT
📖 Display only
# Problem: Parallel modifications to same file cause conflicts
# Solution: Each task modifies different files
> Avatar only touches avatar.ts files
> Export only touches export.ts files
> Don't modify index.ts (I'll register routes manually)
Claude Code:
Sub-agent 1 [avatar files] → ✅
Sub-agent 2 [export files] → ✅
Main agent: Generates route registration code for manual insertion
4. Large Task Decomposition Strategy
(1) Decomposition Principles
| Principle | Description |
|---|---|
| Independence | No file dependencies between sub-tasks |
| Atomicity | Each sub-task has clear completion criteria |
| Verifiability | Each sub-task can be independently tested |
| Reversibility | Each sub-task can be individually rolled back |
(2) Decomposition Steps
TEXT
📖 Display only
Original task: "Migrate project from REST to GraphQL"
Decomposition:
1. Define GraphQL Schema (independent)
2. Create User Resolver (independent, after Schema)
3. Create Order Resolver (independent, after Schema)
4. Create Payment Resolver (independent, after Schema)
5. Add DataLoader for N+1 optimization (independent)
6. Migrate route layer (after all Resolvers)
7. Delete old REST routes (last step)
▶ Example 3: Phased Execution
TEXT
📖 Display only
# Phase 1: Schema → /checkpoint "schema-complete"
# Phase 2: Parallel Resolvers → /checkpoint "resolvers-complete"
# Phase 3: Route migration → /checkpoint "migration-complete"
# Verification: All 134 tests passed ✅
5. Practice Cost Control
TEXT
📖 Display only
Phase 1 (Schema): $0.45
Phase 2 (Resolvers): $2.30 (4 sub-agents)
Phase 3 (Migration): $1.80
Total: $4.55
vs. Manual development: ~4 hours × $50/h = $200+
❓ FAQ
Q Can Claude Code build complete apps?
A Yes, with iteration. First generation usually achieves 80%; remaining 20% needs multiple iterations.
Q Max parallel tasks?
A No hard limit, but 5-6 recommended. More increases conflict probability and Token consumption.
Q Chrome extension special considerations?
A Manifest V3 limitations, content script CSP issues, async messaging. Specify Manifest V3 in CLAUDE.md.
Q Most important practical technique?
A Task decomposition + checkpoints. Split big tasks into small ones, verify at each checkpoint, precise rollback on errors.
📖 Summary
- Chrome extension: Claude Code can go from zero to complete functionality
- Parallel tasks: Independent sub-tasks execute concurrently, 50-70% time savings
- Decomposition: Independence, atomicity, verifiability, reversibility
- Phased execution + checkpoints ensure each step is reversible
- Cost control: precise instructions, phasing, Sonnet first
📝 Exercises
- Basic (⭐): Create a simple Chrome extension (e.g., page timer) with Claude Code.
- Intermediate (⭐⭐): Develop a Chrome extension and iteratively add 2 features using checkpoints.
- Advanced (⭐⭐⭐): Design a 4-task parallel plan, compare actual time and Token consumption vs serial.
