Publicada el · Actualizada el
Hermes Browser Extensión: cómo instalar y configurar el puente entre navegador y Hermes Agent
Ficha de instalación de la extensión de navegador que conecta el contenido de tu pestaña activa con una instancia local o remota de Hermes Agent, sin enviar datos a la nube.
Lo que hay dentro, de principio a fin
http://127.0.0.1:8642.dist/ al cargar la extensión, si el gateway no está escuchando en el puerto 8642, o si la clave API_SERVER_KEY no coincide con la del backend.Qué es y para quién tiene sentido la idea aprovechable
Hermes Browser Extensión es un cliente ligero que vive en el side panel del navegador y habla con tu runtime de Hermes Agent mediante WebSocket y REST. La extensión no embebe modelos grandes: delega todo el trabajo de inferencia en el backend, así que hereda de forma automática tus modelos, system prompts, skills, proveedores de memoria y servidores MCP.
La idea aprovechable es el "recibo de lo que Hermes vio": tras cada turno se despliega un panel colapsable con el markdown exacto, la jerarquía del DOM y los metadatos extraídos de la web. Esto resuelve el problema clásico de no saber qué contexto le mandaste al modelo, y se combina con un envoltorio que marca todo el texto web como contexto no confiable para mitigar inyecciones de prompt ocultas en páginas maliciosas.
Tiene sentido para tres perfiles:
- Ingenieros de automatización que necesitan alimentar agentes con estados autenticados del navegador (dashboards internos, apps con login).
- Investigadores concienciados con la privacidad que prefieren resumir páginas con pesos locales (Llama 3, Qwen) en vez de mandar el historial a OpenAI o Google.
- Usuarios avanzados de Hermes en terminal que quieren un compañero gráfico para pedir refactors o explicaciones sobre repos y documentación web sin copiar y pegar.
La extensión aísla cualquier cambio de modelo o parámetro a la sesión del navegador; nunca pisará tus defaults globales de ~/.hermes/config.yaml.
Instalación paso a paso del repo al side panel
El flujo completo es: clonar y compilar, cargar la extensión en modo desarrollador, conectar con el gateway y probar la extracción de contexto web.
02.1 Requisitos previos
Antes de tocar la extensión necesitas el backend funcionando:
- Hermes Agent Runtime instalado y operativo.
- Node.js 20.0 o superior para compilar el bundle.
- Chrome 114+, Edge, Brave, Comet u otro Chromium con Side Panel API.
- Gateway/API de Hermes escuchando por defecto en
http://127.0.0.1:8642.
02.2 Paso 1 clonar el repositorio y compilar
Abre la terminal, clona el repo, instala dependencias y ejecuta el build de producción. Esto deja la extensión lista dentro de una carpeta dist/.
git clone https://github.com/abundantbeing/hermes-browser-extension.git cd hermes-browser-extension npm install npm run build
02.3 Paso 2 cargar la extensión sin empaquetar
Como es una herramienta para desarrolladores, se instala en modo desarrollador en lugar de desde una tienda.
# 1. Abre tu navegador Chromium y navega a: chrome://extensions # (o edge://extensions en Microsoft Edge) # 2. Activa el interruptor "Modo de desarrollador" arriba a la derecha. # 3. Pulsa "Cargar extensión sin empaquetar" arriba a la izquierda. # 4. Selecciona la carpeta "dist" generada tras la compilación. # IMPORTANTE: selecciona /dist, NO la raíz del repo.
02.4 Paso 3 arrancar y conectar al gateway
Pincha el icono de Hermes en la barra del navegador y abre el side panel (atajo Alt+H). Asegúrate primero de que el gateway está corriendo en otra terminal.
hermes gateway --port 8642
Dentro del side panel:
http://127.0.0.1:8642.API_SERVER_KEY (está en ~/.hermes/.env o en la configuración).La clave debe coincidir exactamente con la del backend; cualquier espacio o salto de línea extra provoca 401.
02.5 Paso 4 probar la extracción de contexto web
Abre cualquier artículo o repositorio de GitHub. En el compositor del side panel ejecuta un slash command como /summarize o pregunta "What are the main dependencies listed on this page?". Despliega el recibo "What Hermes saw" bajo tu mensaje para verificar que el DOM se ha scrappeado y formateado correctamente.
Errores frecuentes y cómo arreglarlos la chuleta de soporte
| Error | Significado | Arreglo |
|---|---|---|
| Failed to load extensión: Manifest file is missing | Seleccionaste la raíz del repo en lugar de la carpeta de build al pulsar "Load unpacked". | Confirma que npm run build terminó OK y vuelve a cargar seleccionando la subcarpeta dist/. |
| Connection Refused (http://127.0.0.1:8642) | La extensión no alcanza el backend de Hermes Agent en local. | Comprueba que Hermes Agent está corriendo y que el API server escucha en el puerto 8642; revisa firewalls que bloqueen loopback. |
| 401 Unauthorized / Invalid API Key | El token de la extensión no coincide con la clave esperada por el gateway. | Abre ~/.hermes/.env y copia el API_SERVER_KEY o el token scoped del navegador, pégaselo limpio a la extensión. |
| Microphone access denied in Side Panel | Chromium restringe la captura directa de hardware dentro de side panels tipo iframe. | Usa el flujo de voz integrado: pulsa el icono del micro, permite que se abra la pestaña companion "Voice Dictation Tab" y pulsa "Start dictation" allí para cumplir el gesto requerido. |
| DOM Scraping Failed / Empty Context | Estás intentando extraer contexto de una página interna del navegador (chrome://settings, Chrome Web Store). | El modelo de seguridad del navegador prohíbe inyectar content scripts en URLs chrome:// o de la tienda; navega a una página HTTP/HTTPS estándar. |
Si el recibo "What Hermes saw" muestra markdown bien formateado y la respuesta del modelo lo refleja, todo el puente funciona.
Frente a alternativas comerciales y gratuitas cuándo elegir esta pieza
La tabla compara la combinación "Extensión + Hermes local" con asistentes comerciales de pago en la nube.
| Característica | Hermes Extensión + Agente local (gratis) | Asistentes comerciales en la nube (de pago) |
|---|---|---|
| Soberanía de datos | 100% privado. DOM, tokens y cookies se quedan en tu máquina o gateway privado. | El contexto de página y la navegación se envían a endpoints comerciales. |
| Skills y herramientas | Acceso completo a tus skills locales de Hermes, servidores MCP, tracing Langfuse y bases de memoria. | Limitado al buscador web y plugins del proveedor. |
| Personalización y alcance | Control granular sobre extracción de DOM, envoltorio de prompts y aislamiento de sesión por tab. | Normalmente limitado a botones genéricos tipo "Summarize Page". |
| Coste | 0 EUR bajo licencia open source. Necesitas tu propio compute local o remoto. | Suscripción habitual de unos 20 EUR/mes (ChatGPT Plus, Claude Pro, Copilot Pro). |
La gracia del montaje es que convierte Hermes Agent de una herramienta brillante de terminal en un compañero web cotidiano, sin telemetría de terceros y con integración profunda de MCP.
04.1 Tres alternativas a considerar
- Open WebUI (con extensión de Chrome): interfaz self-hosted excelente para Ollama o vLLM, con extensión companion para clipar contenido. Le faltan las capacidades autónomas de agente, ejecución local de skills e integración MCP de Hermes.
- Harpa AI: side panel potente con chat, automatización web, price tracking y prompts de marketing predefinidos. Es propietaria y muy pesada en UI, justo lo contrario del enfoque ligero y open source de Hermes.
- Page Assist: extensión open source que ofrece un sidebar simple para modelos locales vía Ollama o LM Studio. Más fácil de instalar para usuarios casuales, pero no llega a los flujos agenticos, la orquestación multi-tab ni la ejecución de un runtime completo de Hermes Agent.