Я собрал бесплатный аннотатор скриншотов для браузера - нафига?

Если вы занимаетесь технической документацией, вы знаете эту боль — при описании новой фичи нужно сделать скриншот, открыть его в Snagit или Canva, а то и вовсе в «Просмотре» на Маке (упаси боже), нарисовать рамку, выноску с аннотацией, расставить стрелочки, написать текст, экспортировать, загрузить в хелп-центр...

Когда делаешь это по 50 раз в неделю, бесконечное переключение между вкладками и окнами просто вымораживает.

Когда я только начинал работать над документацией в текущей компании, старые скриншоты выглядели стандартно: классические ярко-красные стрелки и и таки же подписи. Чтобы поднять планку качества, я перетащил воркфлоу в Canva — потратил кучу времени на красивые кастомные блоки и стильные указатели. Результат был отличный, но постоянный цикл «экспорт-импорт» сжирал всю продуктивность.

В итоге я решил собрать инструмент, который решит именно эту проблему — превратит «бутылочное горлышко» в нативный и быстрый воркфлоу.

Так, в качестве пет-проекта, появился Annotator Pro.

Annotator Pro использует HTML5 Canvas API и Fabric.js, чтобы наложить невидимое «стекло» прямо поверх страницы сайта. Это позволяет мне рисовать, двигать и стилизовать элементы до того, как снять скриншот.

Чтобы интерфейс был чистым и не перекрывал саму страницу, я упаковал весь тулкит в компактное меню, которое плавает внизу экрана:

Тулкит Annotator Pro

• ✂️ Обрезка (Crop Area): Выделяем точную область страницы. Инструмент обрезает финальное изображение по этим координатам перед экспортом.
• 🔦 Фокус (Spotlight): Накладывает «киношную» тень на всю страницу, прорезая окошко над нужным элементом. Идеально убирает визуальный шум заднего плана.
• ❶ Бейджи с нумерацией (Badges): Инструмент с автоинкрементом. Клик по бейджу — «1», еще клик — «2» и так далее. Настоящий спаситель для пошаговых туториалов.
• 💬 Текст и тултипы: Стандартные текстовые блоки и направленные тултипы с умными отступами. Тултип сам рассчитывает центровку стрелки, которую можно переключать (вверх, вниз, влево, вправо).
• 🌍 AI-перевод: Если вы ведете локализованную документацию, переводить подписи к скриншотам вручную — это ад. Я интегрировал модуль перевода в один клик. Выбираете любой блок с текстом на канвасе, жмете на кнопку в меню — и вуаля, текст переведен мгновенно.

• ↗️ Стрелка: Современный закругленный шеврон. В отличие от стандартных фигур в Canvas, которые деформируются или «жиреют» при растягивании, эта стрелка пересчитывает масштаб так, чтобы указатель всегда оставался пропорциональным.
• ⬛ Цензура (Redact): Стандарт приватности. Рисует черный блок (цвет настраиваемый), чтобы мгновенно скрыть email клиентов, номера заказов или внутренние ID.
• 🟦 Рамки: Чистые настраиваемые прямоугольники. Можно крутить радиус границы для мягких углов, менять сплошную линию на пунктир и настраивать прозрачность заливки.

Глобальные и частные настройки

У каждого инструмента есть своя панель динамических настроек, которая всплывает при выборе объекта. Вместо простого выбора цвета тут независимые контролы для текста, заливки и границ.

Но мы не ограничены только «внутрянкой» скриншота. Если кликнуть по пустому фону, открываются настройки Page Frame. При экспорте расширение работает как цифровая фотолаборатория: на лету скругляет внешние углы (делая их прозрачными) и добавляет настраиваемую обертку-границу всему изображению.

Персистентный воркфлоу

Главный таймсейвер — это возможность отказа от папки «Загрузки». Я интегрировал современный Clipboard API: кнопка «Copy» обрабатывает обрезанное и оформленное изображение и шлет его прямиком в буфер обмена. Сразу в Slack, Jira или черновик статьи.

Также я сделал сессию персистентной. После копирования тулбар не исчезает, а все блоки остаются на своих местах. Если после копирования заметили опечатку в тултипе — не надо начинать заново. Благодаря chrome.storage.local расширение помнит мои любимые радиусы скругления, прозрачность и цветовые коды между сессиями.

Пошел еще дальше и добавил сохранение шаблонов. Если у вас есть специфическая раскладка бейджиков, тектовых блоков и рамок, которую вы используете регулярно, можно экспортировать канвас в легкий .json. В следующий раз просто загружаете шаблон — и все объекты встают на свои места.

Что под капотом

Технические задачи были на удивление интересными. Внедрение UI в непредсказуемую среду (например, в тяжелые админки интернет-магазинов) требует «защитной» архитектуры.

Чтобы тулбар выживал под натиском строгих скриптов безопасности (типа DOMPurify), иконки собраны на чистых CSS-масках, а не на сырых <svg>. А чтобы агрессивные глобальные стили сайта не разносили геометрию канваса, UI инжектится прямо в корень <html> с изолированным сбросом стилей.

Еще я решил классическую проблему плавающих панелей — зум браузера. Обычно зум ломает или дико масштабирует внедренные элементы. Я написал Anti-Zoom движок, который динамично вычисляет коэффициент зума (window.outerWidth / window.innerWidth) и применяет обратный CSS-скейл. В итоге меню всегда остается 100% размера, как бы сильно вы ни зумили страницу.

Установка (Developer Mode)

Проект полностью опенсорсный и уважает приватность (никаких баз данных или облачного трекинга). Если хотите покрутить его у себя в браузере, код лежит тут: Annotator Pro на GitHub.