MCP Chrome Integration

Controle o navegador Chrome para automação web usando um modelo de IA. Requer a extensão MCP Chrome.

GitHub

Documentação

Integração MCP Chrome

Um protocolo que permite que modelos de IA controlem o navegador Chrome e realizem automação web.

Instalação

Pré-requisitos

Python 3.12
Extensão do navegador Google Chrome instalada (cliente websocket)
uv (instalador de pacotes Python) ou Docker

Instalando via Smithery

Para instalar o Servidor de Automação do Navegador Chrome para Claude Desktop automaticamente via Smithery:

npx -y @smithery/cli install @dlwjdtn535/mcp-chrome-integration --client claude

Configuração

Escolha um dos seguintes métodos de configuração com base no seu ambiente:

1. Usando uv (Recomendado)

Configuração no Windows:

{
  "mcpServers": {
    "mcp-chrome-integration": {
      "command": "uv",
      "args": [
        "run",
        "--directory",
        "%LOCALAPPDATA%\\Programs\\mcp-chrome-integration\\src",
        "mcp-server"
      ],
      "env": {
        "WEBSOCKET_PORT": "8012"
      }
    }
  }
}

Configuração no macOS:

{
  "mcpServers": {
    "mcp-chrome-integration": {
      "command": "uv",
      "args": [
        "run",
        "--directory",
        "/usr/local/bin/mcp-chrome-integration/src",
        "mcp-server"
      ],
      "env": {
        "WEBSOCKET_PORT": "8012"
      }
    }
  }
}

Configuração no Linux:

{
  "mcpServers": {
    "mcp-chrome-integration": {
      "command": "uv",
      "args": [
        "run",
        "--directory",
        "/usr/local/bin/mcp-chrome-integration/src",
        "mcp-server"
      ],
      "env": {
        "WEBSOCKET_PORT": "8012"
      }
    }
  }
}

Principais Recursos

1. Navegação e Interação com Páginas

Navegação por URL
Clique em Elementos
Entrada de Texto
Preenchimento de Formulários
Rolagem de Página
Extração de Dados de Tabelas
Execução de Código JavaScript

2. Manipulação de Elementos

Obter Informações do Elemento (dimensões, estilos, visibilidade)
Aguardar Elementos
Alterar Cores de Fundo
Obter Estado e Conteúdo da Página

3. Análise de Páginas

Obter Conteúdo HTML
Contar Links
Extrair Meta Tags
Obter Informações de Imagens
Análise de Formulários
Transmissão de Conteúdo da Página

4. Recursos do Navegador

Gerenciamento de Favoritos
Acesso ao Histórico do Navegador
Gerenciar Downloads
Mostrar Notificações
Gerenciamento da Área de Transferência
Gerenciamento de Cookies

5. Integração com o Sistema

Obter Informações do Sistema
Acessar Geolocalização
Monitorar Status de Energia/Bateria
Capturar Capturas de Tela

Exemplos de Uso

# Navigate to URL
tool_navigate_to(url="https://example.com", tab_id="your_tab_id")

# Click Element
tool_click_element(selector="#submit-button", tab_id="your_tab_id")

# Type Text
tool_type_text(selector="#search", text="query", tab_id="your_tab_id")

# Check Page State
tool_state(tab_id="your_tab_id")

# Execute JavaScript
tool_execute_script(script="console.log('Hello')", tab_id="your_tab_id")

# Extract Table Data
tool_extract_table(selector=".data-table", tab_id="your_tab_id")

# Get Element Info
tool_get_element_info(selector=".my-element", tab_id="your_tab_id")

Notas Importantes

1. Restrições de Segurança do Chrome

Não funciona em URLs chrome://
Funciona apenas em sites regulares (http:// ou https://)
A Política de Segurança de Conteúdo (CSP) de alguns sites pode restringir certas operações
Considere a CSP do site ao executar JavaScript

2. Gerenciamento de Abas

tab_id é obrigatório para todas as operações
Use tool_tab_list() para verificar as abas disponíveis
Verifique o estado da aba antes das operações

3. Tratamento de Erros

Verifique os valores de retorno para status de sucesso/falha
Trate timeouts para operações de espera
Considere o estado de carregamento do site

Instalação e Configuração

1. Instalação e Configuração da Extensão do Chrome

Preparar a Extensão

# Navigate to extension directory
cd mcp-client

Instalar no Navegador Chrome
- Abra o navegador Chrome
- Digite chrome://extensions/ na barra de endereço
- Ative o botão "Modo do desenvolvedor" no canto superior direito
- Clique no botão "Carregar sem compactação" no canto superior esquerdo
- Selecione o diretório mcp-client
Configurar a Extensão
- Clique no ícone da extensão MCP na barra de ferramentas do Chrome
- Digite a URL do servidor (padrão: ws://localhost:8012)
- Clique no botão "Conectar" para conectar ao servidor
- O status da conexão deve mudar para "Conectado"
Usando a Extensão
- Funciona automaticamente nas abas conectadas
- Para novas abas, clique no ícone da extensão e conecte
- Monitore as operações na janela de log
- Clique em "Desconectar" para encerrar a conexão

2. Configuração do Servidor

# Navigate to server directory
cd mcp-server

# Install dependencies
pip install -r requirements.txt

# Start server
python src/server.py

Recursos da Extensão

1. Interface Popup

Configuração da URL do Servidor
Botão Conectar/Desconectar
Status da Aba Atual
Visualizador de Mensagens de Log

2. Recursos em Segundo Plano

Gerenciamento de Abas
Manutenção da Conexão WebSocket
Reconexão Automática
Recuperação de Erros

3. Recursos de Segurança

Suporte a HTTPS
Conformidade com CSP
Execução Segura de Scripts
Gerenciamento de Permissões

4. Depuração

Visualização de Logs nas Ferramentas do Desenvolvedor
Mensagens de Erro Detalhadas
Monitoramento da Comunicação de Rede
Rastreamento do Estado de Execução

Solução de Problemas

1. Problemas de Conexão

Verifique a URL do Servidor
Verifique o Status do Servidor
Verifique as Configurações do Firewall
Verifique a Disponibilidade da Porta WebSocket (8012)

2. Erros de Execução

Verifique as Restrições de CSP
Conceda as Permissões Necessárias
Revise as Mensagens de Erro no Console
Valide os IDs das Abas

3. Problemas de Desempenho

Monitore o Uso de Memória
Desconecte Abas Não Utilizadas
Ajuste a Frequência de Atualização de Status
Otimize o Processamento de Grandes Volumes de Dados

Licença

MIT