---
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
layer: wiki
---

# /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 D