Building a Real-Time AI Token Cost Tracker Chrome Extension
Build a production Chrome extension that tracks OpenAI, Anthropic, and Google AI API costs in real-time. Complete guide covering request interception, token counting, cost calculation, Chrome storage, and analytics dashboards with 100% test coverage.
Prerequisites
- JavaScript fundamentals (ES6+, async/await, modules)
- Basic understanding of Chrome extensions
- Familiarity with REST APIs and JSON
- Node.js 18+ installed
What You'll Learn
- Intercept and analyze API requests in Chrome
- Calculate token counts for major AI providers
- Build Chrome extensions with Manifest V3
- Implement comprehensive Jest testing (100% coverage)
- Create data visualizations with Chart.js
- Bundle ES modules for production
Technologies Covered
As AI API usage becomes standard practice, cost tracking becomes critical. OpenAI's GPT-4 charges $30 per million input tokens, Anthropic's Claude varies by model tier, and Google's Gemini has its own pricing structure. Without visibility into token consumption, costs can spiral unexpectedly.
This tutorial builds a production-grade Chrome extension that intercepts API calls to OpenAI, Anthropic, and Google AI, counts tokens in real-time, calculates costs, and presents detailed analytics—all while maintaining 100% test coverage and following enterprise architecture patterns.
What You'll Build
By the end of this tutorial, you'll have a fully functional Chrome extension that:
- Intercepts API requests to OpenAI, Anthropic, and Google AI in real-time
- Counts tokens accurately using provider-specific algorithms
- Calculates costs with up-to-date pricing tables for all models
- Stores data locally using Chrome's storage API
- Displays analytics with popup and detailed options page
- Exports data as CSV and JSON for reporting
- Achieves 100% test coverage with 143 comprehensive tests
- Bundles for production using Rollup
Full tutorial content continues at GitHub repository
Quick Start
Clone the repository and follow the README for complete setup instructions:
git clone https://github.com/CrashBytes/ByteSizedExamples.git
cd ByteSizedExamples/ai-token-cost-tracker-2026
npm install
npm run build
Then load the dist folder as an unpacked extension in Chrome.
Key Learning Points
This tutorial covers essential Chrome extension development patterns that apply to any monitoring or analytics extension you might build.
For the complete tutorial with step-by-step implementation, testing strategies, and production deployment, visit the GitHub repository.