LLM Context Manager

Chrome extension for real-time token tracking in Claude conversations.

Features

• Real-time token counting for prompts and responses
• Input/output token breakdown
• Total token calculation with configurable buffer (15%)
• Live timestamp updates

Tech Stack

• Framework: WXT (Vite-based)
• UI: React 18 with Headless UI
• Styling: UnoCSS with Lucide icons
• State: Zustand
• Testing: Vitest + Playwright
• Linting: ESLint + Prettier
• Git Hooks: Husky + lint-staged + commitlint
• Component Dev: Ladle

Development

# Install dependencies
pnpm install

# Start development mode (with hot reload)
pnpm dev

# Run tests
pnpm test

# Run E2E tests (requires build first)
pnpm build
pnpm e2e

# Component development
pnpm ladle

# Lint and format
pnpm lint
pnpm format

Building

# Build for production
pnpm build

# Create distributable zip
pnpm zip

The built extension will be in .output/chrome-mv3/.

Loading Extension in Chrome

1. Run pnpm build
2. Open Chrome and go to chrome://extensions
3. Enable "Developer mode"
4. Click "Load unpacked"
5. Select the .output/chrome-mv3 directory

Scripts

• pnpm dev - Start development with hot reload
• pnpm build - Build for production
• pnpm test - Run unit tests
• pnpm test:watch - Run tests in watch mode
• pnpm test:ui - Open test UI
• pnpm e2e - Run E2E tests
• pnpm e2e:ui - Open Playwright test UI
• pnpm ladle - Start component development server
• pnpm lint - Run ESLint
• pnpm format - Format code with Prettier

Project Structure

.
├── entrypoints/        # Extension entry points
│   ├── background.ts   # Service worker
│   ├── popup/          # Popup UI
│   └── content.ts      # Content scripts
├── components/         # React components
├── tests/             # Unit tests
├── e2e/               # E2E tests
├── wxt.config.ts      # WXT configuration
├── uno.config.ts      # UnoCSS configuration
└── tsconfig.json      # TypeScript configuration

License

MIT