🧠 Code Explainer — Chrome Extension

A sleek Chrome extension that lets you select any code snippet on any webpage and get a beautiful, AI-powered line-by-line explanation using Google's Gemini API.

---

✨ Features

• Select & Explain — Highlight code on any page → click the extension → get a full explanation
• Line-by-Line Breakdown — Each line/block explained with what it does and why
• Language Detection — Auto-detects the programming language (Python, JS, Java, C++, etc.)
• Difficulty Rating — Color-coded badges: 🟢 Beginner / 🟡 Intermediate / 🔴 Advanced
• Concept Tags — Tags like recursion, async/await, API call, regex, etc.
• Potential Issues — Highlights bugs, improvements, or best practice notes
• Right-Click Context Menu — Right-click selected code → "🧠 Explain this code"
• Copy as Markdown — One-click copy the full explanation
• Follow-Up Chat — Ask questions about the code like a mini AI tutor ("What does line 3 do?", "How can I simplify this?")
• Dark Theme UI — Beautiful dark interface with blue accents and JetBrains Mono font

---

🚀 Installation

1. Clone this repository:

   git clone https://github.com/BavyaBalakrishnan/code-explainer.git

2. Open Chrome and go to chrome://extensions

3. Enable Developer mode (toggle in the top right)

4. Click "Load unpacked"

5. Select the cloned code-explainer folder

6. The extension icon (🧠) will appear in your Chrome toolbar

---

🔑 Setup

1. Get a free Gemini API key from Google AI Studio
2. Click the extension icon
3. Paste your API key (it's saved locally and never shared)
4. You're ready to go!

---

🎯 How to Use

Method 1 — Popup

1. Go to any webpage with code (GitHub, StackOverflow, MDN, blogs, etc.)
2. Highlight/select a code snippet
3. Click the extension icon in the toolbar
4. Click "✨ Explain This Code"

Method 2 — Right-Click

1. Select code on any webpage
2. Right-click → "🧠 Explain this code"
3. Click the extension icon to see the explanation

---

📖 What You Get

Section	Description
Language	Auto-detected programming language
Difficulty	Beginner / Intermediate / Advanced
Summary	1-2 sentence overview of the code
Concepts	Programming concepts used (e.g., recursion, closures)
Line-by-Line	Numbered breakdown with explanation for each line
Issues	Bugs, improvements, or best practice suggestions

---

🏗️ Project Structure

code-explainer/
├── manifest.json      # Chrome extension config (Manifest V3)
├── background.js      # Service worker — right-click context menu
├── content.js         # Content script — captures selected text
├── content.css        # Toast notification styles
├── popup.html         # Main UI layout
├── popup.css          # Dark theme styles
└── popup.js           # Core logic — Gemini API + rendering

---

🛠️ Tech Stack

• Chrome Extension Manifest V3
• Google Gemini API (gemini-3.1-flash-lite-preview)
• Vanilla JS — No frameworks, no dependencies
• CSS3 — Custom dark theme with animations
• Google Fonts — Inter + JetBrains Mono

---

📝 License

MIT License — feel free to use, modify, and distribute.

---

🤝 Contributing

Pull requests are welcome! For major changes, please open an issue first to discuss.

---

Built with ❤️ and Gemini AI