Как работает SiteAnnotation

Захват

Нажмите значок SiteAnnotation на панели Chrome. Рядом со страницей откроется боковая панель, и расширение получит доступ к этой вкладке. Затем выберите один из пяти режимов:

Три режима есть и в контекстном меню: щелкните страницу правой кнопкой и выберите «Область» или «Блок», либо выделите текст и выберите «Текст». У четырех действий есть горячие клавиши по умолчанию, они в таблице ниже. Подробнее о скриншоте всей страницы и захвате элемента с HTML и CSS.

Доказательство

Каждый захват становится пунктом отчета. Рядом с изображением или текстом пункт хранит:

• адрес и заголовок страницы;
• время захвата, размер окна и версию браузера;
• для блока: CSS-селектор, XPath, HTML (до 50 КБ) и CSS-правила, которые к нему применяются, те же, что показывает DevTools;
• ваш комментарий.

Разработчик, открыв отчет, видит, о какой странице, каком элементе и каких правилах речь, и ему не нужно сначала воспроизводить проблему. Как собираются CSS-правила.

Пометки

Откройте скриншот в редакторе, чтобы сделать пометки. Инструменты:

• Стрелка и Прямоугольник, чтобы указать на проблему;
• Текст для короткой подписи на изображении;
• Номер для пронумерованных меток, когда на одном скриншоте несколько замечаний;
• Размытие, чтобы скрыть почту, имена, цены и все, чем не хотите делиться;
• Обрезка, чтобы оставить только важную часть.

Каждая пометка лежит в отдельном слое: ее можно выбрать, сдвинуть или удалить позже, а последнее действие можно отменить. Подробнее о разметке скриншотов.

Отчет

Пункты попадают в текущий отчет в порядке захвата и получают номера #1, #2, #3. В боковой панели пункты можно перетаскивать, править комментарии, переносить пункт в другой отчет или удалять.

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

Одновременно хранится до 3 отчетов. Чтобы начать четвертый, выгрузите или сохраните резервную копию ненужного и удалите его. Резервная копия это файл .zip со всем содержимым отчета; восстановите ее позже в этом же или другом браузере, и она вернется новым отчетом.

Экспорт

Выгрузите отчет в формате, который получатель уже умеет открывать:

Номера пунктов сохраняются во всех форматах, поэтому «см. #4» значит одно и то же и в PDF, и в Word.

Доступ и приватность

SiteAnnotation не читает ваши страницы в фоне. Расширение использует разрешение Chrome activeTab: доступ к вкладке появляется, когда вы нажимаете значок расширения или его горячую клавишу на этой вкладке, и заканчивается, когда вы уходите с сайта.

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

Некоторые страницы снять нельзя совсем, потому что Chrome не пускает на них расширения:

• страницы chrome://, настройки, новая вкладка и исходный код страницы;
• страницы Chrome Web Store;
• встроенный просмотрщик PDF, страницы ошибок и страницы, закрытые политикой администратора.

Локальные файлы (file://) работают, если включить Разрешить доступ к URL файлов на странице расширения в chrome://extensions.

Маскирование. Значения полей форм, токены, ключи, идентификаторы сессий и секретные параметры адресов в захваченном HTML, атрибутах и адресе страницы заменяются на •••. Маскирование включено по умолчанию и выключается в настройках. Скриншоты не маскируются: то, что видно на изображении, скройте инструментом «Размытие».

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

Горячие клавиши

Chrome разрешает расширению задать клавиши по умолчанию не больше чем для четырех команд, поэтому у «Вся страница» и «Данные страницы» их нет. Чтобы назначить или поменять любое сочетание, наберите в адресной строке chrome://extensions/shortcuts (вручную: ссылки на страницы Chrome с сайтов не открываются). На Mac клавиша Alt называется Option.