{"slug": "i-built-a-chrome-extension-that-shows-your-chatgpt-token-usage-in-real-time", "title": "I built a Chrome extension that shows your ChatGPT token usage in real-time", "summary": "A developer built a Chrome extension called ChatGPT Counter that displays real-time token usage directly on ChatGPT pages. The extension intercepts ChatGPT's internal SSE API responses to track token counts, showing a color-coded progress bar that updates as users type and receive responses. It automatically detects the model in use and tracks against the user's actual daily limit, resetting at midnight.", "body_md": "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.\n\nChatGPT 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.\n\nWhat it does\n\n📊 Real-time progress bar that updates as you type and receive responses\n\n🎨 Color-coded warnings — Blue (normal) → Orange (approaching limit) → Red (danger zone)\n\n🤖 Model detection — knows which model you're using (GPT-4o, o1, etc.)\n\n📅 Plan-aware limits — tracks against your actual daily limit\n\n🔄 Auto-resets at midnight\n\nHow it works\n\nThe 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.\n\nThe 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.\n\nTech used\n\nVanilla JavaScript\n\nChrome Extensions Manifest V3\n\no200k_base tokenizer (same one OpenAI uses)\n\nCSS for the overlay UI\n\nTry it\n\n⭐ GitHub: [github.com/Dhruvg0/Chatgpt-token-counter](https://github.com/Dhruvg0/Chatgpt-token-counter)\n\nWould love any feedback or contributions!", "url": "https://wpnews.pro/news/i-built-a-chrome-extension-that-shows-your-chatgpt-token-usage-in-real-time", "canonical_source": "https://dev.to/dhruv_puri/i-built-a-chrome-extension-that-shows-your-chatgpt-token-usage-in-real-time-2lgn", "published_at": "2026-05-31 05:20:51+00:00", "updated_at": "2026-05-31 05:41:52.222565+00:00", "lang": "en", "topics": ["ai-tools", "ai-products", "large-language-models", "generative-ai", "natural-language-processing"], "entities": ["ChatGPT", "ChatGPT Counter", "GitHub", "Dhruvg0", "GPT-4o", "o1", "Chrome", "Manifest V3"], "alternates": {"html": "https://wpnews.pro/news/i-built-a-chrome-extension-that-shows-your-chatgpt-token-usage-in-real-time", "markdown": "https://wpnews.pro/news/i-built-a-chrome-extension-that-shows-your-chatgpt-token-usage-in-real-time.md", "text": "https://wpnews.pro/news/i-built-a-chrome-extension-that-shows-your-chatgpt-token-usage-in-real-time.txt", "jsonld": "https://wpnews.pro/news/i-built-a-chrome-extension-that-shows-your-chatgpt-token-usage-in-real-time.jsonld"}}