Hubcap Bridge: Persistent Two-Way Messaging Between CLI and Browser JavaScript via CDP

What Hubcap Bridge Does

Hubcap Bridge establishes a persistent two-way message channel between a local process and JavaScript running in a browser page using the Chrome DevTools Protocol. This addresses the gap where web apps lack public APIs or developers don't have access to them, but the apps have rich client-side JavaScript APIs powering their UI.

Key Features and Usage

The bridge command syntax is:

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

Communication happens via stdin/stdout carrying LDJSON format. Heartbeats detect disconnection, and multiple bridges can run in the same tab.

Practical Applications

This enables building Claude Code skills that include a local server kept in sync with a web page through its internal APIs. The server uses bridge to push and pull data through the page's JavaScript layer, with Claude communicating to the server. This approach avoids HTML scraping and doesn't require waiting for someone to build an MCP server.

Because CDP-injected code runs in the page's own context, there are no CORS, CSP, or mixed content issues to work around. The author notes: "If you can call it from the browser console, you can pipe it through bridge."

Additional Release Notes

Also in this release: eval now supports top-level await.

Important Consideration

The source includes this note: "(Make sure you're staying within the terms of service of whatever you're integrating with.)"

Resources

• Blog post: https://tomyandell.dev/blog/hubcap-bridge
• Hubcap plugin: https://github.com/tomyan/claude-skill-hubcap
• Docs: https://hubcap.tomyandell.dev
• Source: https://github.com/tomyan/hubcap