ハブキャップブリッジ：CDPを介したCLIとブラウザJavaScript間の持続的双方向メッセージング

Hubcap Bridgeの機能

Hubcap Bridgeは、Chrome DevTools Protocolを使用して、ローカルプロセスとブラウザページ内で実行されるJavaScriptの間に持続的な双方向メッセージチャネルを確立します。これにより、Webアプリが公開APIを持たない場合や開発者がそれらにアクセスできない場合でも、アプリのUIを支える豊富なクライアントサイドJavaScript APIを活用できるギャップを埋めます。

主な機能と使用方法

bridgeコマンドの構文は以下の通りです：

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

通信は、LDJSON形式を運ぶstdin/stdoutを介して行われます。ハートビートで切断を検出し、複数のブリッジを同じタブ内で実行できます。

実用的な応用例

これにより、ローカルサーバーをWebページの内部APIを通じて同期させたClaude Codeスキルを構築できます。サーバーはブリッジを使用してページのJavaScriptレイヤーを通じてデータをプッシュおよびプルし、Claudeはサーバーと通信します。このアプローチはHTMLスクレイピングを回避し、誰かがMCPサーバーを構築するのを待つ必要がありません。

CDPで注入されたコードはページ自身のコンテキストで実行されるため、CORS、CSP、または混合コンテンツの問題を回避する必要がありません。著者は次のように述べています：「ブラウザコンソールから呼び出せるものは、すべてブリッジを通じてパイプできます。」

追加のリリースノート

今回のリリースでは、evalがトップレベルのawaitをサポートするようになりました。

重要な考慮事項

ソースには次の注意書きが含まれています：「（統合する対象の利用規約の範囲内に留まっていることを確認してください。）」

リソース

• ブログ記事：https://tomyandell.dev/blog/hubcap-bridge
• Hubcapプラグイン：https://github.com/tomyan/claude-skill-hubcap
• ドキュメント：https://hubcap.tomyandell.dev
• Source：https://github.com/tomyan/hubcap