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

name, description, allowed-tools, layer

name	description	allowed-tools	layer
chrome	Integração com Chrome para automação browser — navegar páginas, preencher formulários, debug de consola, extracção de dados, testes e screenshots.	Bash, Read, Write, Glob	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:

# 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:

claude mcp add chrome-devtools --scope user -- npx -y chrome-devtools-mcp@latest

Activacao:

# 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