🌈 GitHub Rainbow Extension

Преврати свой график контрибуций GitHub в радужную симфонию цветов!
Простейшее браузерное расширение, которое заменяет скучные зеленые квадратики на GitHub на яркую радужную палитру.

✨ Что делает расширение?

До	После
Монотонный зеленый градиент	🌈 Полная радуга от красного к фиолетовому
Статичные квадратики	✨ Анимации при наведении и клике
Базовая статистика	📊 Улучшенная статистика с иконками
Один вариант	🎨 3 цветовые схемы на выбор

🚀 Быстрый старт

Установка за 60 секунд:

# 1. Клонируйте репозиторий
git clone https://github.com/ваш-username/github-rainbow-extension.git

# 2. Перейдите в папку проекта
cd github-rainbow-extension

# 3. Установите расширение в браузер:

Для Chrome/Edge:

1. Откройте chrome://extensions/
2. Включите "Режим разработчика" (переключатель справа вверху)
3. Нажмите "Загрузить распакованное расширение"
4. Выберите папку github-rainbow-extension
5. ✅ Готово! Откройте свой GitHub профиль

Для Firefox:

1. Откройте about:debugging
2. Выберите "Этот Firefox" в меню слева
3. Нажмите "Загрузить временное дополнение"
4. Выберите файл manifest.json из папки проекта
5. 🎉 Вуаля! Ваш GitHub стал радужным

🎨 Возможности

🌈 Радужный график контрибуций

• От красного к фиолетовому - полный спектр радуги
• 10 уровней интенсивности - от 0 до 2000+ контрибуций
• Интерактивные квадратики - наведение, клики, анимации
• Автоматическое обновление - работает при навигации по GitHub

⚡ Умные функции

// Включено по умолчанию
📊 Улучшенная статистика с эмодзи
✨ Анимации при наведении
🎯 Информация о дате при клике
🔔 Всплывающие уведомления
💾 Сохранение настроек

🎨 Три цветовые темы

1. 🌈 Радужная (по умолчанию) - классическая радуга
2. 💫 Неоновая - яркие кислотные цвета
3. 🎀 Пастельная - мягкие пастельные тона

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

github-rainbow-extension/
├── 📄 manifest.json          # Конфигурация расширения
├── 🎨 icon16.png            # Маленькая иконка (16x16)
├── 🎨 icon48.png            # Средняя иконка (48x48)
├── 🎨 icon128.png           # Большая иконка (128x128)
├── 💻 content.js            # Основная логика расширения
├── 🎨 styles.css            # Стили для радужных цветов
├── 🪟 popup.html            # Попап-окно расширения
├── ⚡ popup.js              # Логика попапа
└── 📖 README.md            # Эта документация

🔧 Как это работает

Техническая магия:

/* Переопределяем стандартные цвета GitHub */
.ContributionCalendar-day[data-level="0"] {
  fill: #FFEBEE !important;  /* Вместо #ebedf0 */
}

.ContributionCalendar-day[data-level="1"] {
  fill: #FFCDD2 !important;  /* Вместо #9be9a8 */
}

.ContributionCalendar-day[data-level="2"] {
  fill: #EF9A9A !important;  /* Вместо #40c463 */
}

Ключевые технологии:

• Manifest V3 - современный стандарт расширений
• Content Scripts - внедрение кода на GitHub
• CSS !important - переопределение стилей GitHub
• Chrome Storage API - сохранение настроек пользователя
• MutationObserver - отслеживание изменений в SPA

🛠️ Разработка

Локальная разработка:

# 1. Установите расширение в режиме разработки
# 2. Внесите изменения в файлы
# 3. Обновите расширение в chrome://extensions/
# 4. Перезагрузите страницу GitHub

Отладка:

// 1. Откройте DevTools (F12) на GitHub
// 2. Перейдите на вкладку Console
// 3. Фильтруйте по "GitHub Rainbow"
// 4. Видите логи расширения

Тестирование:

• ✅ Chrome 88+
• ✅ Edge 88+
• ✅ Firefox 86+
• ✅ GitHub.com (все страницы)

🎨 Создание своих иконок

Быстрый способ (онлайн):

1. Перейдите на favicon.io
2. Создайте иконку с текстом "🌈"
3. Скачайте иконки в трех размерах
4. Замените файлы в папке проекта

Программный способ (с кодом):

# Пример создания иконки на Python с PIL
from PIL import Image, ImageDraw, ImageFont

sizes = [16, 48, 128]
for size in sizes:
    img = Image.new('RGBA', (size, size), (255, 107, 107, 255))
    draw = ImageDraw.Draw(img)
    # Добавьте текст или эмодзи
    img.save(f'icon{size}.png')

📱 Скриншоты

Попап расширения

Радужный график в действии

Анимации при наведении

🔄 Обновление расширения

Автоматически:

1. Внесите изменения в код
2. Перейдите в chrome://extensions/
3. Нажмите 🔄 "Обновить" на карточке расширения
4. Перезагрузите страницу GitHub

Вручную:

// После изменений в content.js
chrome.runtime.reload();

// Или перезагрузите расширение через DevTools
// в chrome://extensions/

🚨 Решение проблем

Проблема	Решение
Цвета не меняются	Проверьте, что расширение включено в chrome://extensions/
Кнопка не появляется	Перезагрузите страницу GitHub (F5)
Не работает на Firefox	Используйте about:debugging для временной установки
GitHub обновился	Обновите CSS селекторы в styles.css
Конфликт с другими расширениями	Отключите похожие расширения

📈 Дорожная карта развития

Версия 1.0 ✅

• Радужные цвета для графика
• Кнопка включения/выключения
• Сохранение настроек

Версия 1.1 🚧

• Больше цветовых схем
• Настройка интенсивности цветов
• Экспорт графика как картинки

Версия 2.0 📅

• Кастомизация через попап
• Аналитика активности
• Интеграция с GitHub API

🤝 Участие в разработке

Как помочь проекту:

1. 🍴 Форкните репозиторий
2. 🌿 Создайте ветку для своей фичи
3. 💻 Внесите изменения
4. ✅ Протестируйте на GitHub
5. 🔀 Создайте Pull Request

Идеи для улучшений:

• 🔧 Добавьте новые цветовые схемы
• 📱 Сделайте адаптивнее для мобильных
• 🌍 Добавьте поддержку других языков
• 🎯 Улучшите производительность
• 📊 Добавьте больше статистики

📄 Лицензия

MIT License

Copyright (c) 2024 GitHub Rainbow Extension

Разрешается свободное использование, копирование, изменение, объединение, публикация, 
распространение, сублицензирование и/или продажа копий данного программного обеспечения.

ПО ПРЕДОСТАВЛЯЕТСЯ "КАК ЕСТЬ", БЕЗ КАКИХ-ЛИБО ГАРАНТИЙ.

👨‍💻 Автор

GitHub Rainbow Extension создан с ❤️ для сообщества разработчиков.

🌟 Звезды и поддержка

Если вам нравится это расширение, поставьте звезду ⭐ на GitHub!

---

Сделайте свой GitHub профиль ярче! 🌈

"Потому что программирование должно быть не только полезным, но и красивым!" ✨

Theme-Customizer