158 lines
4.9 KiB
Markdown
158 lines
4.9 KiB
Markdown
---
|
|
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 |