Emanuel Almeida
6b3a6f2698
- All SKILL.md files now <500 lines (avg reduction 69%) - Detailed content extracted to references/ subdirectories - Frontmatter standardised: only name + description (Anthropic standard) - New skills: brand-guidelines, spec-coauthor, report-templates, skill-creator - Design skills: anti-slop guidelines, premium-proposals reference - Removed non-standard frontmatter fields (triggers, version, author, category) Plugins affected: infraestrutura, marketing, dev-tools, crm-ops, gestao, core-tools, negocio, perfex-dev, wordpress, design-media Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
304 lines
9.8 KiB
Markdown
304 lines
9.8 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
|
|
---
|
|
|
|
# /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
|