---
name: chrome
description: Integração com Chrome para automação browser — navegar páginas, preencher formulários, debug de consola, extracção de dados, testes e screenshots.
allowed-tools: Bash, Read, Write, Glob
---

# /chrome - Chrome Browser Integration

Integra Claude Code com o Chrome para automacao browser, testes, debug, performance e extraccao de dados. Suporta dois backends: **Claude in Chrome** (extensao) e **Chrome DevTools MCP** (npm).

## Backends Disponiveis

### Backend A: Claude in Chrome (Extensao)

Extensao oficial Anthropic. Requer instalacao manual no browser.

| Requisito | Minimo | Verificar |
|-----------|--------|-----------|
| Google Chrome | Instalado | `google-chrome --version` |
| Extensao Claude in Chrome | v1.0.36+ | `chrome://extensions` |
| Claude Code | v2.0.73+ | `claude --version` |
| Plano Claude | Pro/Max/Team/Enterprise | - |
| Native Host | Configurado | `~/.config/google-chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json` |

**Limitacoes:** Apenas Google Chrome (nao Brave/Arc). Nao suportado em WSL.

**Activacao:**
```bash
# Por sessao
claude --chrome

# Por defeito (alias .bashrc)
alias cc="claude --permission-mode bypassPermissions --chrome"

# Dentro de sessao activa
/chrome -> "Enabled by default"

# Ver ferramentas
/mcp -> seleccionar claude-in-chrome
```

### Backend B: Chrome DevTools MCP (npm)

Pacote oficial Google (`chrome-devtools-mcp`). Controla Chrome via DevTools Protocol. Nao requer extensao.

| Requisito | Minimo | Verificar |
|-----------|--------|-----------|
| Google Chrome | Instalado | `google-chrome --version` |
| Node.js | v18+ | `node --version` |
| chrome-devtools-mcp | latest | `claude mcp list` |

**Instalacao:**
```bash
claude mcp add chrome-devtools --scope user -- npx -y chrome-devtools-mcp@latest
```

**Activacao:**
```bash
# Lancar Chrome com remote debugging
google-chrome --remote-debugging-port=9222

# Reiniciar sessao Claude Code para carregar ferramentas
```

**Ferramentas disponibilizadas:**
- `page_navigate`, `page_go_back`, `page_go_forward` - Navegacao
- `page_screenshot` - Captura de ecra
- `page_click`, `page_type`, `page_select_option` - Interaccao
- `page_execute_javascript` - Executar JS no contexto da pagina
- `page_wait_for_selector` - Esperar por elementos
- `console_get_logs` - Ler consola (logs, errors, warnings)
- `network_get_requests`, `network_get_response_body` - Inspeccionar rede
- `dom_get_element`, `dom_query_selector` - Inspeccionar DOM
- `css_get_computed_styles`, `css_get_matched_styles` - Inspeccionar CSS
- `performance_start_trace`, `performance_stop_trace` - Gravar traces
- `performance_analyze_insight` - Metricas automaticas (LCP, TBT, CLS)
- `accessibility_get_tree` - Arvore de acessibilidade
- `storage_get_cookies`, `storage_get_local_storage` - Inspecionar storage

## Capacidades

### 1. Navegacao e Interaccao
- Abrir URLs em novas tabs
- Clicar botoes, links, elementos
- Preencher formularios (input, select, textarea)
- Submeter forms
- Scroll e hover

### 2. Debug e Diagnostico
- Ler console logs, errors, warnings
- Inspeccionar DOM state e CSS computado
- Verificar network requests e response bodies
- Ler JavaScript errors em tempo real
- Inspeccionar cookies, localStorage, sessionStorage

### 3. Performance (DevTools MCP)
- Gravar performance traces completos
- Metricas automaticas: LCP, TBT, CLS, FCP, TTFB
- Identificar JavaScript nao utilizado
- Analise de recursos (tamanho, tempo de carga)
- Equivalente a Lighthouse audit on-demand

### 4. Acessibilidade (DevTools MCP)
- Arvore de acessibilidade completa
- Verificar roles ARIA, labels, estados
- Identificar elementos sem texto alternativo

### 5. Extraccao de Dados
- Extrair texto estruturado de paginas
- Scraping de tabelas, listas, precos
- Guardar dados como CSV/JSON local
- Ler conteudo de paginas autenticadas (Chrome extensao)
- Query DOM com selectores CSS/XPath

### 6. Testes Web
- Testar forms com dados invalidos
- Verificar UI contra mocks
- Validar user flows completos
- Testar responsividade
- Monitorizar network requests durante testes

### 7. Sites Autenticados (Chrome extensao)
- Google Docs, Gmail, Sheets
- Notion, Slack web
- CRMs, dashboards
- Qualquer site com sessao activa no Chrome

### 8. Automacao
- Data entry repetitivo
- Multi-site workflows
- Gravar demos como GIF (Chrome extensao)
- Preencher CRMs a partir de CSV

## Workflows Comuns

### Testar aplicacao local
```
Abre localhost:3000, tenta submeter o formulario com dados invalidos
e verifica se as mensagens de erro aparecem correctamente.
```

### Debug com console
```
Abre a pagina do dashboard e verifica o console por erros
quando a pagina carrega.
```

### Preencher formularios em massa
```
Tenho um ficheiro contacts.csv. Para cada linha, vai ao CRM em
crm.example.com, clica "Adicionar Contacto" e preenche nome, email e telefone.
```

### Escrever em Google Docs
```
Escreve um resumo do projecto baseado nos commits recentes
no Google Doc docs.google.com/document/d/abc123
```

