🚀 Code Helper - AI Programming Assistant

Chrome-расширение для автоматического анализа задач программирования с помощью Google Gemini AI

📋 Описание

Code Helper - это умное Chrome-расширение, которое автоматически обнаруживает код на веб-страницах и предоставляет подсказки, объяснения и рекомендации через Google Gemini AI. Расширение работает полностью на фронтенде, без необходимости в backend-сервере.

✨ Основные возможности

• 🔍 Автоматическое обнаружение кода - детектирует блоки кода на любых веб-страницах
• 🤖 AI-анализ с Gemini - получайте мгновенные подсказки и объяснения
• 💡 Множество режимов анализа:
  • Объяснение кода
  • Оптимизация
  • Поиск ошибок
  • Решение задач
• 🎨 Современный UI - React + TailwindCSS
• 🔒 Безопасность - работает только в popup, не вмешивается в страницы
• 🌐 Поддержка множества языков - JavaScript, Python, Java, C++, и другие

🛠️ Технологический стек

• Frontend: React 18 + TypeScript
• Styling: TailwindCSS
• Build Tool: Vite
• AI API: Google Gemini Pro
• Icons: Lucide React
• Chrome APIs: Manifest V3

📦 Установка и запуск

Предварительные требования

• Node.js 18+
• npm или yarn
• Google Chrome браузер
• Gemini API ключ (получить здесь)

Шаги установки

1. Клонируйте проект

cd code-helper-chrome-extension

2. Установите зависимости

npm install

3. Соберите проект

npm run build

4. Загрузите расширение в Chrome

   • Откройте chrome://extensions/
   • Включите "Режим разработчика" (Developer mode)
   • Нажмите "Загрузить распакованное расширение" (Load unpacked)
   • Выберите папку dist в проекте

5. Настройте API ключ

   • Кликните на иконку расширения
   • Введите ваш Gemini API ключ
   • Готово!

🎯 Использование

1. Откройте любую страницу с кодом (LeetCode, GitHub, StackOverflow и т.д.)
2. Расширение автоматически обнаружит код на странице
3. Кликните на иконку расширения
4. Выберите блок кода для анализа
5. Выберите тип анализа:
   • Объяснить - получите подробное объяснение кода
   • Оптимизировать - узнайте, как улучшить код
   • Дебаг - найдите возможные ошибки

📁 Структура проекта

code-helper-chrome-extension/
├── src/
│   ├── components/          # React компоненты
│   │   ├── ApiKeySetup.tsx  # Настройка API ключа
│   │   └── CodeAnalyzer.tsx # Анализатор кода
│   ├── content_scripts/     # Content scripts
│   │   └── index.js         # Детектор кода на странице
│   ├── background/          # Background service worker
│   │   └── index.js         # Обработчик фоновых задач
│   ├── services/            # Сервисы
│   │   └── gemini.js        # Gemini API клиент
│   ├── hooks/               # React hooks
│   │   ├── useGemini.js     # Hook для работы с AI
│   │   └── usePageAnalysis.js # Hook для анализа страницы
│   ├── utils/               # Утилиты
│   │   ├── codeFormatter.js # Форматирование кода
│   │   └── storage.js       # Работа с Chrome Storage
│   ├── types/               # TypeScript типы
│   │   └── index.ts         # Определения типов
│   └── popup/               # Popup окно
│       ├── App.tsx          # Главный компонент
│       ├── main.tsx         # Точка входа
│       └── index.css        # Стили
├── public/                  # Публичные файлы
│   └── icons/               # Иконки расширения
├── manifest.json            # Chrome extension manifest
├── vite.config.js           # Конфигурация Vite
├── tailwind.config.js       # Конфигурация Tailwind
├── tsconfig.json            # TypeScript конфигурация
├── package.json             # Зависимости проекта
└── README.md                # Документация

🔧 Разработка

Режим разработки с hot reload

npm run dev

Сборка production версии

npm run build

Watch mode для разработки

npm run watch

🧩 Архитектура

Content Script

• Внедряется на все веб-страницы
• Детектирует блоки кода через DOM
• Анализирует CodeMirror, Monaco Editor и обычные <code> теги
• Определяет язык программирования
• Отправляет данные в popup через Chrome API

Popup

• React приложение с современным UI
• Отображает найденные блоки кода
• Взаимодействует с Gemini API
• Показывает результаты анализа
• Управляет API ключом

Background Service Worker

• Управляет иконкой расширения
• Обрабатывает установку/обновление
• Координирует обмен сообщениями

Gemini Service

• Прямые вызовы Gemini API
• Обработка ошибок и retry логика
• Кэширование API ключа
• Различные типы промптов для анализа

🔒 Безопасность

• API ключ хранится в chrome.storage.sync (зашифрован Chrome)
• Расширение не внедряет код в поля ввода сайтов
• Все подсказки отображаются только в popup
• Работает по принципу "read-only" на страницах
• Соответствует Chrome Web Store политикам

🌐 SEO оптимизация

Расширение оптимизировано для Chrome Web Store:

• Полное описание функционала
• Ключевые слова: code assistant, programming helper, AI coding
• Screenshots в высоком разрешении
• Детальная документация
• Примеры использования

📝 Комментарии в коде

Каждый файл содержит подробные комментарии:

• Описание назначения файла
• JSDoc комментарии для функций
• Объяснение сложной логики
• TypeScript типы для всех данных

🤝 Вклад в проект

Приветствуются pull requests! Для крупных изменений:

1. Откройте issue для обсуждения
2. Создайте feature branch
3. Напишите тесты (если применимо)
4. Отправьте pull request

📄 Лицензия

MIT License - свободное использование

🔗 Полезные ссылки

• Google Gemini API Documentation
• Chrome Extension Development
• React Documentation
• TailwindCSS
• Vite

🐛 Известные проблемы

• Некоторые динамические редакторы кода могут требовать обновления анализа
• API ключ должен быть настроен перед первым использованием
• Ограничения Gemini API (RPM/TPM) могут влиять на скорость

🚀 Будущие улучшения

• Поддержка side panel API
• История анализов
• Экспорт результатов
• Настройки промптов
• Темная тема
• Мультиязычность интерфейса

💬 Поддержка

Если у вас возникли проблемы или вопросы:

1. Проверьте Issues
2. Создайте новый Issue с описанием проблемы
3. Приложите скриншоты (если возможно)

---

Создано с ❤️ для разработчиков, разработчиками