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

name, description, allowed-tools

name	description	allowed-tools
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

/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 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

# 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