허브캡 브릿지: CDP를 통한 CLI와 브라우저 자바스크립트 간의 지속적 양방향 메시징

Hubcap Bridge의 기능

Hubcap Bridge는 Chrome DevTools Protocol을 사용하여 로컬 프로세스와 브라우저 페이지에서 실행 중인 JavaScript 간에 지속적인 양방향 메시지 채널을 설정합니다. 이는 웹 앱이 공개 API를 제공하지 않거나 개발자가 접근할 수 없지만, 앱이 UI를 구동하는 풍부한 클라이언트 측 JavaScript API를 가지고 있는 경우의 격차를 해소합니다.

주요 기능 및 사용법

브리지 명령어 구문은 다음과 같습니다:

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

통신은 LDJSON 형식을 운반하는 stdin/stdout을 통해 이루어집니다. 하트비트는 연결 끊김을 감지하며, 동일한 탭에서 여러 브리지를 실행할 수 있습니다.

실제 응용

이를 통해 내부 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