MCP Chrome Feedback

Recopila comentarios interactivos de los usuarios, incluidos texto e imágenes, a través de una extensión de Chrome con comunicación en tiempo real y gestión de historial.

GitHub
1
Prueba este MCPPatrocinado

Documentación

MCP Chrome Feedback

Proporciona funcionalidad de recopilación de comentarios para la interacción entre el servicio MCP y la extensión de Chrome

Características

  • 🤖 Recopilación de comentarios interactiva: Recopila comentarios de usuarios a través de la interfaz de la extensión de Chrome
  • 📝 Soporte de texto e imágenes: Soporta comentarios de texto y archivos adjuntos de imágenes
  • 🔄 Comunicación en tiempo real: Mecanismo de comunicación en tiempo real mediante WebSocket
  • 📊 Historial de comentarios: Guarda y gestiona automáticamente el historial de comentarios
  • 🎯 Captura de elementos: Soporta captura de elementos de página y capturas de pantalla
  • ⚡ Plug and play: Protocolo MCP estándar, configurable directamente en Cursor

Inspiración de diseño

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

Instalación

1. Instalar la herramienta MCP

Método 1: Usar npx (recomendado)

Sin necesidad de instalación, úselo directamente en la configuración de MCP:

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

Método 2: Instalación global

npm install -g mcp-chrome-feedback@latest

Método 3: Compilar desde el código fuente

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

🔧 Compilación de desarrollo

# 构建项目
npm run build

# 开发模式
npm run dev

# 清理构建文件
npm run clean

2. Instalar la extensión de Chrome

  1. Abra el navegador Chrome
  2. Vaya a chrome://extensions/
  3. Active el "modo desarrollador"
  4. Haga clic en "Cargar extensión descomprimida"
  5. Seleccione la carpeta chrome-extension del proyecto

Configuración en Cursor

Método 1: Usar npx (recomendado)

Edite el archivo de configuración MCP de Cursor y agregue la siguiente configuración:

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

Método 2: Usar instalación global

Si ya está instalado globalmente, puede usarlo directamente:

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

Método 3: Configuración de puerto personalizado

Si necesita especificar un puerto específico:

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

Método 4: Usar ruta local (modo de desarrollo)

Si se ejecuta desde el código fuente:

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

Método de uso

1. Iniciar la extensión de Chrome

  1. Asegúrese de que la extensión de Chrome esté instalada y habilitada
  2. Abra la barra lateral de la extensión
  3. Haga clic en el botón "Conectar" para conectarse al servicio MCP

2. Usar en Cursor

Una vez completada la configuración, puede usar las siguientes herramientas en Cursor:

interactive_feedback

Solicita al usuario que proporcione comentarios a través de la extensión de Chrome

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

Parámetros:

  • summary: Resumen del trabajo de IA (predeterminado: "He completado la tarea que solicitó.")
  • timeout: Tiempo de espera (segundos) (predeterminado: 600)
  • project_directory: Directorio del proyecto (predeterminado: ".")

get_feedback_history

Obtener el historial de comentarios

请显示最近的反馈历史

Parámetros:

  • limit: Número de registros a devolver (predeterminado: 10)

get_extension_status

Verificar el estado de conexión de la extensión de Chrome

请检查Chrome扩展的连接状态

clear_feedback_history

Vaciar el historial de comentarios

请清空所有反馈历史记录

Funciones de la extensión de Chrome

Recopilación de comentarios

  • Entrada de comentarios de texto
  • Carga de imágenes por arrastre
  • Soporte de pegado de imágenes
  • Captura de elementos de página
  • Captura de pantalla de página completa

Inspección de elementos

  • Haga clic en elementos de la página para capturarlos
  • Captura de pantalla automática y extracción de información de elementos
  • Soporta estructuras de página complejas

Comunicación en tiempo real

  • Visualización del estado de conexión WebSocket
  • Mecanismo de reconexión automática
  • Indicador de estado de conexión

Flujo de trabajo

  1. La IA solicita comentarios: Llame a la herramienta interactive_feedback en Cursor
  2. La extensión muestra la interfaz: La extensión de Chrome muestra automáticamente la interfaz de recopilación de comentarios
  3. El usuario proporciona comentarios: El usuario ingresa texto, sube imágenes o captura elementos de página
  4. Los comentarios se devuelven a la IA: Los datos de comentarios se devuelven a Cursor mediante el protocolo MCP
  5. La IA procesa los comentarios: La IA ajusta su comportamiento posterior según los comentarios

Opciones de configuración

Variables de entorno

  • MCP_CHROME_PORT: Puerto de comunicación de la extensión de Chrome (predeterminado: 8797, si el puerto está ocupado, se incrementará automáticamente hasta encontrar uno disponible)

Configuración de la extensión de Chrome

En la configuración de la extensión se puede configurar:

  • Dirección del servidor
  • Conexión automática
  • Límite del historial de comentarios

Solución de problemas

Problemas de conexión

  1. Verificar el estado de la extensión:

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

  2. Problemas de puerto:

    • El servicio busca automáticamente un puerto disponible (8797-8806)
    • Si necesita especificar un puerto, use la variable de entorno MCP_CHROME_PORT
    • Limpiar la caché de npx: rm -rf ~/.npm/_npx (Unix) o eliminar %USERPROFILE%\.npm\_npx (Windows)

  3. Problemas de dependencias:

    • Asegúrese de usar la versión más reciente: mcp-chrome-feedback@latest
    • Limpiar la caché de npm: npm cache clean --force

  4. Reiniciar el servicio: Reinicie Cursor o recargue la extensión

Problemas de recopilación de comentarios

  1. Configuración de tiempo de espera: Aumente el valor del parámetro timeout
  2. Conexión de red: Verifique la conexión de red local
  3. Permisos de la extensión: Confirme que la extensión tiene los permisos necesarios

Desarrollo

Compilar el proyecto

npm run build

Modo de desarrollo

npm run dev

Pruebas

npm test

Licencia

MIT License

Contribuciones

¡Bienvenidos Issues y Pull Requests!

Registro de cambios

v1.0.4

  • 🚀 Mejora importante: Actualización del SDK de MCP a v1.13.0
  • 🔧 Gestión de puertos: Se agregó la asignación automática de puertos (8797-8806)
  • 🛠️ Corrección de dependencias: Se resolvieron problemas de instalación y ejecución de npx
  • 📦 Optimización del empaquetado: Se mejoró la estructura del paquete npm y la gestión de dependencias
  • 🐛 Manejo de errores: Se mejoraron los registros de errores y la información de depuración

v1.0.3

  • 🔄 Corrección de conflictos de puertos: Se resolvió preliminarmente el problema de puertos ocupados
  • 📝 Actualización de documentación: Se mejoraron las instrucciones de instalación y configuración

v1.0.0

  • 🎉 Versión inicial: Funcionalidad básica de recopilación de comentarios
  • 🔌 Integración de la extensión de Chrome: Soporte completo de extensión de navegador
  • 🤖 Soporte del protocolo MCP: Implementación estándar de herramientas MCP
  • 💬 Comunicación en tiempo real: Comunicación bidireccional WebSocket