MCP com Chrome: Automação com IA · Capítulo 2 de 16 · 31 min
Escolher a ferramenta de navegador pelo login que ela enxerga
Escolher a ferramenta errada custa dias: ou o agente não alcança o painel logado, ou alcança bem mais do que deveria.
Este capítulo faz parte do curso gratuito MCP com Chrome: Automação com IA.
O que é: três ferramentas que repetem o mesmo slogan, o agente controla o navegador, separadas por uma variável só, o estado da sessão em que o agente trabalha. Por que importa: escolher pela popularidade, e não pelo estado da sessão, coloca logins vivos onde deveria haver navegador vazio, ou o contrário, e isso vira exposição de credencial num caso e pipeline que quebra sozinho no outro. A sua decisão: qual ferramenta é padrão para cada classe de tarefa e qual delas fica vetada em automação de pipeline. O que delegar: a instalação, o diagnóstico de plano e os testes de reprodutibilidade cabem ao time. O passo a passo para operar vem logo abaixo.
Glossário rápido
Estado da sessão
Se o agente trabalha dentro de um navegador que já tem os seus logins ou dentro de um que nasce vazio a cada execução. É a diferença entre emprestar o seu carro com as chaves de casa no porta-luvas e emprestar um carro de aluguel, limpo. Essa única variável elimina duas das três ferramentas em segundos.
Beta e disponibilidade geral (GA)
GA, de generally available, é o estágio em que um recurso já é considerado estável e tem suporte oficial para todos os elegíveis; beta é o estágio anterior, funcional mas ainda sujeito a mudança. É a diferença entre um produto na prateleira e uma amostra de pré-lançamento, e o mesmo recurso pode estar em estágios distintos conforme a superfície em que roda.
Suponha que você tem uma escola de idiomas e precisa conferir se o pixel de conversão (trecho de código que avisa o anúncio da venda, como sino de porta) dispara no painel de anúncios. Você instala um servidor MCP de navegador (programa que liga o assistente ao Chrome, como uma tomada padrão), pede ao agente (o assistente de IA que usa o navegador por você) para abrir o painel e recebe de volta a tela de login. Duas horas depois, você troca de ferramenta, consegue entrar, e agora o agente enxerga também o seu e-mail pessoal aberto na aba ao lado.
Nenhum dos dois resultados é acidente. Cada ferramenta foi construída em torno de uma decisão de arquitetura diferente, e o material de introdução costuma tratá-las como intercambiáveis porque todas cabem na mesma frase de efeito: o agente controla o navegador.
Uma variável só separa as três: o estado da sessão. O agente vai trabalhar dentro de um navegador que já tem os seus logins, ou dentro de um navegador que nasce vazio a cada execução? Responder isso primeiro elimina duas das três opções em segundos; preço, popularidade e quantidade de ferramentas expostas ficam para depois.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
Caminho 1: a extensão Claude in Chrome, dentro do seu navegador de verdade
A extensão roda no seu Chrome, com os seus cookies e as suas sessões abertas. É por isso que ela alcança um documento no Google Docs, um painel administrativo interno ou uma conta de anúncios sem nenhum conector de API (a porta oficial por onde um sistema conversa com outro), sem chave e sem refazer login. Nesse caminho, o estado real do navegador é justamente o que você compra.
Antes de qualquer instalação, confirme quem consegue reproduzir os exercícios. O status muda conforme a superfície: a integração já está geralmente disponível (GA) no Claude Code e no Claude Cowork, e segue em beta na extensão do navegador. A elegibilidade por plano continua a mesma, todos os planos pagos diretos da Anthropic (Pro, Max, Team e Enterprise), aberta desde 18 de dezembro de 2025, quando deixou de ser exclusiva do Max. Quem acessa Claude apenas por Amazon Bedrock, Google Cloud Agent Platform ou Microsoft Foundry continua sem a integração e precisa de uma conta claude.ai separada.
# A integração exige a extensão Claude in Chrome na versão 1.0.36 ou superior.
# Versão abaixo disso é a causa número um de "extensão não detectada".
# Inicia a sessão do Claude Code já com as ferramentas de navegador carregadas.
claude --chrome
# Dentro da sessão, o comando de gestão mostra status, permissões,
# permite reconectar a extensão e escolher qual navegador usar.
/chrome
# A primeira ação de navegador pede permissão para usar a skill claude-in-chrome.
# Se a extensão não aparecer, reinicie o Chrome antes de reinstalar qualquer coisa:
# o arquivo de configuração do host de mensagens nativas é lido na inicialização.Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
Dentro do Claude Code a integração aparece listada como claude-in-chrome no /mcp, e é daí que nasce o erro mais caro deste módulo: concluir que ela é um servidor MCP de navegador como o chrome-devtools-mcp ou o Playwright MCP. O transporte é um host de mensagens nativas instalado no sistema operacional (com.anthropic.claude_code_browser_extension.json), não o Chrome DevTools Protocol. Consequência prática: não existe porta 9222 para checar, o diagnóstico de falha é outro, e a integração não funciona em WSL.
macOS ~/Library/Application Support/Google/Chrome/NativeMessagingHosts/
Linux ~/.config/google-chrome/NativeMessagingHosts/
Windows HKCU\Software\Google\Chrome\NativeMessagingHosts\
arquivo: com.anthropic.claude_code_browser_extension.json
lido pelo Chrome na INICIALIZAÇÃO -> primeira ativação pede restartCaminho 2: chrome-devtools-mcp, o Chrome instrumentado pelo protocolo de depuração
Esse é o servidor MCP oficial mantido pelo time do Chrome, lançado em preview pública em setembro de 2025, estável desde a versão 1.0 de 19 de maio de 2026 e na versão 1.10.1 em 23 de setembro de 2026. O time do Chrome passou a chamá-lo de Chrome DevTools for agents, mas o pacote e o comando continuam com o nome chrome-devtools-mcp. Ele conversa com o navegador pelo Chrome DevTools Protocol, e daí vem a especialidade: requisições de rede com timing e headers, traces de performance, auditoria Lighthouse, inspeção de memória e mensagens de console.
# Instalação no escopo do usuário, disponível em qualquer projeto.
claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
# Perfil temporário, criado na hora e descartado ao fechar o navegador.
# É o modo correto para aprender e para navegar em alvo desconhecido.
npx chrome-devtools-mcp@latest --isolated
# Modo oposto: conectar a um Chrome já em execução com porta de depuração.
# Dá acesso ao estado autenticado e, junto, a tudo que estiver aberto ali.
npx chrome-devtools-mcp@latest --browserUrl http://127.0.0.1:9222
# Contenção de contexto: expõe apenas três ferramentas
# (navegação, execução de script e captura de tela) em vez do conjunto completo.
npx chrome-devtools-mcp@latest --slimA escolha entre --isolated e --browserUrl decide o que o agente pode vazar. A própria documentação do Chrome adverte que o servidor expõe o conteúdo do navegador ao agente, permitindo ler, inspecionar, depurar e modificar qualquer dado, e recomenda evitar conectar agentes a sessões autenticadas com dados sensíveis. Quando você usa --browserUrl contra o seu Chrome do dia a dia, o agente herda tudo que estiver aberto.
Caminho 3: Playwright MCP, o navegador que nasce deslogado
Aqui o agente dirige um navegador limpo. Toda execução começa de um estado conhecido, o que é exatamente o que um pipeline de integração contínua (a esteira que testa o site sozinha a cada mudança) precisa e exatamente o que atrapalha quando o alvo é um painel logado. O modo padrão entrega ao modelo a árvore de acessibilidade em texto, com papel, rótulo e estado, em vez de pixels.
Cada elemento interativo recebe um identificador opaco no formato letra e seguida de número, por exemplo e5 ou e15. Esses identificadores valem apenas dentro do snapshot (a foto em texto da página naquele instante) em que nasceram: depois de navegar, submeter um formulário ou disparar um render, é preciso tirar um snapshot novo antes de clicar. Guardar um identificador entre passos é a falha mais comum de quem começa.
A documentação do Playwright MCP estima a diferença por observação em 200 a 400 tokens para o snapshot de acessibilidade contra 3.000 a 5.000 tokens para uma captura de tela, com alvo exato de elemento no primeiro caso e aproximação por coordenada no segundo. As ferramentas de coordenada ficam atrás de uma capacidade opcional de visão, ligada por flag. Ligar visão por reflexo custa mais e erra mais, porque coordenada depende de layout.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
| Critério | Extensão Claude in Chrome | chrome-devtools-mcp | Playwright MCP |
|---|---|---|---|
| Estado da sessão | seu Chrome real, já logado | conforme a flag: descartável ou o perfil real | navegador limpo, deslogado |
| Transporte | host de mensagens nativas | Chrome DevTools Protocol | servidor MCP dirigindo o navegador |
| Alcança painel autenticado | sim, sem conector | sim, com --browserUrl ou perfil dedicado | só refazendo o login no fluxo |
| Reprodutibilidade | baixa por natureza | média, alta com --isolated | alta, é o objetivo do desenho |
| Especialidade | tarefa exploratória em app logado | rede, performance, Lighthouse, memória | fluxo determinístico e teste em CI |
| Superfície de risco | tudo que estiver aberto no seu Chrome | o perfil inteiro quando conectado ao real | conteúdo da página entrando no contexto |
A extensão é a escolha errada para integração contínua, mesmo tendo todos os recursos. Ela depende de sessão logada e de estado real do navegador, que é o oposto de reprodutibilidade. Um pipeline que passa hoje porque o cookie estava vivo vai reprovar amanhã por logout, e você vai perder a tarde procurando um bug que não existe no código.
cenário 1 painel de anúncios logado
escolha: extensão Claude in Chrome
variável decisiva: estado de sessão (o painel exige login vivo)
cenário 2 performance de landing pública
escolha: chrome-devtools-mcp com --isolated
variável decisiva: não precisa de sessão e o trace exige CDP
cenário 3 formulário de captura em pipeline
escolha: Playwright MCP
variável decisiva: reprodutibilidade (roda a cada commit)
cenário 4 relatório interno
escolha: ______________________
variável decisiva: ______________________
cenário 5 layout de concorrente
escolha: ______________________
variável decisiva: ______________________# 1. Abra as configurações da sua conta e confira o plano em vigor.
# A extensão exige plano pago direto da Anthropic: Pro, Max, Team ou Enterprise.
# Bedrock, Google Cloud Agent Platform e Microsoft Foundry NÃO dão acesso.
# 2. Dentro do Claude Code, veja o que a integração de navegador reporta.
/chrome
# 3. Liste os servidores MCP conectados na sessão.
# A entrada claude-in-chrome aparece aqui, mas lembre: ela não é um MCP de navegador.
/mcpDeixar o Chrome habilitado por padrão no CLI aumenta o consumo de contexto, porque as ferramentas de navegador ficam sempre carregadas. Quando o contexto estiver apertado, prefira a flag --chrome sob demanda. Do lado do servidor do Chrome, o equivalente é a flag --slim, que reduz a superfície exposta a três ferramentas.
Duas confusões que já custaram dias a muita gente. A primeira: tratar o service worker da extensão como algo permanente. Ele entra em idle em sessões longas e derruba a conexão em silêncio, e a saída é rodar /chrome e escolher a opção de reconectar; reinstalar só apaga o que já estava configurado. A segunda: um diálogo modal de JavaScript na página (alert, confirm, prompt) bloqueia os eventos do navegador e trava o agente. O sintoma parece falha do agente, mas a causa está na página.
Guia prático: instalar os dois servidores MCP e provar que subiram
A árvore de decisão só vale alguma coisa se as duas ferramentas estiverem prontas para teste lado a lado. O roteiro abaixo usa o Claude Code, mas o mesmo bloco de configuração em JSON serve para Claude Desktop, Cursor, VS Code e Codex. Em outubro de 2026 o servidor do Chrome estava na versão 1.10.1 (23 de setembro) e o Playwright MCP na 0.0.83 (28 de setembro).
Dois servidores instalados, testados e com a telemetria decidida
Seis passos, uns dez minutos. Faça numa máquina de trabalho com Node na versão LTS e o Chrome estável atualizado.
Passo 1: Adicione o servidor do Chrome no escopo do usuário: claude mcp add chrome-devtools --scope user npx chrome-devtools-mcp@latest
O escopo user vale para qualquer projeto. Para ganhar também as skills oficiais, a alternativa é o plugin: /plugin marketplace add ChromeDevTools/chrome-devtools-mcp e depois /plugin install chrome-devtools-mcp@chrome-devtools-plugins.
Deu certo quando: claude mcp list mostra chrome-devtools como conectado.
Erro comum: Instalar pelos dois caminhos ao mesmo tempo. A documentação pede para remover a instalação por CLI antes de instalar o plugin.
Passo 2: Adicione o Playwright MCP: claude mcp add playwright npx @playwright/mcp@latest
Ele abre um navegador próprio, deslogado, e entrega a página como árvore de acessibilidade. É o candidato natural para o formulário de captura que precisa rodar igual toda semana.
Deu certo quando: claude mcp list mostra os dois servidores, cada um com o próprio nome.
Erro comum: Dar o mesmo nome aos dois servidores; o segundo substitui o primeiro sem aviso.
Passo 3: Em clientes configurados por arquivo, cole o bloco mcpServers da documentação oficial
Claude Desktop, Cursor e outros leem um JSON com command e args. O bloco de referência do Chrome é o da figura abaixo; para o Playwright, troque o pacote por @playwright/mcp@latest.
Deu certo quando: O cliente lista as ferramentas depois de reiniciado.
Erro comum: Vírgula sobrando no JSON. O cliente ignora o arquivo inteiro e não diz qual linha quebrou.
Passo 4: Rode o primeiro pedido de teste: "Check the performance of https://developers.chrome.com"
É o teste sugerido pelo próprio time do Chrome. O navegador só abre quando uma ferramenta precisa dele; conectar o servidor sozinho não abre janela nenhuma.
Deu certo quando: Uma janela do Chrome abre, a página carrega e o agente devolve um trace de performance com insights.
Erro comum: Concluir que a instalação falhou porque nenhuma janela apareceu logo depois do claude mcp add.
Passo 5: Decida a telemetria: acrescente --no-usage-statistics se a política da empresa pedir
O servidor do Chrome envia estatísticas de uso ao Google por padrão, independentes das métricas do navegador. A coleta desliga sozinha quando a variável CI ou CHROME_DEVTOOLS_MCP_NO_USAGE_STATISTICS existe.
Deu certo quando: O argumento aparece no args do bloco de configuração e a decisão fica registrada no runbook.
Erro comum: Supor que desligar as métricas do Chrome desliga também as do servidor MCP. São interruptores separados.
Passo 6: Em repositório de terceiros, desligue a busca automática de arquivo de configuração
Desde a versão 1.10.0 o servidor procura sozinho um cd4a.config.json no diretório atual e aplica o que estiver lá. Se você abre projetos que não escreveu, defina CHROME_DEVTOOLS_MCP_NO_CONFIG_DISCOVERY e passe a configuração só por --config.
Deu certo quando: Um cd4a.config.json plantado na pasta do projeto deixa de mudar as flags do servidor.
Erro comum: Clonar um repositório que traz um arquivo de configuração com --allow-unrestricted-paths e rodar o agente dentro dele.
No fim você tem: Dois servidores registrados, um teste de performance concluído e duas decisões escritas: telemetria e busca de configuração.
Se a figura ultrapassar a área visível, deslize para os lados. Pelo teclado, foque a figura e use as setas.
E os navegadores que já vêm com agente embutido
O aluno de marketing costuma perguntar por que não usar direto um navegador com IA. A resposta curta: eles servem para tarefa pessoal no seu próprio navegador e não substituem um servidor MCP quando a auditoria precisa ser repetida e defendida. O quadro de outubro de 2026 ficou assim:
| Produto | Situação em 01/10/2026 | O que importa para quem audita campanha |
|---|---|---|
| ChatGPT Atlas | descontinuado; parou de funcionar em 9 de agosto de 2026 | o trabalho de navegador foi para o app desktop do ChatGPT e para a extensão do ChatGPT no Chrome |
| Gemini in Chrome, auto browse | assinantes Google AI Pro e Ultra nos EUA; no Android, liberado a todos os usuários dos EUA em 18 de agosto de 2026 | pede confirmação antes de algumas tarefas sensíveis |
| Perplexity Comet | defesa em camadas descrita em 29 de setembro de 2026 | conteúdo da página marcado como não confiável e confirmação antes de enviar e-mail ou fazer pedido |
| Claude in Chrome | painel lateral em beta; integração disponível no Claude Code e no Cowork | modos de permissão e lista de sites por organização, vistos em "Onde termina a leitura e começa a consequência" |
O fim do Atlas é a lição prática do quadro: um produto inteiro saiu de circulação com cerca de 30 dias de aviso, entre o anúncio de 9 de julho e o desligamento de 9 de agosto de 2026. Rotina de auditoria que depende de um único navegador com IA precisa de plano B escrito, e os cookies exportados de um navegador que está sendo desligado são credenciais: não circulam por e-mail nem por pasta compartilhada.
Aplique agora a árvore de decisão aos cinco cenários e escreva uma linha de justificativa por cenário, citando explicitamente a variável decisiva. Os cenários são: conferir um painel de anúncios logado; auditar a performance de uma landing pública; validar um formulário de captura dentro de um pipeline automatizado; extrair dados de um relatório interno; monitorar mudança de layout de um concorrente.
Depois, confirme qual plano você tem hoje e anote quais dos cinco você consegue de fato executar nesta máquina. Você acertou se as cinco linhas citam estado de sessão ou reprodutibilidade e nenhuma cita popularidade.
Nos cinco cenários, a ferramenta escolhida bate com a árvore de decisão e cada justificativa cita a variável decisiva, estado de sessão ou reprodutibilidade. Justificativa do tipo "é a mais popular" ou "é a que eu já conheço" reprova. Você também consegue explicar, sem consultar o texto, por que a extensão aparece no /mcp e mesmo assim não se diagnostica como um servidor MCP de navegador, e sabe dizer se o seu plano atual permite reproduzir os exercícios da extensão.
Cabe a você fixar qual ferramenta é padrão para cada classe de tarefa e vetar a extensão em qualquer coisa que precise rodar sozinha em pipeline, onde a sessão logada vira fonte de falha. Decida também se o custo de manter o Chrome sempre carregado no CLI compensa, e cobre que toda escolha seja aprovada pelo estado da sessão, nunca pela popularidade da ferramenta.
Seu caderno neste capítulo
Abrir o caderno completoSelecione um trecho do capítulo para destacar ou anotar. Nos vídeos e áudios, use Anotar este momento. No teclado, selecione com Shift e as setas e use Alt+Shift+D para destacar ou Alt+Shift+N para anotar.
Salvo neste navegador. Entre na sua conta para levar o caderno a outros aparelhos.
Entre na sua conta para compartilhar o que aprendeu e convidar alguém para estudar com você.
Conexões deste capítulo
Veja o que estudar antes e para onde seguir depois, explore os conceitos e compare abordagens em outros cursos. Sugestões marcadas como “sugerido pelo grafo” vêm dos assuntos em comum, não do índice do curso.
Estude antes
- Usar o mapa do curso e o glossário mínimosugerido pelo grafoApresenta o conceito “MCP”, usado em “Escolher a ferramenta de navegador pelo login que ela enxerga”.
- Veja o que o Claude Code faz antes de instalarsugerido pelo grafoApresenta o conceito “Claude Code”, usado em “Escolher a ferramenta de navegador pelo login que ela enxerga”.
- CursoMCP para quem decidesugerido pelo grafo7 capítulos de “MCP com Chrome: Automação com IA” usam conceitos apresentados em “MCP para quem decide”.
- CursoNode.js: JavaScript no Servidorsugerido pelo grafo3 capítulos de “MCP com Chrome: Automação com IA” usam conceitos apresentados em “Node.js: JavaScript no Servidor”.
Conceitos deste capítulo
O mesmo assunto em outros cursos
- Setup Completo: do zero ao Claude CodeDeixe o Claude operar o seu Chrome (avançado, opcional)Examinar conexões de Deixe o Claude operar o seu Chrome (avançado, opcional)
- Setup de Vibecoding no MacDar ao Claude controle do Google ChromeExaminar conexões de Dar ao Claude controle do Google Chrome
- MCP para quem decideControlar a tela de terceiro dentro da conversaExaminar conexões de Controlar a tela de terceiro dentro da conversa
- Claude Code CLI: Programação com IARevisar o plano antes de agir e ligar suas ferramentasExaminar conexões de Revisar o plano antes de agir e ligar suas ferramentas
Leve uma ideia para a prática
Escolha uma atividade no painel e volte a este curso quando quiser.
Atividades e evolução ficam reunidas no painel da sua conta.