MCP Chrome Feedback

Coleta feedback interativo do usuário, incluindo texto e imagens, por meio de uma extensão do Chrome com comunicação em tempo real e gerenciamento de histórico.

GitHub
1
Experimente este MCPPatrocinado

Documentação

MCP Chrome Feedback

Fornece funcionalidade de coleta de feedback para interação entre o serviço MCP e a extensão do Chrome

Recursos

  • 🤖 Coleta de feedback interativa: Coleta feedback do usuário através da interface da extensão do Chrome
  • 📝 Suporte a texto e imagens: Suporta feedback em texto e anexos de imagem
  • 🔄 Comunicação em tempo real: Mecanismo de comunicação em tempo real via WebSocket
  • 📊 Histórico de feedback: Salva e gerencia automaticamente o histórico de feedback
  • 🎯 Captura de elementos: Suporta captura de elementos da página e capturas de tela
  • ⚡ Plug and play: Protocolo MCP padrão, pode ser configurado diretamente no Cursor

Inspiração de design

Minidoracat - mcp-feedback-enhanced web-infra-dev - midscene-chrome-extension

Instalação

1. Instalar a ferramenta MCP

Método 1: Usando npx (recomendado)

Sem necessidade de instalação, use diretamente na configuração do MCP:

{
  "mcpServers": {
    "chrome-feedback": {
      "command": "npx",
      "args": ["mcp-chrome-feedback@latest"]
    }
  }
}

Método 2: Instalação global

npm install -g mcp-chrome-feedback@latest

Método 3: Compilar a partir do código-fonte

git clone https://github.com/2019-02-18/MCX.git
cd MCX/mcp-chrome-feedback
npm install
npm run build

🔧 Compilação de desenvolvimento

# 构建项目
npm run build

# 开发模式
npm run dev

# 清理构建文件
npm run clean

2. Instalar a extensão do Chrome

  1. Abra o navegador Chrome
  2. Acesse chrome://extensions/
  3. Ative o "Modo do desenvolvedor"
  4. Clique em "Carregar sem compactação"
  5. Selecione a pasta chrome-extension no projeto

Configuração no Cursor

Método 1: Usando npx (recomendado)

Edite o arquivo de configuração do MCP no Cursor e adicione a seguinte configuração:

{
  "mcpServers": {
    "chrome-feedback": {
      "command": "npx",
      "args": ["mcp-chrome-feedback@latest"]
    }
  }
}

Método 2: Usando instalação global

Se já estiver instalado globalmente, pode usar diretamente:

{
  "mcpServers": {
    "chrome-feedback": {
      "command": "mcp-chrome-feedback"
    }
  }
}

Método 3: Configuração de porta personalizada

Se precisar especificar uma porta específica:

{
  "mcpServers": {
    "chrome-feedback": {
      "command": "npx",
      "args": ["mcp-chrome-feedback@latest"],
      "env": {
        "MCP_CHROME_PORT": "8900"
      }
    }
  }
}

Método 4: Usando caminho local (modo de desenvolvimento)

Se estiver executando a partir do código-fonte:

{
  "mcpServers": {
    "chrome-feedback": {
      "command": "node",
      "args": ["/path/to/MCX/mcp-chrome-feedback/build/index.js"]
    }
  }
}

Como usar

1. Iniciar a extensão do Chrome

  1. Certifique-se de que a extensão do Chrome está instalada e habilitada
  2. Abra a barra lateral da extensão
  3. Clique no botão "Conectar" para conectar ao serviço MCP

2. Usar no Cursor

Após a configuração, você pode usar as seguintes ferramentas no Cursor:

interactive_feedback

Solicita feedback do usuário através da extensão do Chrome

请使用interactive_feedback工具收集用户对当前代码的反馈

Parâmetros:

  • summary: Resumo do trabalho da IA (padrão: "Concluí a tarefa que você solicitou.")
  • timeout: Tempo limite em segundos (padrão: 600)
  • project_directory: Diretório do projeto (padrão: ".")

get_feedback_history

Obtém o histórico de feedback

