UsageLens

UsageLens is a premium-feel Chrome Extension that tracks Claude AI and Google AI Studio usage directly inside the chat interface.

It shows real-time daily and estimated monthly usage bars where you are already typing, so you do not need popups, hidden menus, or manual calculations.

Highlights

• In-chat tracker UI with animated progress bars.
• Daily usage tracking with automatic reset.
• Smart estimated monthly usage based on calendar day and usage behavior.
• Automatic limit detection when free quota messages appear.
• Smooth typing-aware bar movement for better chat UX.
• Lightweight design with local-only storage and no external APIs.

Supported Platforms

• Claude AI: https://claude.ai/
• Google AI Studio: https://aistudio.google.com/

Feature Breakdown

1) Real-Time In-Chat Tracker

• Injects a compact tracker below the chat input area.
• Shows two progress sections:
  • Daily: used out of 50
  • Estimated Month: used out of month capacity

2) Daily Usage Tracking

• Increments usage when send actions are detected.
• Daily count is capped at 50.
• Daily data resets automatically when the date changes.

3) Smart Estimated Monthly Usage

• Monthly estimate grows with usage events.

• Monthly cap is calculated dynamically:

  month limit = days in current month x 50

• This keeps the monthly meter aligned with the active calendar month.

4) Claude/Quota Limit Detection

When page text contains phrases like:

• out of free messages
• message limit reached
• try again later

UsageLens auto-adjusts counters:

• sets daily usage to full (50/50)
• sets monthly estimate to day-of-month x 50 (once per day via guard flag)

5) Typing-Aware UX Animation

• On input focus or typing, tracker shifts down smoothly.
• On blur/empty state, tracker returns to normal position.
• Keeps the chat area visually clean while composing prompts.

6) Premium Glass UI

• Glassmorphism container with blur and soft borders.
• Gradient fills and glow shadows for daily/month bars.
• Smooth transitions for width and position changes.

7) Lightweight Runtime

• No backend.
• No external network requests.
• Runs fully with content script + Chrome local storage.

Architecture

+--------------------------------------------------+
|                Chrome Extension                 |
+--------------------------------------------------+

	Manifest V3
		 |
		 v

+--------------------------+
|       content.js         |
+--------------------------+
| - Detect site            |
| - Inject tracker UI      |
| - Detect typing state    |
| - Detect send clicks     |
| - Detect quota messages  |
| - Calculate usage stats  |
+--------------------------+
		 |
		 v
+--------------------------+
| Chrome Storage (local)   |
+--------------------------+
| - usageData by site      |
| - daily/monthly values   |
| - reset markers          |
+--------------------------+
		 |
		 v
+--------------------------+
|        style.css         |
+--------------------------+
| - Glass UI               |
| - Animated bars          |
| - Typing shift effects   |
+--------------------------+
		 |
		 v
+--------------------------+
|      background.js       |
+--------------------------+
| - Alarm-based reset scan |
| - Lifecycle hooks        |
| - Optional badge count   |
+--------------------------+

Tech Stack

• JavaScript (ES6)
• Chrome Extension Manifest V3
• Chrome Storage API (chrome.storage.local)
• Chrome Alarms API
• DOM querying and UI injection
• Event-driven usage detection (click/focus/input/blur)
• CSS3 animations and glass-style UI

Permissions Used

• storage: persist usage stats locally.
• alarms: periodic reset checks.
• host permissions:
  • https://claude.ai/*
  • https://aistudio.google.com/*

Data Model

Usage is stored in chrome.storage.local under usageData:

{
	"usageData": {
		"claude": {
			"daily": 0,
			"monthly": 0,
			"lastDay": "YYYY-MM-DD",
			"lastMonth": "YYYY-M",
			"limitMarkedToday": false
		},
		"aistudio": {
			"daily": 0,
			"monthly": 0,
			"lastDay": "YYYY-MM-DD",
			"lastMonth": "YYYY-M",
			"limitMarkedToday": false
		}
	}
}

Folder Structure

usage-lens-v1/
|- icons/
|  |- icon16.png
|  |- icon48.png
|  |- icon128.png
|- release/
|  |- usage-lens-v1.crx
|- background.js
|- content.js
|- manifest.json
|- style.css
`- README.md

Installation

Method 1: Load Unpacked (Recommended)

1. Open Chrome.
2. Go to chrome://extensions.
3. Enable Developer mode.
4. Click Load unpacked.
5. Select the usage-lens-v1 folder.
6. Open Claude AI or Google AI Studio and start chatting.

Method 2: Install CRX

1. Open chrome://extensions.
2. Drag release/usage-lens-v1.crx into the page.
3. Confirm installation prompts.

If Chrome blocks CRX installation in your environment, use Method 1.

How It Works

Daily Usage Logic

• Every detected send action increments daily by 1.
• Daily value is capped at 50.
• Resets on date change.

Estimated Monthly Logic

• Increments alongside daily usage events.

• Capped at days in month x 50.

• On free-limit detection, estimate is normalized to:

  current day of month x 50

Example

• Date: 16 April
• Daily limit reached: 50/50
• Estimated month usage: 16 x 50 = 800
• April month cap: 30 x 50 = 1500

Privacy

UsageLens stores everything locally in your browser.

• No cloud sync
• No prompt/content collection
• No external API calls
• No tracking beacons

Performance Notes

• Tracker refresh and limit scan run on an interval for real-time UI updates.
• Background alarm checks reset conditions periodically.
• Designed to stay minimal and responsive in chat workflows.

Roadmap

• Weekly analytics view
• Token estimation
• Exportable usage reports
• Firefox support
• Theme customization
• Usage history charts

Author

Built by Om Kumar

Version

v1.0

License

MIT License