Cubierta de Rueda: Mensajería Bidireccional Persistente entre CLI y JavaScript del Navegador mediante CDP

Qué hace Hubcap Bridge

Hubcap Bridge establece un canal de mensajes bidireccional persistente entre un proceso local y JavaScript ejecutándose en una página del navegador utilizando el Protocolo Chrome DevTools. Esto aborda la brecha donde las aplicaciones web carecen de APIs públicas o los desarrolladores no tienen acceso a ellas, pero las aplicaciones tienen ricas APIs de JavaScript del lado del cliente que impulsan su interfaz de usuario.

Características principales y uso

La sintaxis del comando bridge es:

hubcap bridge --target "$TAB" ' for await (const msg of messages) { const result = await window.appAPI.query(msg.sql); send({rows: result}); } '

La comunicación ocurre a través de stdin/stdout transportando formato LDJSON. Los latidos detectan desconexión, y múltiples bridges pueden ejecutarse en la misma pestaña.

Aplicaciones prácticas

Esto permite construir habilidades de Claude Code que incluyen un servidor local mantenido sincronizado con una página web a través de sus APIs internas. El servidor usa bridge para enviar y recibir datos a través de la capa JavaScript de la página, con Claude comunicándose con el servidor. Este enfoque evita el scraping de HTML y no requiere esperar a que alguien construya un servidor MCP.

Debido a que el código inyectado por CDP se ejecuta en el contexto propio de la página, no hay problemas de CORS, CSP o contenido mixto que resolver. El autor señala: "Si puedes llamarlo desde la consola del navegador, puedes canalizarlo a través de bridge."

Notas de lanzamiento adicionales

También en este lanzamiento: eval ahora admite await de nivel superior.

Consideración importante

La fuente incluye esta nota: "(Asegúrate de mantenerte dentro de los términos de servicio de cualquier cosa con la que te estés integrando.)"

Recursos

• Publicación de blog: https://tomyandell.dev/blog/hubcap-bridge
• Plugin Hubcap: https://github.com/tomyan/claude-skill-hubcap
• Documentación: https://hubcap.tomyandell.dev
• Source: https://github.com/tomyan/hubcap