Code Detector - Chrome Extension

A Chrome extension that captures screenshots and extracts code using Google Gemini Vision API.

Features

• Screenshot Capture: Select any area of your screen to capture
• AI Vision Analysis: Uses Google Gemini Vision API to directly analyze images
• Smart Code Detection: Automatically detects and extracts code with auto-completion
• Copy to Clipboard: Easy one-click copy of detected code
• Fast Processing: Single API call for instant results

How It Works

1. Click "Capture Screenshot" button
2. Select the area containing code on your screen
3. Gemini Vision API analyzes the image and extracts code
4. Detected code is displayed with formatting
5. Copy to clipboard with one click

Note: No OCR preprocessing needed - Gemini's vision model directly understands code in images!

Installation

Prerequisites

• Node.js (v16 or higher)
• npm or yarn
• Google Gemini API key (Get it free here)

Setup

1. Clone the repository

   git clone <repository-url>
   cd code_detector

2. Install dependencies

   npm install

3. Configure API Key

   • Copy .env.example to .env:

     cp .env.example .env

   • Open .env and add your Gemini API key:

     VITE_GEMINI_API_KEY=your_actual_api_key_here
     

   • Important: Never commit the .env file to version control!

4. Build the extension

   npm run build

5. Load in Chrome

   • Open Chrome and go to chrome://extensions/
   • Enable "Developer mode" (toggle in top right)
   • Click "Load unpacked"
   • Select the dist folder from this project

6. Start using

   • Click the extension icon to open the popup
   • Capture any code visible on your screen

Usage

1. Click the extension icon in Chrome toolbar
2. Click "📸 Capture Screenshot"
3. Drag to select the area with code
4. Wait for AI analysis (2-5 seconds)
5. View and copy the detected code

Configuration

Environment Variables

The extension requires a Gemini API key to function. This is stored in a .env file:

VITE_GEMINI_API_KEY=your_api_key_here

Getting your API key:

1. Visit Google AI Studio
2. Sign in with your Google account
3. Create a new API key
4. Copy the key to your .env file

Security Note:

• The .env file is ignored by git and should never be committed
• Use .env.example as a template for other developers
• Keep your API key private and secure

Tech Stack

• React 19
• Vite
• Google Gemini 2.0 Flash (Vision API)
• Chrome Extension Manifest V3

Development

# Install dependencies
npm install

# Build for production
npm run build

# Run linter
npm run lint

Architecture

• App.jsx: Main application component with screenshot capture logic
• ScreenshotCapture.jsx: Handles area selection and image capture
• GeminiService.js: Sends images to Gemini Vision API for code detection
• CodeEditor.jsx: Displays detected code with copy functionality
• background.js: Handles screenshot capture via Chrome API

Why Gemini Vision?

✅ Faster: Single API call vs OCR + text analysis ✅ More Accurate: Vision model understands code structure and context ✅ Auto-completion: Can fix incomplete or partially visible code ✅ No OCR Dependency: Direct image-to-code extraction ✅ Better Error Handling: Clearer feedback on detection issues