Chrome Debug MCP Server

Controle o Chrome com capacidades de depuração, injeção de userscript e suporte a extensões.

Documentação

Chrome Debug MCP Playwright

Uma implementação do Model Context Protocol (MCP) para automação de navegador usando Playwright, com suporte completo à API Greasemonkey.

Recursos

Recursos Principais do Navegador

Inicialização e gerenciamento do navegador
Suporte a múltiplas abas com recursos de criar/alternar/fechar
Navegação e interação com páginas
Captura de screenshots

Suporte à API Greasemonkey

GM_addStyle para injeção de CSS
GM_getValue/GM_setValue para armazenamento de dados
GM_deleteValue para limpeza de armazenamento
GM_notification para notificações de desktop
GM_setClipboard para operações de área de transferência
GM_xmlhttpRequest para requisições entre origens

Gerenciamento de Recursos

Interceptação de requisições de rede
Bloqueio, modificação e registro de requisições
Filtragem por tipo de recurso

Recursos de Depuração

Sistema de registro detalhado
Organização de arquivos de log
Saída limpa na interface

Instalação

npm install chrome-debug-mcp-playwright

Início Rápido

// Launch browser
tool browser launch_browser --url "https://example.com" --browserType "chromium"

// Use GM functions
tool browser gm_setValue --key "setting" --value "test"
tool browser gm_getValue --key "setting"

// Intercept requests
tool browser intercept_requests --patterns ["*.jpg", "*.css"] --action "block"

Documentação

Comandos - Documentação detalhada de comandos com exemplos
Lista completa de comandos com exemplos de uso disponível em COMMANDS.md

Recursos Principais

Gerenciamento do Navegador

// Launch browser
tool browser launch_browser --url "https://example.com"

// Create new tab
tool browser create_tab --url "https://example.com"

// Switch between tabs
tool browser switch_tab --index 1

API Greasemonkey

// Add custom styles
tool browser gm_addStyle --css "body { background: #f0f0f0; }"

// Store data
tool browser gm_setValue --key "setting" --value "test"

// Make cross-origin requests
tool browser gm_xmlhttpRequest --url "https://api.example.com/data" --method "GET"

Interceptação de Recursos

// Block image loading
tool browser intercept_requests --patterns ["*.jpg", "*.png"] --action "block"

// Log all CSS requests
tool browser intercept_requests --patterns ["*.css"] --action "log"

Detalhes de Implementação

Sistema de Registro

Toda a saída de depuração redirecionada para arquivos de log
Entradas com carimbo de data/hora
Organizadas no diretório de logs
Saída limpa na interface

Tratamento de Erros

Registro detalhado de erros
Limpeza adequada em caso de erros
Gerenciamento de recursos

Dependências

Playwright: Automação de navegador
@modelcontextprotocol/sdk: Implementação do MCP

Desenvolvimento

Pré-requisitos

Node.js 16 ou superior
npm 7 ou superior

Configuração

git clone https://github.com/yourusername/chrome-debug-mcp-playwright.git
cd chrome-debug-mcp-playwright
npm install

Licença

Licença MIT - Consulte o arquivo LICENSE para detalhes.

Contribuição

Aceitamos contribuições! Consulte nosso Guia de Contribuição para detalhes.

Agradecimentos

Baseado no chrome-debug-mcp original de Robert Headley.

=======

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

Chrome Debug MCP Server

Um servidor do Model Context Protocol (MCP) para controlar o Chrome com recursos de depuração, injeção de userscripts e suporte a extensões.

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

=======

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

Recursos

Controle do Chrome

Iniciar o Chrome com configurações personalizadas
Suporte a caminhos personalizados do executável do Chrome
Gerenciamento de perfil de usuário (diretório de dados padrão ou personalizado)
Suporte e gerenciamento de extensões
Desativar o banner "Controle de Automação" do Chrome

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

=======

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

Automação de Páginas

Clicar, digitar e interagir com elementos da página
Lidar com menus suspensos e campos de formulário
Passar o mouse e aguardar elementos
Tirar screenshots da página inteira ou de elementos
Navegar entre páginas
Definir tamanho da viewport e emulação de dispositivos
Extrair texto e atributos de elementos

Gerenciamento de Abas

Listar todas as abas abertas com seus IDs e URLs
Abrir novas abas com URLs especificadas
Fechar abas por ID
Alternar entre abas
Rastrear e gerenciar múltiplos estados de abas

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

Recursos de Depuração

Depuração remota via Chrome DevTools Protocol (CDP)
Captura e monitoramento de logs do console
Avaliação de JavaScript no contexto da página
Transmissão de saída do console em tempo real

Suporte a Userscripts

