foxcode: claude code керує справжнім браузером

https://github.com/korchasa/foxcode

Мені постійно доводиться давати агенту доступ до браузера. Для тестування додатків, дебагу, та просто щоб щось дізнатися або допомогти з чимось. Після переходу з playwright-mcp на playwright-cli швидкість зросла, але все одно була занадто низькою. Плюс, мені потрібен був спосіб дати claude code доступ до справжнього браузера — з моїми сесіями, що стосуються конкретного проєкту. Довелося робити своє рішення. Заодно вирішив перевірити ідею з https://www.anthropic.com/engineering/code-execution-with-mcp з оптимізацією через програмування викликів.

Як це працює

Архітектура:

• claude code спілкується з mcp-сервером через stdio
• mcp-сервер тримає websocket-з’єднання з firefox-розширенням
• розширення виконує javascript у контексті активної вкладки

Автентифікація через випадковий 32-hex токен у ~/.foxcode/password (mode 0600). Передається через url hash — ніколи не надсилається на сервер.

Інструменти та api

Основний інструмент в mcp — evalInBrowser(code, timeout?). Усередині доступний об’єкт api з методами, аналогічними playwright. Наприклад, можна залогінитися та зібрати дані за один виклик:

await api.navigate("https://app.example.com/login");
await api.fill("#email", "user@test.com");
await api.fill("#password", "secret");
await api.click("button[type=submit]");
await api.waitFor(".dashboard", { timeout: 5000 });
return await api.snapshot(".stats-panel");

Переваги

• безліч операцій в одному виклику, які можуть залежати одна від одної, тож не потрібно робити кілька викликів для складних сценаріїв
• профіль браузера зберігається між сесіями, тож можна логінитися та зберігати куки
• для сайту браузер не відрізняється (окрім поведінкових евристик) від звичайного
• у режимі проєктного профілю браузер стартує швидко, з готовим профілем, а при запуску в користувацькому режимі взагалі використовується основний профіль, який вже запущено

Недоліки

• з’єднання не миттєве і є стадія встановлення з’єднання та авторизації
• для користувацького профілю поки потрібно вручну встановити розширення через сторінку about:debugging, тож це не зовсім plug-and-play
• поки підтримується лише firefox

Встановлення

/plugin у claude code — це відкриє інтерактивний менеджер плагінів. Додайте маркетплейс korchasa/foxcode на вкладці Marketplaces, потім встановіть foxcode на вкладці Discover.

Запуск

Є два режими запуску:

• /foxcode:foxcode-run-project-profile — ізольований firefox з чистим профілем. Профіль зберігається всередині поточного проєкту.
• /foxcode:foxcode-run-user-profile — ваш основний firefox. Потребує ручного встановлення розширення через about:debugging.

Плани на наступний “підхід”:

• спробувати додати розширення в офіційний магазин, щоб не потрібно було встановлювати вручну
• підтримка інших браузерів
• самонавчання для оптимізації сценаріїв, які часто виконуються