claude-plugins/dev-tools/skills/chrome/SKILL.md

---
name: chrome
description: Chrome browser integration for Claude Code. Navigate pages, fill forms, debug console, extract data, test web apps, automate tasks. Use when user mentions "chrome", "browser", "navegar site", "abrir pagina", "testar site", "preencher formulario", "extrair dados", "screenshot site", "google docs", "authenticated site", "gravar gif", "console errors".
author: Descomplicar® Crescimento Digital
version: 2.0.0
quality_score: 80
user_invocable: true
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