📸 Screenshot helper extension

Лёгкое и удобное расширение для браузера, которое позволяет точно выделять и сохранять нужную область веб-страницы. Подходит как для разработчиков, так и для обычных пользователей.

---

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

• 🔲 Интерактивное выделение области экрана — выбери область, которую хочешь сохранить.
• 🧮 Точное квадратное выделение — фиксированный формат, идеально подходящий для UI-задач и контента.
• ⚠️ Предупреждение о слишком маленькой области — система подскажет, если размер мал для скрина.
• 💾 Создание скриншота выделенной зоны — изображение автоматически передаётся обратно в страницу.
• 🔁 Простая интеграция с любым веб-сайтом — управление через window.postMessage.

---

💡 Для кого

👨‍💻 Разработчикам:

• Быстрая проверка интерфейса и макетов.
• Автоматизация визуальных тестов.
• Удобное создание скриншотов компонентов и блоков.

🙋‍♀️ Пользователям:

• Сохраняй важные фрагменты веб-страниц без сторонних программ.
• Удобный инструмент для заметок, инструкций и документации.

---

⚙️ Как использовать

1. Со страницы сайта отправь сообщение:

   window.postMessage({ type: 'screenshot-start-selection' }, '*');

2. Расширение активирует режим выделения.
3. Выдели квадратную зону.
4. После завершения скриншот будет отправлен обратно:

   window.addEventListener('message', (e) => {
       if (e.data?.type === 'screenshot-selection-done') {
           console.log('Скриншот получен:', e.data.image);
       }
   });

🔐 Безопасность и приватность

Расширение разработано с учётом максимальной безопасности и прозрачности:

• ✅ Не имеет доступа к пользовательским данным, формам, паролям или куки.
• ✅ Никогда не активируется без вашего действия — плагин не «шпионит» и не сканирует страницу сам по себе.
• ✅ Запускается только по запросу через window.postMessage — никакой активности без команды с сайта.
• ✅ Не сохраняет и не отправляет изображения на серверы — весь процесс (выделение, скриншот, передача) работает локально в вашем браузере.

🧩 Как активируется

Расширение ждёт специальный сигнал от страницы:

window.postMessage({ type: 'screenshot-start-selection' }, '*');

Только после этого плагин активируется и даёт пользователю возможность выделить область. Никакая другая активность невозможна без этого вызова.

🚫 Что плагин не делает

• Не собирает телеметрию
• Не читает DOM и содержимое страниц
• Не отслеживает действия пользователя
• Не делает сетевых запросов

📦 Установка вручную

1. Склонируй репозиторий:

    git clone https://github.com/dark-dao/screenshot-helper.git

2. Установи зависимости и собери проект:

    cd screenshot-helper
    npm install
    npm run build

3. Открой chrome://extensions/ в браузере, включи “Режим разработчика” и нажми “Загрузить распакованное расширение”. Выбери папку dist.

🛠 Технологии

• TypeScript
• Chrome Extension API (Manifest V3)
• OffscreenCanvas
• Tabs API

📄 Лицензия

MIT — свободно для личного и коммерческого использования.