Как собирать правки по сайту без скриншотов в мессенджере
Обычно правки по сайту выглядят так: заказчик делает скриншот, обводит место красным и пишет в мессенджер «вот тут поменять». Разработчик потом ищет, на какой это странице и какой именно блок имелся в виду. При двадцати правках на это уходит больше времени, чем на сами правки.
Review Widget: моё расширение для Chrome, которое решает это на стороне того, кто смотрит сайт: элемент отмечается прямо на странице, а разработчик получает готовый список с точным адресом каждого элемента в коде.
Как это работает
- Включить расширение кликом по иконке на нужном сайте.
- Навести курсор: элемент под ним подсвечивается красной рамкой.
- Кликнуть и написать комментарий: «заменить фото», «меню сделать больше».
- Перейти на другие страницы и продолжить: правки сохраняются и группируются по страницам.
- Нажать «Скопировать» и вставить список разработчику.
Что получает разработчик
- Адрес страницы для каждой группы правок.
- Точный CSS-селектор элемента: по нему элемент находится в коде за секунды, без догадок.
- Комментарий к каждой правке.
- Скриншот элемента с красной рамкой, сделанный автоматически в момент отметки.
Список копируется сразу в двух видах: простым текстом для мессенджера и в виде документа со скриншотами для Google Docs, Notion или задачника. Текстовый список, вставленный в гостевой кабинет ProjectHub, сам разбивается на отдельные задачи.
Удобства
- Панель со всеми правками: миниатюры, удаление, пауза, если нужно просто походить по сайту.
- Скриншот можно открыть крупно и скачать.
- Инструкция из пяти шагов при первом запуске.
Приватность
У расширения нет сервера. Правки и скриншоты хранятся в самом браузере и никуда не отправляются, пока пользователь сам не скопирует список.
Как устроено
Расширение для Chrome на Manifest V3: фоновый скрипт и скрипт на странице, чистый JavaScript без зависимостей. Скриншот снимается с видимой части вкладки и обрезается по элементу с полями. Расширение опубликовано в Chrome Web Store.
Скриншоты
Частые вопросы
Как заказчику показать, что поправить на сайте?
Поставить расширение, кликнуть по нужному элементу и написать комментарий. Расширение само сохранит страницу, элемент и скриншот.
Нужно ли разбираться в коде, чтобы пользоваться?
Нет. Селектор и скриншот создаются автоматически, от человека нужен только комментарий.
На каких сайтах работает расширение?
На любых обычных сайтах в Chrome и браузерах на его основе.
Отправляются ли данные куда-то?
Нет, всё хранится в браузере до момента, когда вы сами скопируете список правок.
