Крышка моста: Постоянная двусторонняя передача сообщений между CLI и JavaScript в браузере через CDP

Что делает Hubcap Bridge

Hubcap Bridge устанавливает постоянный двусторонний канал обмена сообщениями между локальным процессом и JavaScript, выполняющимся на странице браузера, с использованием Chrome DevTools Protocol. Это решает проблему, когда у веб-приложений нет публичных API или у разработчиков нет к ним доступа, но приложения имеют богатые клиентские JavaScript API, обеспечивающие работу их пользовательского интерфейса.

Ключевые особенности и использование

Синтаксис команды bridge:

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

Общение происходит через stdin/stdout с использованием формата LDJSON. Heartbeats обнаруживают разрыв соединения, и несколько мостов могут работать на одной вкладке.

Практическое применение

Это позволяет создавать навыки Claude Code, которые включают локальный сервер, синхронизированный с веб-страницей через её внутренние API. Сервер использует bridge для отправки и получения данных через JavaScript-слой страницы, а Claude общается с сервером. Этот подход позволяет избежать парсинга HTML и не требует ожидания, пока кто-то создаст MCP-сервер.

Поскольку код, внедрённый через CDP, выполняется в контексте самой страницы, нет необходимости обходить проблемы CORS, CSP или смешанного контента. Автор отмечает: «Если вы можете вызвать это из консоли браузера, вы можете передать это через bridge.»

Дополнительные заметки о выпуске

Также в этом выпуске: 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