NeatCode - LeetCode Chrome Extension

A powerful Chrome extension that enhances your LeetCode experience with code analysis, complexity visualization, and improvement suggestions.

Features

• Code Extraction - Automatically reads your code from LeetCode's editor
• Complexity Analysis - Detects time and space complexity with explanations
• Visual Charts - Beautiful graphs showing complexity growth curves
• Error Detection - Catches common mistakes before you submit
• Better Approaches - AI-powered suggestions for optimization
• C++ Support - Full support for C++ with extensible architecture for more languages

Installation

From Source (Development)

1. Clone this repository
2. Install dependencies:

   npm install

3. Build the extension:

   npm run build

4. Load in Chrome:
   • Open chrome://extensions/
   • Enable "Developer mode"
   • Click "Load unpacked"
   • Select the dist folder

Development Mode

npm run dev

This starts Vite in watch mode with hot reload support.

Usage

1. Navigate to any LeetCode problem page
2. Click the NeatCode extension icon to open the side panel
3. Write your solution in the LeetCode editor
4. Click "Analyze Code" to get:
   • Time & Space complexity analysis
   • Visual complexity comparison chart
   • Code issues and warnings
   • Suggestions for better approaches

Configuration

Click the gear icon in the side panel or right-click the extension icon > Options to:

• Add your OpenAI API key for enhanced AI analysis
• Toggle auto-analyze on code changes
• Configure preferred language settings

Tech Stack

• TypeScript - Type-safe code
• React - UI components
• Vite - Fast builds with @crxjs/vite-plugin
• TailwindCSS - Styling
• Chart.js - Complexity visualizations
• Chrome Extension Manifest V3

Project Structure

src/
├── content/          # Content script (injected into LeetCode)
│   ├── index.ts      # Entry point
│   ├── codeExtractor.ts
│   └── problemParser.ts
├── sidepanel/        # Side panel UI
│   ├── App.tsx
│   └── components/
├── background/       # Service worker
│   ├── index.ts
│   └── aiService.ts
├── analysis/         # Code analysis engine
│   ├── index.ts
│   └── languages/    # Language-specific analyzers
├── options/          # Settings page
├── utils/            # Shared utilities
└── types/            # TypeScript definitions

Adding New Languages

The analysis engine is designed to be extensible. To add support for a new language:

1. Create a new analyzer in src/analysis/languages/
2. Extend BaseLanguageAnalyzer
3. Register it in src/analysis/index.ts

License

MIT