Injetar userscripts em páginas da web
Suporte à API estilo Greasemonkey:
- GM_setValue/GM_getValue para armazenamento persistente
- GM_addStyle para injeção de CSS
- GM_xmlhttpRequest para requisições entre origens
- GM_openInTab para criação de novas abas
- GM_registerMenuCommand para comandos de menu

Integração de Extensões

Carregar extensões não empacotadas
Manter estados e configurações de extensões
Suporte a extensões do perfil padrão do Chrome
Ativação/desativação seletiva de extensões

Instalação

Pré-requisitos

Node.js (v14 ou superior)
Navegador Chrome instalado
Visual Studio Code
Extensão Roo Code

Instalando a Extensão Roo Code

Abra o Visual Studio Code
Vá para Extensões (Ctrl+Shift+X)
Pesquise por "Roo Code"
Clique em Instalar

Configurando o Chrome Debug MCP Server

Clone este repositório:

git clone https://github.com/yourusername/chrome-debug-mcp.git
cd chrome-debug-mcp

Instale as dependências:
```
npm install
```
Compile o projeto:
```
npm run build
```

Configure no Roo Code: Adicione ao cline_mcp_settings.json:

{
  "mcpServers": {
    "chrome-debug": {
      "command": "node",
      "args": ["path/to/chrome-debug-mcp/build/index.js"],
      "disabled": false,
      "alwaysAllow": []
    }
  }
}

Uso

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

Para uma referência completa de todos os comandos, ferramentas e funções disponíveis, consulte COMMANDS.md.

parent of 64acbb3 (Add files via upload) ======= Para uma referência completa de todos os comandos, ferramentas e funções disponíveis, consulte COMMANDS.md.

parent of 64acbb3 (Add files via upload)

Inicialização Básica do Chrome

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "launch_chrome",
  arguments: {
    executablePath: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
    url: "https://example.com"
  }
})

Inicialização com Perfil Personalizado

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "launch_chrome",
  arguments: {
    executablePath: "C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe",
    userDataDir: "path/to/chrome/profile",
    disableAutomationControlled: true
  }
})

Injetar Userscript

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "launch_chrome",
  arguments: {
    url: "https://example.com",
    userscriptPath: "path/to/userscript.js"
  }
})

Avaliar JavaScript

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "evaluate",
  arguments: {
    expression: "document.title"
  }
})

Obter Logs do Console

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "get_console_logs",
  arguments: {
    clear: true
  }
})

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

=======

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

Exemplos de Interação com Páginas

Clicar em um Elemento

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "click",
  arguments: {
    selector: "#submit-button",
    delay: 500
  }
})

Digitar em um Campo

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "type",
  arguments: {
    selector: "#search-input",
    text: "search query",
    delay: 100
  }
})

Selecionar de um Menu Suspenso

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "select",
  arguments: {
    selector: "#country-select",
    value: "US"
  }
})

Aguardar Elemento

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "wait_for_selector",
  arguments: {
    selector: ".loading-complete",
    visible: true,
    timeout: 5000
  }
})

Tirar Screenshot

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "screenshot",
  arguments: {
    path: "screenshot.png",
    fullPage: true
  }
})

Definir Tamanho da Viewport

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "set_viewport",
  arguments: {
    width: 1920,
    height: 1080,
    deviceScaleFactor: 1
  }
})

Exemplos de Gerenciamento de Abas

Listar Todas as Abas

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "list_tabs",
  arguments: {}
})

Abrir Nova Aba

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "new_tab",
  arguments: {
    url: "https://example.com"
  }
})

Alternar para Aba

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "switch_tab",
  arguments: {
    tabId: "tab-id-from-list-tabs"
  }
})

Fechar Aba

use_mcp_tool({
  server_name: "chrome-debug",
  tool_name: "close_tab",
  arguments: {
    tabId: "tab-id-from-list-tabs"
  }
})

<<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD

parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload) ======= parent of 64acbb3 (Add files via upload)

Dependências

Este projeto utiliza os seguintes pacotes de código aberto:

Puppeteer - Biblioteca de automação do Chrome
chrome-remote-interface - Cliente do Chrome DevTools Protocol
@modelcontextprotocol/sdk - SDK do MCP para implementação do servidor

Licença

Este projeto é licenciado sob a Licença MIT - consulte o arquivo LICENSE para detalhes.

Contribuição

Consulte nosso Guia de Contribuição para detalhes sobre como contribuir.

Agradecimentos

Chrome DevTools Protocol
Greasemonkey API <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD <<<<<<< HEAD
Model Context Protocol

parent of 8a57443 (Merge pull request #4 from robertheadley/feature/puppeteer-commands) =======

Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

Model Context Protocol

parent of 64acbb3 (Add files via upload) =======

Model Context Protocol

parent of 64acbb3 (Add files via upload)