Claude Code: Prática: Extensão Chrome e Tarefas Paralelas
Última atualização: 2026-08-31
Hora do combate real. Este capítulo demonstra as capacidades do Claude Code através de dois cenários práticos — desenvolvimento de extensão Chrome e gerenciamento paralelo de tarefas.
💡 Dica: O valor do Claude Code na prática não é saída de um único tiro, mas o ciclo fechado completo "entender requisitos → decompor tarefas → executar → verificar → iterar".
📋 Pré-requisitos: Capítulo 20 - Checkpoints e Rollback
1. O Que Você Vai Aprender
- Fluxo completo de desenvolvimento de extensão Chrome
- Aplicação prática de tarefas paralelas
- Estratégias de decomposição de tarefas grandes
- Práticas de desenvolvimento iterativo
- Controle de custos na prática
2. Prática 1: Desenvolvimento de Extensão Chrome
(1) Visão Geral do Projeto
Alice precisa de uma extensão Chrome — "Ferramenta de Anotação e Destaque de Páginas Web":
- Destacar texto selecionado em qualquer página web
- Suportar múltiplas etiquetas de cor
- Armazenamento persistente de anotações
- Exportar anotações como Markdown
(2) Deixar o Claude Code Cuidar do Desenvolvimento
TEXT
📖 Somente leitura
> 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.
▶ Exemplo 1: Melhoria Iterativa
TEXT
📖 Somente leitura
# Rodada 1: Funcionalidades base completas, começar iterações
> 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) Estrutura do Projeto
TEXT
📖 Somente leitura
chrome-highlighter/
├── manifest.json
├── src/
│ ├── background.ts
│ ├── content.ts
│ ├── popup/
│ ├── storage.ts
│ ├── export.ts
│ └── pdf-viewer.ts
├── dist/
├── package.json
└── tsconfig.json
3. Prática 2: Gerenciamento Paralelo de Tarefas
(1) Cenário
Bob precisa lidar com 4 tarefas independentes simultaneamente:
- Adicionar upload de avatar de usuário
- Implementar API de exportação de dados
- Refatorar sistema de logging
- Adicionar testes faltantes
(2) Serial vs Paralelo
TEXT
📖 Somente leitura
# Serial: 8 + 6 + 10 + 5 = 29 min total
# Paralelo: max(8, 6, 10, 5) = 10 min total
# 65% de economia de tempo
▶ Exemplo 2: Cuidados com Tarefas Paralelas
TEXT
📖 Somente leitura
# Problema: Modificações paralelas no mesmo arquivo causam conflitos
# Solução: Cada tarefa modifica arquivos diferentes
> 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. Estratégia de Decomposição de Tarefas Grandes
(1) Princípios de Decomposição
| Princípio | Descrição |
|---|---|
| Independência | Sem dependências de arquivo entre sub-tarefas |
| Atomicidade | Cada sub-tarefa tem critérios de conclusão claros |
| Verificabilidade | Cada sub-tarefa pode ser testada independentemente |
| Reversibilidade | Cada sub-tarefa pode ser revertida individualmente |
(2) Passos de Decomposição
TEXT
📖 Somente leitura
Tarefa original: "Migrate project from REST to GraphQL"
Decomposição:
1. Define GraphQL Schema (independente)
2. Create User Resolver (independente, após Schema)
3. Create Order Resolver (independente, após Schema)
4. Create Payment Resolver (independente, após Schema)
5. Add DataLoader for N+1 optimization (independente)
6. Migrate route layer (após todos Resolvers)
7. Delete old REST routes (último passo)
▶ Exemplo 3: Execução em Fases
TEXT
📖 Somente leitura
# Fase 1: Schema → /checkpoint "schema-complete"
# Fase 2: Resolvers paralelos → /checkpoint "resolvers-complete"
# Fase 3: Migração de rotas → /checkpoint "migration-complete"
# Verificação: All 134 tests passed ✅
5. Controle de Custos na Prática
TEXT
📖 Somente leitura
Phase 1 (Schema): $0.45
Phase 2 (Resolvers): $2.30 (4 sub-agentes)
Phase 3 (Migration): $1.80
Total: $4.55
vs. Desenvolvimento manual: ~4 horas × $50/h = $200+
❓ Perguntas Frequentes
P: O Claude Code pode construir apps completos? R: Sim, com iteração. Primeira geração geralmente alcança 80%; os 20% restantes precisam de múltiplas iterações.
P: Máximo de tarefas paralelas? R: Sem limite rígido, mas 5-6 recomendado. Mais aumenta probabilidade de conflitos e consumo de Tokens.
P: Considerações especiais para extensão Chrome? R: Limitações do Manifest V3, problemas de CSP em content scripts, mensageria async. Especifique Manifest V3 no CLAUDE.md.
P: Técnica prática mais importante? R: Decomposição de tarefas + checkpoints. Divida tarefas grandes em pequenas, verifique em cada checkpoint, rollback preciso em erros.
📖 Resumo
- Extensão Chrome: Claude Code pode ir do zero à funcionalidade completa
- Tarefas paralelas: Sub-tarefas independentes executam concorrentemente, 50-70% de economia de tempo
- Decomposição: Independência, atomicidade, verificabilidade, reversibilidade
- Execução em fases + checkpoints garantem que cada passo é reversível
- Controle de custos: instruções precisas, fases, Sonnet primeiro
📝 Exercícios
- Básico (⭐): Crie uma extensão Chrome simples (ex: cronômetro de página) com o Claude Code.
- Intermediário (⭐⭐): Desenvolva uma extensão Chrome e iterativamente adicione 2 funcionalidades usando checkpoints.
- Avançado (⭐⭐⭐): Desenhe um plano de 4 tarefas paralelas, compare tempo real e consumo de Tokens vs serial.
