Chrome MCP — Instalar & Demo ao vivo

Por que usar

Principais recursos

Usa seu Chrome logado — sem fluxo OAuth, sem detecção de bot
Busca semântica entre todas as abas abertas
Extração completa do DOM + ferramentas de screenshot
Funciona em sites que bloqueiam Playwright/Puppeteer
Local — sem middleware na nuvem

Demo ao vivo

Como fica na prática

mcp-chrome.replay ▶ pronto

0/0

Instalar

Escolha seu cliente

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "mcp-chrome": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  }
}

Abra Claude Desktop → Settings → Developer → Edit Config. Reinicie após salvar.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "mcp-chrome": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  }
}

Cursor usa o mesmo esquema mcpServers que o Claude Desktop. Config de projeto vence a global.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "mcp-chrome": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  }
}

Clique no ícone MCP Servers na barra lateral do Cline, depois "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "mcp-chrome": {
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  }
}

Mesmo formato do Claude Desktop. Reinicie o Windsurf para aplicar.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "mcp-chrome",
      "command": "npx",
      "args": [
        "-y",
        "mcp-chrome-bridge"
      ]
    }
  ]
}

O Continue usa um array de objetos de servidor em vez de um map.

~/.config/zed/settings.json

{
  "context_servers": {
    "mcp-chrome": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "mcp-chrome-bridge"
        ]
      }
    }
  }
}

Adicione em context_servers. Zed recarrega automaticamente ao salvar.

claude mcp add mcp-chrome -- npx -y mcp-chrome-bridge

Uma linha só. Verifique com claude mcp list. Remova com claude mcp remove.

Casos de uso

Usos do mundo real: Chrome MCP

Pesquisar em sites que exigem login sem passar sua senha ao Claude

👤 Pesquisadores e analistas que usam conteúdo por assinatura ⏱ ~20 min beginner

Quando usar: Você está logado em um site pago ou dashboard protegido e quer que o Claude o leia.

Pré-requisitos

Extensão do Chrome instalada — Instale pela Chrome Web Store; o MCP bridge se conecta automaticamente
Site alvo já aberto e autenticado no Chrome — Faça login manualmente em uma aba normal primeiro

Fluxo

Confirmar abas

Liste minhas abas do Chrome abertas.✓ Copiado

→ Títulos e URLs de cada aba ativa
Extrair

Da aba do Bloomberg, extraia o corpo do artigo e a tabela de dados da barra lateral.✓ Copiado

→ Conteúdo estruturado extraído; sem erro de "não é possível acessar"
Síntese entre abas

Entre as 3 abas de provedores de pesquisa que tenho abertas, qual é o consenso sobre X?✓ Copiado

→ Síntese com citações por aba

Resultado: Respostas embasadas em conteúdo autenticado real, sem scraping de páginas de login.

Armadilhas

Sessão expira no meio da tarefa — A extensão exibe um prompt de atualização; reautentique naquela aba e tente novamente

Combine com: memory

Detectar regressões de UI fazendo screenshots de fluxos no seu build de dev

👤 Engenheiros de frontend ⏱ ~30 min intermediate

Quando usar: Você acabou de publicar um refactor de CSS e quer um diff visual em 10 páginas principais.

Fluxo

Abrir baseline

Abra as páginas do meu site de dev listadas em /qa/flows.json e faça screenshot de cada uma em /screenshots/before/.✓ Copiado

→ Screenshots capturados com nomes de arquivo correspondentes às URLs
Comparar

Depois que eu fizer deploy, tire novos screenshots e compare com /screenshots/before/. Resuma as mudanças visuais por página.✓ Copiado

→ Relatório de diff por página com observações concretas

Resultado: Um relatório de regressão visual em 5 minutos, usando seu ambiente de navegador real.

Armadilhas

Screenshots diferem por causa do carregamento de fontes — Adicione um sleep ou um passo wait_for_selector antes de capturar

Combine com: filesystem

Combinações

Combine com outros MCPs para 10× de alavancagem

mcp-chrome + filesystem

Salvar páginas extraídas no disco para indexação posterior

Extraia esta aba e salve em /research/ai-paper-notes.md.✓ Copiado

mcp-chrome + memory

Lembrar descobertas importantes entre sessões de navegação

Resuma o que li hoje e armazene na memória.✓ Copiado

Ferramentas

O que este MCP expõe

Ferramenta	Entradas	Quando chamar	Custo
list_tabs	none	No início de qualquer sessão para ver o que está disponível	free
read_tab	tab_id: int	Extrair conteúdo de uma aba específica	free
click	tab_id, selector: str	Interagir com elementos da página	free
screenshot	tab_id, full_page?: bool	Captura visual para diff ou revisão	free
search_tabs	query: str	Encontrar qual aba discute X	free

Custo e limites

O que custa rodar

Cota de API: Local — ilimitado
Tokens por chamada: Extrações de DOM podem ser grandes; 5k–50k tokens
Monetário: Gratuito
Dica: Use read_tab com seletor para restringir a extração em vez de puxar o DOM completo

Segurança

Permissões, segredos, alcance

Escopos mínimos: chrome.tabs chrome.scripting

Armazenamento de credenciais: Nenhum — o Chrome guarda as sessões

Saída de dados: O conteúdo das abas passa pelo cliente MCP até seu provedor LLM

Nunca conceda: access to incognito without reason

A extensão tem acesso amplo por design — instale apenas pela listagem oficial da Chrome Web Store

Solução de problemas

Erros comuns e correções

Extensão não detectada

Fixe a extensão na barra; o binário bridge precisa que a extensão esteja em polling

Verificar: chrome://extensions mostra habilitado

Conteúdo da aba em branco

A página pode usar shadow DOM — tente read_tab com include_shadow=true

Cliques não registram

O site usa anti-automação (Cloudflare etc). Tente rolar a página para acionar o lazy-load primeiro.

Alternativas

Chrome MCP vs. outros

Alternativa	Quando usar	Troca
chrome-devtools MCP	Você quer o protocolo de devtools (console, rede, perf) e não automação de usuário	O MCP DevTools não controla a UI — ele a inspeciona
playwright MCP	Você quer automação headless em CI	Sem estado de autenticação; sujeito a detecção de bot

Mais

Recursos

📖 Leia o README oficial no GitHub

🐙 Ver issues abertas

🔍 Ver todos os 400+ servidores MCP e Skills