--- 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: 1.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 e extraccao de dados. ## Pre-Requisitos | 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 ### Por sessao ```bash claude --chrome ``` ### Por defeito (aliases .bashrc) ```bash alias cc="claude --permission-mode bypassPermissions --chrome" ``` ### Dentro de sessao activa ``` /chrome # Seleccionar "Enabled by default" ``` ### Ver ferramentas disponiveis ``` /mcp -> seleccionar claude-in-chrome ``` ## 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 - Verificar network requests - Ler JavaScript errors em tempo real ### 3. Extraccao de Dados - Extrair texto estruturado de paginas - Scraping de tabelas, listas, precos - Guardar dados como CSV/JSON local - Ler conteudo de paginas autenticadas ### 4. Testes Web - Testar forms com dados invalidos - Verificar UI contra mocks - Validar user flows completos - Testar responsividade ### 5. Sites Autenticados - Google Docs, Gmail, Sheets - Notion, Slack web - CRMs, dashboards - Qualquer site com sessao activa no Chrome ### 6. Automacao - Data entry repetitivo - Multi-site workflows - Gravar demos como GIF - 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 ``` Grava um GIF mostrando o fluxo de checkout, desde adicionar item ao carrinho ate a pagina de confirmacao. ``` ## Chrome vs Puppeteer vs WebFetch | Feature | Chrome (`--chrome`) | Puppeteer MCP | WebFetch | |---------|-------------------|---------------|----------| | Sessoes autenticadas | Sim | Nao | Nao | | Janela visivel | Sim | Opcional | N/A | | Sites privados | Sim (se logado) | Nao | Nao | | Headless | Nao | Sim | Sim | | Interaccao UI | Completa | Completa | Nao | | Screenshots | Sim | Sim | Nao | | Gravar GIF | Sim | Nao | Nao | | Console logs | Sim | Sim | Nao | | Sem Chrome | N/A | Funciona | Funciona | | Context usage | Alto (tools loaded) | Medio | Baixo | **Regra de decisao:** - Precisa de login/sessao? -> **Chrome** - Automacao headless? -> **Puppeteer MCP** - Apenas ler conteudo publico? -> **WebFetch** ## Troubleshooting ### Extensao nao detectada 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 # Native host configurado? cat ~/.config/google-chrome/NativeMessagingHosts/com.anthropic.claude_code_browser_extension.json # Claude Code compativel? claude --version # 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