Claude Usage Bar Colorizer Browser Extension Built with Claude Code

A developer has created a browser extension called Claude Usage Bar Colorizer that provides visual indicators for Claude usage limits. The extension was built using Claude Code to assist with development.

What the Extension Does

• Recolors the usage bars from green to yellow to red based on the current percentage
• Adds a popup with live usage data
• Allows users to tweak thresholds and colors
• Lets users toggle individual bars on or off

Implementation Details

• Only runs on https://claude.ai/settings/usage
• No analytics collection
• No external network requests
• Only reads the usage percentages already visible on the page
• Settings are stored locally in browser sync storage

Claude Code's Role

The developer used Claude Code to help with:

• The content script logic for reading and recoloring the bars
• The popup UI and settings flow
• Narrowing permissions so the extension only runs on the usage page
• Cleaning up the project for release and store submission

Development Insights

The developer noted learning about keeping browser extension permissions tight and making the popup update cleanly without breaking user toggles.

Availability

• GitHub repository: https://github.com/mihneaptu/claude-usage-bar-colors
• Latest release: v1.0.1 at https://github.com/mihneaptu/claude-usage-bar-colors/releases/tag/v1.0.1
• Microsoft Edge Add-ons submission is currently in review
• The extension can be tried by loading it unpacked in Edge or another Chromium browser