A Chrome extension that provides visual feedback on your Claude.ai usage efficiency with color-coded indicators showing whether you're pacing your usage optimally.
- Visual Usage Indicators: Circular progress indicators show your usage efficiency at a glance
- Color-Coded Feedback:
- Green: Usage below expected - you have room to use more Claude!
- Yellow: On track - your usage is perfectly paced
- Red: Usage above expected - consider pacing yourself
- Dark Mode Support: Automatically adapts to your system's color scheme
- Privacy First: All processing happens locally - no data leaves your browser
- Visit the Claude Usage Tracker on Chrome Web Store
- Click "Add to Chrome"
- Confirm the installation
-
Clone this repository:
git clone https://github.com/yourusername/claude-usage-tracker.git cd claude-usage-tracker -
Install dependencies:
npm install
-
Build the extension:
npm run build
-
Load in Chrome:
- Open Chrome and navigate to
chrome://extensions/ - Enable "Developer mode" (toggle in top right)
- Click "Load unpacked"
- Select the
distfolder from this project
- Open Chrome and navigate to
- Install the extension
- Navigate to your Claude.ai account: claude.ai/settings/usage
- The usage efficiency indicator will appear on the page
- Hover over the indicator for detailed information
The extension calculates your usage efficiency by comparing your actual usage to the expected usage based on the current time of day. This helps you understand if you're pacing your Claude usage optimally throughout your billing period.
| Color | Delta | Meaning |
|---|---|---|
| Green | Below -10% | You're using less than expected - feel free to use more! |
| Yellow | -10% to +10% | You're right on track with optimal pacing |
| Red | Above +10% | Usage is higher than expected - consider pacing |
- Node.js 18 or higher
- npm
# Install dependencies
npm install
# Start development build (with watch mode)
npm run dev
# Run type checking
npm run type-check
# Run tests
npm test# Build the extension
npm run build
# Package for Chrome Web Store
npm run package# Convert SVG icons to PNG
npm run generate-iconsclaude-usage-tracker/
├── public/
│ ├── manifest.json # Extension manifest
│ ├── content.css # Injected styles
│ └── icons/ # Extension icons
├── src/
│ ├── components/ # UI components
│ ├── content/ # Content script entry
│ ├── styles/ # Component styles
│ └── utils/ # Utility functions
├── scripts/
│ └── generate-icons.js # Icon generation script
├── promotional/ # Chrome Web Store materials
├── dist/ # Build output
└── tests/ # Test files
Claude Usage Tracker is designed with privacy as a core principle:
- No data collection: We don't collect any personal information
- Local processing: All calculations happen in your browser
- No external requests: The extension never contacts external servers
- No analytics: We don't track how you use the extension
For complete details, see our Privacy Policy.
The extension requires minimal permissions:
activeTab: Access the current tab when on Claude.aiscripting: Inject the indicator UI on the usage pagehttps://claude.ai/*: Only operates on Claude.ai pages
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Initial release
- Circular usage efficiency indicators
- Color-coded feedback (green/yellow/red)
- Dark mode support
- Privacy-focused design
Made with care for the Claude.ai community