Quick Pins — расширение для Chrome

Минималистичный менеджер ссылок во всплывающем окне. Сохраняет URL с подписью, отображает favicon, хранит данные в chrome.storage.sync, поэтому ссылки синхронизируются между браузерами под одним аккаунтом.

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

• 🚀 Быстрое добавление ссылок с подписями
• 🎨 Автоматическое отображение favicon сайтов
• 🔄 Синхронизация между устройствами через Chrome Sync
• 📱 Адаптивный интерфейс с прокруткой
• 🗑️ Простое удаление ссылок одним кликом
• 🔒 Локальное хранение данных (без отправки на серверы)

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

extention_for_chrome/
├── manifest.json          # Конфигурация расширения (Manifest V3)
├── popup.html             # Разметка всплывающего окна
├── popup.js               # Логика добавления/удаления ссылок
├── styles.css             # Стили интерфейса
├── icons/                 # Иконки расширения (16, 48, 128px)
│   ├── icon16.png
│   ├── icon48.png
│   └── icon128.png
├── PRIVACY_POLICY.md      # Политика конфиденциальности
├── PUBLISH_GUIDE.md       # Руководство по публикации в Chrome Web Store
├── prepare-zip.bat        # Скрипт для создания ZIP-архива (Windows)
├── prepare-zip.sh         # Скрипт для создания ZIP-архива (Linux/Mac)
└── README.md              # Этот файл

🚀 Установка в Chrome (режим разработчика)

1. Скачайте папку проекта целиком (или склонируйте репозиторий).

2. Важно: Создайте иконки в папке icons/:

   • icon16.png (16×16 пикселей)
   • icon48.png (48×48 пикселей)
   • icon128.png (128×128 пикселей)

   Если иконок нет, расширение будет работать, но без иконки в панели инструментов.

3. Откройте chrome://extensions/ в Chrome.

4. Включите Режим разработчика (правый верхний угол).

5. Нажмите Загрузить распакованное → выберите папку проекта.

6. Иконка расширения появится в панели. Закрепите её через меню Extensions.

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

1. Откройте всплывающее окно (иконка «Quick Pins»).
2. В поле URL вставьте адрес сайта (например, https://example.com).
3. В поле Подпись (необязательно) добавьте название ссылки.
4. Нажмите «Добавить». Ссылка появится в списке с favicon сайта.
5. Клик по ссылке открывает сайт в новой вкладке.
6. Кнопка «✕» удаляет ссылку из списка.

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

• При инициализации popup.js загружает сохраненные ссылки из chrome.storage.sync и отображает их.
• При добавлении новой ссылки она сохраняется в начало списка (дубликаты автоматически удаляются).
• Данные хранятся в синхронизированном хранилище Chrome, поэтому доступны на всех устройствах с одним аккаунтом.
• Для отображения favicon используется публичный сервис Google (/s2/favicons) по домену сайта.

🎨 Особенности интерфейса

• Адаптивная высота: Окно автоматически подстраивается под количество ссылок (от 200px до 600px).
• Прокрутка: При большом количестве ссылок появляется кастомный скроллбар.
• Современный дизайн: Градиентный фон, размытие (backdrop-filter), плавные анимации.
• Удобная навигация: Все ссылки видны, длинные URL обрезаются с многоточием.

📦 Подготовка к публикации в Chrome Web Store

Быстрый старт:

1. Создайте иконки (если еще не созданы):

   • Используйте онлайн-сервисы: favicon.io, realfavicongenerator.net
   • Или графические редакторы: Figma, Photoshop, GIMP

2. Опубликуйте Privacy Policy:

   • Загрузите PRIVACY_POLICY.md на GitHub Gist, GitHub Pages или другой сервис
   • Получите публичную ссылку (понадобится при загрузке в магазин)

3. Создайте ZIP-архив:

   • Windows: запустите prepare-zip.bat
   • Linux/Mac: запустите prepare-zip.sh
   • Или вручную: заархивируйте файлы manifest.json, popup.html, popup.js, styles.css и папку icons/

4. Зарегистрируйтесь как разработчик:

   • Перейдите на Chrome Web Store Developer Dashboard
   • Оплатите единоразовый взнос $5
   • Загрузите архив и заполните форму

Подробная инструкция: См. PUBLISH_GUIDE.md

🔒 Конфиденциальность

Расширение использует только chrome.storage.sync для хранения ваших ссылок. Данные:

• Хранятся локально в браузере
• Синхронизируются через Chrome Sync (если включено)
• НЕ отправляются на внешние серверы
• НЕ собирают аналитику или личную информацию

Подробнее: PRIVACY_POLICY.md

🛠️ Кастомизация

• Цвета и стили: Измените палитру в styles.css
• Размеры: Настройте ширину окна, отступы, размеры шрифтов
• Функционал: Можно добавить:
  • Drag-and-drop для изменения порядка ссылок
  • Авто-подстановку текущей вкладки (требует tabs и activeTab permissions)
  • Группировку ссылок по категориям
  • Экспорт/импорт ссылок

📝 Технические детали

• Manifest Version: 3 (соответствует требованиям Chrome Web Store)
• Permissions: storage (для сохранения ссылок)
• Storage: chrome.storage.sync (синхронизация между устройствами)
• Favicon API: Google Favicon Service (/s2/favicons)

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

• Документация Manifest V3
• Chrome Web Store Developer Dashboard
• Руководство по публикации расширений
• Обзорное руководство (статья с Habr)

📄 Лицензия

См. файл LICENSE (если есть)

---

Версия: 1.0.0
Последнее обновление: 2024