TokenToad: как я сделал Chrome-расширение, чтобы перестать удивляться счетам за AI

В сфере искусственного интеллекта произошло заметное событие. StudyQA 2 минуты назад TokenToad: как я сделал Chrome-расширение, чтобы перестать удивляться счетам за AI Простой 4 мин 10 JavaScript * Веб-разработка * Open source * TypeScript * Node. JS * Туториал Я активно пользуюсь API Anthropic, OpenAI и Gemini. Расходы копятся незаметно: сессия Claude Code тут, batch-запрос к GPT-4 там, и к концу месяца биллинг удивляет.

Дашборды провайдеров показывают данные с задержкой, в разных интерфейсах, и не агрегируют картину. Я сделал то, чего самому не хватало: Chrome-расширение TokenToad, которое показывает расходы в реальном времени прямо в тулбаре браузера. Что умеет TokenToadДва режима отображения в badge:$ API Billing показывает сумму в долларах за сегодня.

Технические детали

Обновляется при каждом API-вызове и по расписанию. % Subscription Plan показывает процент утилизации лимита подписки claude. ai (сессия, неделя, отдельно по моделям).

Полезно, если вы на Pro/Max тарифе и хотите видеть, сколько осталось. Оба режима работают параллельно. Переключатель влияет только на то, что отображается в badge.

Данные собираются из всех источников одновременно. Поддерживаемые провайдеры:Anthropic (platform. ai)OpenAI (Admin API)Google Gemini (generativelanguage API)Дополнительно:31 валюта (конвертация через Frankfurter API)Дневные и месячные бюджетные алертыСпарклайн расходов за 24 часаРазбивка по провайдерам с прогресс-барамиRate limits (оставшиеся токены и запросы)Два аккаунта claude.

Отраслевые последствия

ai одновременноАвтодетект org ID при посещении сайтовСтекМонорепо на Turbo + pnpm. Пакеты: core (логика расчёта стоимости, таблицы цен моделей), chrome-extension (основной продукт), заготовки под desktop, android, ios. Chrome-расширение на Manifest V3:Preact для UI (popup и settings page)Vite 6.

3 для сборкиTypeScript 5. 8Inline styles, без CSS-фреймворковКак это работает: четыре слоя1. Interceptor (page world)Файл interceptor.

Этот прогресс даёт важные сигналы о будущем отрасли, и технологический мир внимательно наблюдает.