请显示最近的反馈历史

Parâmetros:

  • limit: Número de registros retornados (padrão: 10)

get_extension_status

Verifica o status da conexão da extensão do Chrome

请检查Chrome扩展的连接状态

clear_feedback_history

Limpa o histórico de feedback

请清空所有反馈历史记录

Recursos da extensão do Chrome

Coleta de feedback

  • Entrada de feedback em texto
  • Upload de imagens por arrastar e soltar
  • Suporte a colar imagens
  • Captura de elementos da página
  • Captura de tela da página inteira

Inspeção de elementos

  • Clique em elementos da página para capturar
  • Captura de tela automática e extração de informações do elemento
  • Suporte a estruturas de página complexas

Comunicação em tempo real

  • Exibição do status da conexão WebSocket
  • Mecanismo de reconexão automática
  • Indicador de status da conexão

Fluxo de trabalho

  1. IA solicita feedback: Chame a ferramenta interactive_feedback no Cursor
  2. Extensão exibe interface: A extensão do Chrome exibe automaticamente a interface de coleta de feedback
  3. Usuário fornece feedback: O usuário insere texto, envia imagens ou captura elementos da página
  4. Feedback retorna para a IA: Os dados de feedback são enviados de volta ao Cursor via protocolo MCP
  5. IA processa o feedback: A IA ajusta o comportamento subsequente com base no feedback

Opções de configuração

Variáveis de ambiente

  • MCP_CHROME_PORT: Porta de comunicação da extensão do Chrome (padrão: 8797, se a porta estiver ocupada, incrementa automaticamente até encontrar uma disponível)

Configurações da extensão do Chrome

Nas configurações da extensão, você pode configurar:

  • Endereço do servidor
  • Conexão automática
  • Limite do histórico de feedback

Solução de problemas

Problemas de conexão

  1. Verifique o status da extensão:

    请使用get_extension_status工具检查连接状态

  2. Problemas de porta:

    • O serviço procura automaticamente por portas disponíveis (8797-8806)
    • Para especificar uma porta, use a variável de ambiente MCP_CHROME_PORT
    • Limpe o cache do npx: rm -rf ~/.npm/_npx (Unix) ou exclua %USERPROFILE%\.npm\_npx (Windows)

  3. Problemas de dependências:

    • Certifique-se de usar a versão mais recente: mcp-chrome-feedback@latest
    • Limpe o cache do npm: npm cache clean --force

  4. Reinicie o serviço: Reinicie o Cursor ou recarregue a extensão

Problemas de coleta de feedback

  1. Configuração de tempo limite: Aumente o valor do parâmetro timeout
  2. Conexão de rede: Verifique a conexão de rede local
  3. Permissões da extensão: Confirme se a extensão tem as permissões necessárias

Desenvolvimento

Compilar o projeto

npm run build

Modo de desenvolvimento

npm run dev

Testes

npm test

Licença

Licença MIT

Contribuição

Contribuições são bem-vindas! Envie Issues e Pull Requests!

Registro de alterações

v1.0.4

  • 🚀 Melhoria importante: Atualização do SDK MCP para v1.13.0
  • 🔧 Gerenciamento de portas: Adicionada alocação automática de portas (8797-8806)
  • 🛠️ Correção de dependências: Resolvidos problemas de instalação e execução do npx
  • 📦 Otimização de empacotamento: Melhorada a estrutura do pacote npm e o gerenciamento de dependências
  • 🐛 Tratamento de erros: Logs de erro e informações de depuração aprimorados

v1.0.3

  • 🔄 Correção de conflito de portas: Resolvido inicialmente o problema de portas ocupadas
  • 📝 Atualização da documentação: Instruções de instalação e configuração melhoradas

v1.0.0

  • 🎉 Versão inicial: Funcionalidade básica de coleta de feedback
  • 🔌 Integração com extensão do Chrome: Suporte completo à extensão do navegador
  • 🤖 Suporte ao protocolo MCP: Implementação padrão de ferramentas MCP
  • 💬 Comunicação em tempo real: Comunicação bidirecional via WebSocket