claude-devtools-bridge
Uma ponte que dá ao Claude Code acesso ao Chrome DevTools Protocol por meio de uma extensão. Funciona no Chrome do dia a dia, sem precisar lançá-lo com --remote-debugging-port, em qualquer projeto onde o Claude Code for usado. Com ela o agente consegue ler erros do console, tirar screenshots, navegar, preencher formulários e inspecionar requisições da aba escolhida.
A bridge that gives Claude Code access to the Chrome DevTools Protocol through an extension. It works in your everyday Chrome, without launching it with --remote-debugging-port, in any project where Claude Code is used. With it the agent can read console errors, take screenshots, navigate, fill in forms and inspect requests on the chosen tab.
ArquiteturaArchitecture
Claude Code ──stdio──► MCP server ──ws──► Bridge ──ws──► Extensão ChromeChrome extension ──CDP──► AbaTab
| PeçaPiece | O que fazWhat it does |
|---|---|
bridge/ | Servidor WebSocket local em 127.0.0.1:9223 que roteia as mensagens.Local WebSocket server on 127.0.0.1:9223 that routes messages. |
extension/ | Extensão Chrome MV3 que usa a API chrome.debugger para falar CDP com a aba.Chrome MV3 extension that uses the chrome.debugger API to speak CDP to the tab. |
mcp-server/ | Servidor MCP via stdio que expõe as ferramentas browser_* ao Claude.stdio MCP server that exposes the browser_* tools to Claude. |
Ferramentas expostasExposed tools
| FerramentaTool | O que fazWhat it does |
|---|---|
browser_eval | Executa uma expressão JS na aba (Runtime.evaluate).Runs a JS expression in the tab (Runtime.evaluate). |
browser_screenshot | Captura a aba como imagem, da viewport ou da página inteira.Captures the tab as an image, viewport or full page. |
browser_navigate | Navega para uma URL e espera o carregamento.Navigates to a URL and waits for the load. |
browser_wait_for | Espera um seletor aparecer, a URL conter um trecho ou uma requisição completar.Waits for a selector to appear, the URL to contain a string or a request to complete. |
browser_click | Clica por seletor com eventos de mouse nativos.Clicks by selector with native mouse events. |
browser_type | Foca um campo e digita com eventos de input nativos.Focuses a field and types with native input events. |
browser_console_logs | Devolve o buffer de console.* e exceções não capturadas.Returns the console.* buffer and uncaught exceptions. |
browser_network_requests | Devolve o buffer de requisições (URL, status, headers, falhas).Returns the request buffer (URL, status, headers, failures). |
browser_status | Informa se o bridge e a extensão estão conectados e qual aba está anexada.Reports whether the bridge and extension are connected and which tab is attached. |
InstalaçãoSetup
$ npm install $ claude mcp add devtools-bridge --scope user -- node "$(pwd)/mcp-server/index.js" # carregue a pasta extension/ em chrome://extensions (modo desenvolvedor)load the extension/ folder in chrome://extensions (developer mode) $ npm start
Com o bridge rodando, basta clicar no ícone da extensão na aba desejada e em Attach to this tab. As ferramentas mcp__devtools-bridge__browser_* ficam disponíveis no Claude Code.
With the bridge running, click the extension icon on the tab you want and then Attach to this tab. The mcp__devtools-bridge__browser_* tools become available in Claude Code.
SegurançaSecurity
- O bridge escuta apenas em
127.0.0.1, sem exposição na rede.The bridge listens only on127.0.0.1, with no network exposure. - Não há autenticação: assume que só processos locais se conectam. Não use em máquinas compartilhadas.There is no authentication: it assumes only local processes connect. Don't use it on shared machines.
- A extensão só age depois que o usuário clica em Attach manualmente, e o Chrome mostra a barra amarela de depuração enquanto ela está anexada.The extension only acts after the user manually clicks Attach, and Chrome shows the yellow debugging bar while it is attached.