Я активно пользуюсь 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.claude.com + claude.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.8
Inline styles, без CSS-фреймворков

Как это работает: четыре слоя

1. Interceptor (page world)

Файл interceptor.ts компилируется отдельно и инжектируется в page world через content script как внешний <script>. Это ключевой момент: content script живёт в isolated world и не видит fetch-запросы страницы. А inline-скрипт заблокирует CSP (claude.ai и chatgpt.com имеют строгие политики). Внешний скрипт из web_accessible_resources обходит оба ограничения.

Interceptor патчит window.fetch, перехватывает ответы от API-хостов, извлекает usage (токены) и rate limit заголовки, и передаёт данные через window.postMessage.

2. Content script (isolated world)

Слушает postMessage от interceptor. Парсит URL перехваченных запросов для автоматического определения org ID. Если пользователь зашёл на claude.ai или platform.claude.com, расширение само находит идентификатор организации из URL API-вызовов. Данные пересылает в background через chrome.runtime.sendMessage.

3. Background service worker

Центральный узел. Два источника данных:

Реактивный получает события от interceptor при каждом API-запросе в реальном времени. Работает только пока открыта вкладка с AI-сервисом.

Активный опрашивает API по расписанию (chrome.alarms). Раз в N минут (настраивается) запрашивает:

platform.claude.com/api/organizations/{orgId}/usage_cost для биллинга Anthropic через browser cookies, без API-ключа
claude.ai/api/organizations/{orgId}/usage для утилизации лимитов подписки
api.openai.com Admin API для расходов OpenAI (требует admin-токен)

Стоимость считается встроенной таблицей цен для всех актуальных моделей (Opus, Sonnet, Haiku, GPT-4o, o1, Gemini Pro/Flash и другие) с учётом кэш-токенов.

Service worker обновляет badge, проверяет бюджетные лимиты и шлёт chrome.notifications при превышении.

4. Popup (Preact)

Компактный виджет 360px с кремовой палитрой (#F4EFE3 фон, #C96442 акцент). Отображает: расходы за день/неделю/месяц, спарклайн, разбивку по провайдерам, последние запросы, прогресс-бары утилизации подписки, rate limits.

Popup не хранит состояние. При каждом открытии читает chrome.storage.local.

Безопасность

Для Anthropic не нужен API-ключ вообще. Расширение использует cookie-авторизацию браузера (credentials: 'include'). Достаточно быть залогиненным на platform.claude.com.

Для OpenAI нужен admin-токен, но он хранится только в chrome.storage.local и не передаётся никуда, кроме api.openai.com. Host permissions ограничены конкретными доменами. Расширение не читает содержимое запросов, только usage metadata и заголовки rate limit.

Версия 2.0

Первая версия вышла в Chrome Web Store в конце апреля. По фидбеку от первых пользователей за несколько дней подготовил v2, которая уже отправлена на ревью:

Параллельный трекинг. API billing и subscription usage собираются одновременно, а не по выбору.
Ссылки-подсказки в настройках. Рядом с каждым полем ввода теперь ссылка на страницу, где взять нужный ключ или ID.
Исправлен автодетект org ID для claude.ai. Раньше content script пытался патчить fetch в isolated world, что принципиально не работает.

Зачем это нужно

Если вы платите за AI-API, вы наверняка хотя бы раз открывали биллинг провайдера и думали “когда я столько потратил?”. TokenToad решает одну простую задачу: вы всегда видите текущие расходы, не переключаясь ни на какой дашборд. Badge в тулбаре показывает $2.40 вместо абстрактного “всё нормально, наверное”.

Для тех, кто сидит на подписках Claude Pro/Max, есть вторая боль: непонятно, сколько лимита осталось до конца недели. TokenToad показывает это в процентах с разбивкой по моделям.

Попробуйте сами, расширение полностью бесплатное, буду рад предложениям по доработкам: Chrome Web Store: TokenToad

Пишу о разработке, AI-инструментах и автоматизации в своём Telegram-канале @popovvii. Если нужна разработка под ваш проект — пишите, если хотите следить за реальным кейсами использования ИИ в работе — читайте :)

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