DEV Community

Dhruv
Dhruv

Posted on

I built a Chrome extension that shows your ChatGPT token usage in real-time

Ever wonder how many tokens you've actually used in ChatGPT today? I did — and I couldn't find anything that tracked it properly, so I built one.
ChatGPT Counter is a lightweight Chrome extension that sits at the top of every ChatGPT page and tracks your daily token usage live as you chat.
What it does

📊 Real-time progress bar that updates as you type and receive responses
🎨 Color-coded warnings — Blue (normal) → Orange (approaching limit) → Red (danger zone)
🤖 Model detection — knows which model you're using (GPT-4o, o1, etc.)
📅 Plan-aware limits — tracks against your actual daily limit
🔄 Auto-resets at midnight

How it works
The extension intercepts ChatGPT's internal SSE (Server-Sent Events) API responses using a page-world injected script, reads the token counts from the stream, and accumulates them with delta-tracking so the count is always accurate across the session.
The trickiest part was getting the fetch interception to work inside ChatGPT's sandboxed environment without breaking the page — took a few iterations to get right.
Tech used

Vanilla JavaScript
Chrome Extensions Manifest V3
o200k_base tokenizer (same one OpenAI uses)
CSS for the overlay UI

Try it
⭐ GitHub: github.com/Dhruvg0/Chatgpt-token-counter
Would love any feedback or contributions!

Top comments (1)

Collapse
 
harjjotsinghh profile image
Harjot Singh

Real-time token visibility is a genuinely useful nudge - making the invisible visible changes behavior. The moment you can SEE a long conversation's token count ticking up, you naturally start new chats instead of dragging a bloated context, trim your prompts, and stop paying to re-send the whole history. The meter itself is the behavior-change tool, more than any tips article.

The clever bit with ChatGPT specifically is you're inferring usage client-side (the web UI doesn't hand you a clean token count), so the estimation/tokenizer accuracy is the interesting engineering challenge - get it close enough to be trustworthy without the official numbers. That observability-drives-better-habits effect is something I lean on in Moonshift (a multi-agent pipeline that ships a prompt to a deployed SaaS) - surfacing per-step token cost keeps the whole pipeline disciplined, not just the bill. Nice, genuinely useful extension. How are you estimating the count - a tokenizer lib client-side, or parsing something ChatGPT exposes? Accuracy vs the real billing number seems like the make-or-break for trust.