### Extrair dados de paginas
```
Vai a pagina de produtos e extrai nome, preco e disponibilidade
de cada item. Guarda como CSV.
```

### Workflow multi-site
```
Verifica o meu calendario para reunioes amanha, depois para cada
reuniao com participante externo, pesquisa o site da empresa.
```

### Gravar demo GIF (Chrome extensao)
```
Grava um GIF mostrando o fluxo de checkout, desde adicionar item
ao carrinho ate a pagina de confirmacao.
```

### Performance audit (DevTools MCP)
```
Abre a pagina example.com, grava um performance trace durante 5 segundos
e analisa LCP, TBT e CLS. Sugere melhorias.
```

### Debug network (DevTools MCP)
```
Abre a pagina do dashboard, monitoriza os requests de API
e identifica quais estao a falhar ou demorar mais de 2 segundos.
```

### Inspeccionar acessibilidade (DevTools MCP)
```
Abre a pagina de contacto e verifica a arvore de acessibilidade.
Identifica elementos sem labels ou roles ARIA incorrectos.
```

### Debug CSS (DevTools MCP)
```
Abre a landing page e inspecciona os estilos computados do hero section.
Verifica se o layout esta correcto em diferentes larguras.
```

## Comparacao de Backends

| Feature | Chrome Extensao | DevTools MCP | Puppeteer MCP | WebFetch |
|---------|----------------|--------------|---------------|----------|
| Sessoes autenticadas | Sim | Sim (se Chrome aberto) | Nao | Nao |
| Janela visivel | Sim | Sim | Opcional | N/A |
| Sites privados | Sim (se logado) | Sim (se logado) | Nao | Nao |
| Headless | Nao | Opcional | Sim | Sim |
| Interaccao UI | Completa | Completa | Completa | Nao |
| Screenshots | Sim | Sim | Sim | Nao |
| Gravar GIF | Sim | Nao | Nao | Nao |
| Console logs | Sim | Sim (filtrados) | Sim | Nao |
| Network requests | Nao | Sim (detalhado) | Limitado | Nao |
| Performance traces | Nao | Sim (LCP/TBT/CLS) | Nao | Nao |
| Acessibilidade | Nao | Sim (a11y tree) | Nao | Nao |
| DOM/CSS inspection | Basico | Completo | Basico | Nao |
| Storage inspection | Nao | Sim (cookies/LS) | Nao | Nao |
| Requer extensao | Sim | Nao | Nao | Nao |
| Requer Chrome aberto | Sim | Sim (porta 9222) | Nao | Nao |
| Context usage | Alto | Medio | Medio | Baixo |

**Regra de decisao:**
- Precisa de login/sessao + GIF? -> **Chrome Extensao**
- Debug/performance/network? -> **DevTools MCP**
- Automacao headless CI/CD? -> **Puppeteer MCP**
- Apenas ler conteudo publico? -> **WebFetch**

## Troubleshooting

### DevTools MCP nao conecta
1. Verificar Chrome lancado com `--remote-debugging-port=9222`
2. Testar: `curl http://localhost:9222/json/version`
3. Verificar MCP registado: `claude mcp list`
4. Reiniciar sessao Claude Code

### DevTools MCP sem ferramentas
1. Verificar: `claude mcp list | grep chrome-devtools`
2. Se nao aparece: `claude mcp add chrome-devtools --scope user -- npx -y chrome-devtools-mcp@latest`
3. Reiniciar sessao Claude Code

### Extensao nao detectada (Chrome extensao)
1. Verificar extensao em `chrome://extensions`
2. Verificar versao Claude Code: `claude --version` (>= 2.0.73)
3. Confirmar Chrome aberto
4. `/chrome` -> "Reconnect extension"
5. Reiniciar Chrome E Claude Code

### Browser nao responde
1. Verificar se modal dialog esta a bloquear (alert/confirm/prompt)
2. Dispensar dialog manualmente, depois continuar
3. Pedir nova tab
4. Desactivar/reactivar extensao em `chrome://extensions`

### Conexao cai em sessoes longas
- Service worker do Chrome pode ficar idle
- Solucao: `/chrome` -> "Reconnect extension"

### Erros comuns

| Erro | Causa | Solucao |
|------|-------|---------|
| "Browser extension is not connected" | Native host nao alcanca extensao | Reiniciar Chrome + Claude, `/chrome` reconnect |
| "Extension not detected" | Extensao nao instalada/desactivada | Instalar/activar em `chrome://extensions` |
| "No tab available" | Accao antes de tab pronta | Pedir nova tab e retry |
| "Receiving end does not exist" | Service worker idle | `/chrome` -> "Reconnect extension" |

### Verificar instalacao
```bash
# Chrome instalado?
google-chrome --version

# Claude Code compativel?
claude --version

# --- DevTools MCP ---
# MCP registado?
claude mcp list | grep chrome-devtools

# Chrome com debugging activo?
curl -s http://localhost:9222/json/version | head -5

# --- Chrome Extensao ---
# Native host configurado?
cat ~/.config/google-chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json

# Host script existe?
ls -la ~/.claude/chrome/chrome-native-host
```

## Permissoes de Sites

Permissoes por site sao geridas na **extensao Chrome** (nao no Claude Code):
- Abrir extensao Claude in Chrome -> Settings
- Configurar quais sites podem ser acedidos
- Bloqueios aplicam-se a todas as sessoes

## Nota de Performance

Activar Chrome por defeito **aumenta consumo de context window** porque as ferramentas browser ficam sempre carregadas. Se notar degradacao:
1. Desactivar default: `/chrome` -> desactivar
2. Usar `claude --chrome` apenas quando necessario
3. Preferir WebFetch para leituras simples de paginas publicas