Code Explainer - Chrome Extension

An AI-powered code explanation tool with a modern dark AMOLED interface using z.ai models.

Features

• 🌙 Dark AMOLED Design: Pure black interface with green accent colors
• 🤖 z.ai Integration: Dynamic model fetching and AI-powered explanations
• 💬 Modern Chat Interface: Clean, responsive popup design
• 🎯 Smart Language Detection: Automatically detects 15+ programming languages
• 📚 Persistent History: Save and manage your code explanations
• ⚡ Fast & Responsive: Real-time explanations with loading indicators
• 🔧 Fully Functional Settings: Complete API configuration and model management

Installation

Development Setup

1. Clone or download the extension
2. Install dependencies:

   npm install
   

3. Start development server:

   npm run dev
   

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

Manual Installation

1. Download the extension files
2. Go to chrome://extensions/
3. Enable "Developer mode"
4. Click "Load unpacked"
5. Select the extension folder

Configuration

API Setup

1. Open extension options:

   • Right-click extension icon → Options
   • Or visit chrome://extensions/ → Extension details → Extension options

2. Your z.ai API key is pre-configured with the provided key

3. Test the connection to verify everything works

Dynamic Model Loading

The extension automatically fetches available models from the z.ai API:

• Models are cached for 1 hour
• Click "Refresh Models" to update the list
• Model information includes ID and description

Usage

Method 1: Context Menu (Recommended)

1. Navigate to any webpage with code
2. Select code with your mouse
3. Right-click and select "Explain Selected Code"
4. View explanation in the popup interface

Method 2: Direct Input

1. Click the extension icon in the toolbar
2. Paste your code directly into the chat interface
3. Select your preferred explanation level
4. Click "Explain Code" to get analysis

Method 3: History Management

1. Open extension options
2. View your previously explained code snippets
3. Click any item to copy it back to the input
4. Clear history or export data as needed

Explanation Levels

• Simple: Beginner-friendly explanations focusing on what the code does
• Detailed: Comprehensive analysis covering functionality and patterns
• Technical: In-depth technical analysis with implementation details

Supported Languages

• JavaScript/TypeScript
• Python
• Java
• C/C++
• HTML/CSS
• PHP
• Go
• Rust
• C#
• Swift
• Kotlin
• Ruby
• And more!

Architecture

code-explainer/
├── manifest.json          # Extension configuration
├── background.js          # Service worker with z.ai integration
├── content.js             # Content script with language detection
├── popup/                 # Dark AMOLED chat interface
│   ├── popup.html         # Main UI
│   └── popup.js           # UI logic
├── options.html/js        # Full-featured settings page
├── icons/                 # SVG icons
└── dist/                  # Built extension files

Development

Building for Production

npm run build

This creates a dist folder with optimized files ready for distribution.

Development Commands

npm run dev    # Start development server
npm run build  # Build for production
npm run lint   # Run linting

Security

• API keys are stored securely in Chrome's storage
• All communication with z.ai API uses HTTPS
• Input sanitization prevents XSS attacks
• No external dependencies except z.ai API

Privacy

• Code snippets are only sent to z.ai API for analysis
• History is stored locally and can be cleared anytime
• No telemetry or analytics data is collected
• Full control over your data

Troubleshooting

Common Issues

API Key Not Working

• Verify your z.ai API key is correct
• Check internet connection
• Ensure the API key has proper permissions

Context Menu Not Showing

• Reload the extension in chrome://extensions/
• Ensure the extension has proper permissions
• Try refreshing the webpage

Popup Not Opening

• Check that popup.html exists and is valid
• Verify the extension is properly installed
• Check browser console for errors

Debug Mode

1. Open Chrome DevTools
2. Go to Application → Service Workers
3. Enable "Show service workers" and "Override service worker"
4. Reload the extension to see console logs

z.ai API Integration

The extension uses z.ai's OpenAI-compatible API endpoints:

• Base URL: https://api.zai.com
• Authentication: Bearer token in headers
• Models: Dynamically fetched from /v1/models
• Chat: /v1/chat/completions endpoint

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

License

MIT License - see LICENSE file for details

Support

For issues and feature requests:

• Check the troubleshooting section
• Review browser console for errors
• Create an issue in the repository

---

Built with ❤️ using Chrome Extension APIs, Vite, and z.ai AI integration.