I Built a Chrome Extension to Track AI Token Usage — Here's How It Works
dev.to·
Managing context windows, token consumption, and rate limits across web-based AI platforms can be challenging without native usage dashboards. This technical write-up explains the architecture of a Chrome extension designed to monitor AI token usage and estimated costs directly from active browser sessions without requiring external API keys. Content scripts extract live usage data—using techniques like network request interception and DOM MutationObservers to monitor Claude's internal state—and transmit metrics to a background service worker using chrome.runtime.sendMessage. The service worker aggregates metrics into chrome.storage.local to trigger alert thresholds and render historical stats. For JavaScript developers interested in browser extensions and AI engineering craft, it provides a practical template for building non-intrusive client-side monitoring tools.