Браузерное расширение AT helper
Автор: Егор МихнегерНаписал небольшое браузерное расширение «AT helper» для более удобной работы с Author.Today.
Возможности:
1. Позволяет установить тёмную тему (работает только в Полной версии сайта).
2. Авторы могут видеть изменения в показателях своих книг (на странице https://author.today/u/{your_profile_name}/works/edit).
3. Читатели могут отмечать в процессе чтения опечатки, а затем сообщать о них автору.
Также планирую добавить возможность оставлять отметки о пользователях портала, чтобы было удобнее ориентироваться в списке друзей или, наоборот, чёрном списке.
А теперь обо всём поподробнее.
Начнём с того, что браузерные расширения — это встроенные в браузер мини-программы, которые добавляют новые возможности. Вероятно, самые популярные расширения — это блокировщики вездесущей рекламы, если вы никогда ими не пользовались, то самое время начать)) Большинство расширений влияют на работу всех вкладок вашего браузера, но есть и такие, которые ориентированы на работу с конкретными сайтами. AT helper, как не трудно догадаться, как раз из подобных мини-программ.
Установка расширений обычно не вызывает особых трудностей, у всех современных браузеров есть каталог прошедших проверку расширений так же, как и возможность установить расширение из файлов на диске. Ниже будут подробные инструкции, как это можно сделать в самых популярных браузерах.
Что касается безопасности этого расширения, то его исходный код доступен на Github (https://github.com/emikhno/AT-helper), можете проверить сами или попросить взглянуть знакомого программиста. Также код прошёл проверку модераторами браузера Firefox.
Тёмная тема
Давно напрашивающаяся возможность, которую разработчики Author.Today не спешат реализовать, и теперь я понимаю почему. CSS— язык описания внешнего вида веб-страницы — на АТ не заточен под работу с наследованием стилей и имеет много жёстко заданных значений для разных элементов на сайте. Переводя на русский язык, это означает, что для переопределения стилей нужно вручную прописать цвета для очень большого количества элементов. Если бы я знал, насколько это будет кропотливый процесс, то вряд ли бы взялся за написание расширения. На мобильную версию сайта, где используется другая таблица стилей, меня уже не хватило.
Возможно, я напрасно бычу на разработчиков сайта, и у них на фронтенде (визуальная часть сайта с которой взаимодействует пользователь) используется SCSS или иная система, в которой они прописывают цвета в виде переменных, но браузерное расширение имеет дело со скомпилированным (итоговым) кодом, и переписывать в нескольких сотнях мест цвета то ещё удовольствие.
Хотя я постарался пару недель погонять тёмную тему у себя на компе, в некоторых местах всё ещё могут встречаться неприятные баги. Если вы увидите связанный со цветами глюк, просьба сделать скриншот и сообщить на какой странице вы столкнулись с проблемой, а также указать используемый вами браузер. Да, в разных браузерах элементы могут отображаться по-разному из-за порядка, в котором загружаются стили. Поэтому и считается нежелательным использовать селекторы потомков, ещё и вложенные по пять штук, но не будет вдаваться в технические детали.
Переключить тему можно щелкнув на иконку в правом нижнем углу экрана или использовать всплывающее окно, которое возникает при клике на иконку расширения в правом верхнем углу панели инструментов браузера. Если у вас открыто несколько вкладок с Author.Today, то иногда необходимо перезагрузить ранее неактивные вкладки, прежде чем на них применится тёмная тема, хотя обычно она меняется сразу во всех вкладках.
Также тему можно поменять на странице настроек (опций) расширения, но не думаю, что это особо удобно.
Показатели книг
Если у вас опубликовано хотя бы с десяток произведений, то вы наверняка сталкивались с тем, что не можете сходу понять, какую именно книгу лайкнули. А уж вероятность того, что вы помните количество просмотров и библиотек всех ваших романов и того меньше. Что там изменилось с момента вашего последнего захода на сайт — тайна, которую не так-то легко разгадать без какой-никакой аналитики.
Да, на Author.Today есть графики, показывающие активность читателей, но там отображается статистика либо по всем произведениям сразу, либо по каждому в отдельности. Не знаю как вам, а мне всегда не хватало возможности быстро оценить изменения именно по всем книгам в отдельности, но при этом, чтобы всё было видно на одном графике или хотя бы странице. На мой взгляд, наилучшим образом для такого ежедневного мониторинга подходит страница https://author.today/u/ваш_логин/works/edit, которую я и решил доработать. Честно говоря, именно с этого началась работа над расширением, тёмную тему я добавлял уже во вторую очередь))
Увы, здесь имеются понятные ограничения браузерного расширения — это обёртка над сайтом, у него нет возможности работать с базой данных веб-приложения, иначе была бы огромная дыра в безопасности. Поэтому принцип работы здесь будет такой: при загрузке страницы данные сохраняются во встроенную в браузер базу данных (которая не имеет никакого отношения к АТ), при последующих обновлениях страницы …/works/edit показатели книг сравниваются с этими сохранёнными ранее данными.
Вы можете выбрать разные периоды для сравнения с текущим моментом, только учтите, что не следует сильно полагаться на сохранённое время. Дело в том, что многие браузеры активно применяют кэширование, и при открытии этой вкладки вы можете увидеть неактуальные данные. Это легко решается принудительным обновлением страницы (обычно нажатием Ctrl + R или F5, либо кликнуть на круглую стрелочку в левом верхнем углу браузера рядом с адресом текущей страницы), но в таком случае браузер может записать неактуальные данные с текущим временем. После принудительного обновления вы всё равно увидите все изменения со времени последнего захода на страницу, но вот время «последнего сканирования» может оказаться некорректным. Возможно, объяснение выше звучит непонятно, но на практике ориентироваться в изменениях показателей будет довольно легко.
Также следует учесть, что показатели выше 10 000 сокращаются до 10К, и изменения вы увидите только при достижении следующей тысячи просмотров/библиотек/лайков.
Данные о показателях ваших книг во встроенном браузере хранятся месяц, возможно, это даже перебор и достаточно хранить данные за неделю. Ещё подумаю.
Страница …/works/edit выбрана ещё и потому, чтобы можно было оперативно отслеживать изменения показателей только собственных книг. Мне пока не очень понятно, как отнесётся к браузерному расширению администрация АТ, так что оставим слежку за конкурентами до лучших времён))
Сообщить об опечатках
Ещё одна функция, о которой многие давно просят, но разработчики Author.Today воплощать её не спешат. А зря, здесь всё как раз не так сложно.
Сразу оговорюсь, что данный функционал не будет доступен в произведениях, где авторы установили защиту текста от копирования. Как по мне, подобная «защита» не стоит и ломанного гроша, но раз так людям спокойнее, то не будем ничего ломать, читатели и дальше не смогут выделять текст и, соответственно, уведомлять автора об ошибках.
Если же защита от копирования не установлена, то после выделение фрагмента текста вы сможете нажать на иконку с карандашом в правом нижнем углу над иконкой смены темы. Щелкнув на иконку или нажав Ctrl + Enter, вы увидите всплывающее окно, в котором будет возможность прокомментировать опечатку. Можно и ничего не комментировать, а просто сохранить опечатку для последующего сообщения автору (нажать на кнопку «Сохранить» или нажать Enter). Обратите внимание, что сохраняется не только выделенный фрагмент текста, но и контекст — так автору будет проще понять, где ошибка. Если вы передумали, можно быстро закрыть всплывающее окно, нажав Escapeили кнопку «Отмена».
Теперь, если вы выйдете из читалки и перейдёте на страницу произведения, то сможете увидеть новую иконку в правом нижнем углу, нажав на которую откроется модальное окно с отмеченными ранее опечатками. При нажатии кнопки «Копировать» текст со всеми опечатками сразу вставиться в комментарий к произведению, можете ещё что-нибудь дописать или опубликовать сообщение сразу. Обращаю внимание, что если текст с опечатками попытаться обернуть в спойлер, то после публикации вместо комментария будет отображаться троеточие — похоже, здесь имеет место какая-то странная проверка на сервере АТ. Обидно, изначально мне хотелось обернуть список опечаток в спойлер, чтобы не раздражать автора и читателей, но пока это не получается. Можно не нажимать кнопку «Копировать», а выделить и сохранить список опечаток в буфер обмен, но тогда пропадёт форматирование (жирный цвет и курсив). После успешной отправки сообщения рекомендую снова открыть модальное окно со списком опечаток и нажать на кнопку «Очистить», чтобы не путаться с уже отправленной информацией.
Ошибки по каждому произведению хранятся отдельно и показываются при заходе на страницу романа/рассказа. Список отмеченных опечаток по всем работам можно увидеть на странице настроек браузерного расширения. Чтобы туда попасть нажмите на иконку расширения в правом верхнем углу и кликните на «Настройки». На вкладе «Опечатки» вы увидите все отмеченные ошибки, а также сможете удалить неактуальные/лишние.
Установка
Здесь всё просто, расширение успешно прошло модерацию и доступно для установки по ссылке: https://addons.mozilla.org/ru/firefox/addon/at-helper/
Обратите внимание, что при включении/установке может понадобиться предоставить расширению разрешение на чтение/изменение данных на Author.Today. Если ничего не работает, и вы видите под иконкой расширения зеленую точку, то кликните на иконку правой кнопкой мыши и предоставьте расширению доступ. Расширение не лезет в cookies, local storage, не отправляет ни на какие сторонние сайты какую-либо информацию, но оно работает с элементами сайта, поэтому доступ к «данным сайта» (на мой взгляд, не очень удачная формулировка) необходим. Если хотите подстраховаться, дублирую ссылку на Github, можете проанализировать код: https://github.com/emikhno/AT-helper
Также будет полезно закрепить расширение на панели инструментов для быстрого доступа к разным настройкам. Сейчас во всплывающем окошке всего две опции, но со временем их может стать больше.
Здесь установка будет сложнее, чем в браузере Firefox. Чтобы опубликовать расширение в интернет-магазине Chrome, нужно заплатить регистрационный взнос 5$, что вроде и не так много, но в условиях антироссийских санкций весьма затруднительно.
Поэтому сначала расширение придётся скачать себе на компьютер с Github: https://github.com/emikhno/AT-helper/tree/chrome
Обратите внимание, что должна быть выбрана ветка «chrome», а не «firefox», у этих браузеров разные движки и код расширения несколько отличается. Ссылка выше ведет именно на ветку для chrome-подобных браузеров.
Дальше скачанный архив нужно распаковать, войти на страницу управления расширениями, как указано на картинке или по ссылке: chrome://extensions/
Далее следует включить режим разработчика, нажать на кнопку «Загрузить распакованное расширение» и выбрать папку, в которую вы распаковали скачанный код.
Главный недостаток такого способа установки — расширение не будет автоматически обновляться. Для этого нужно будет снова скачать код с Github, распаковать и загрузить описанным выше образом. Однако, если распаковать файлы в ту же папку, откуда вы загружали расширение ранее, то нажимать на кнопку «Загрузить распакованное расширение» не понадобится, при новом открытии браузера, оно подтянет все изменения.
К сожалению, у Яндекс Браузера нет своего каталога расширений, он подтягивает их из интернет-магазинов браузеров Opera и Chrome. Поэтому схема установки расширения будет почти идентична установке в браузере Chrome.
Скачиваем расширение себе на компьютер с Github: https://github.com/emikhno/AT-helper/tree/chrome
Распаковываем, заходим на страницу расширений, как на картинке или переходим по ссылке: browser://tune/
Дальше идёт специфичный для Яндекс Браузера трюк: надо переместить папку расширения из проводника в окно браузера. Расширение появится в секции «Из других источников» и с ним можно будет работать. Увы, обновлять, как и в случае с браузером Chrome, придётся вручную, заново скачивая расширения из Github и перетаскивая на страницу расширений.
Последовательность действий для установки примерно та же, что в Chrome.
Скачиваем расширение себе на компьютер с Github: https://github.com/emikhno/AT-helper/tree/chrome
Распаковываем, заходим на страницу расширений, как на картинке или переходим по ссылке: opera://extensions
Включаем режим разработчика, далее следует нажать на кнопку «Загрузить распакованное расширение» и выбрать папку, в которую вы распаковали скачанный код.
Для обновления расширения вам придётся снова скачать код с Github и распаковать в ту же папку, что ранее, или осуществить новую загрузку, нажав на кнопку «Загрузить распакованное расширение».
Надеюсь, что в будущем расширение включат в каталог расширений Opera, но пока от модераторов браузера нет никакой обратной связи, с 26 марта расширение на проверке висит…
Здесь ждать модерации не приходится, Microsoft давно ввёл антироссийские санкции, так что устанавливать расширение придётся вручную.
Вначале скачиваем расширение себе на компьютер с Github: https://github.com/emikhno/AT-helper/tree/chrome
Распаковываем, заходим на страницу управления расширениями, как на картинке или переходим по ссылке: edge://extensions/
Включаем режим разработчика, далее следует нажать на кнопку «Загрузить распакованное» и выбрать папку, в которую вы распаковали скачанный код.
Для обновления расширения вам придётся снова скачать код с Github и распаковать в ту же папку, что ранее, или осуществить загрузку по новой, нажав на кнопку «Загрузить распакованное».
Дальнейшие планы
Как и говорилось вначале, планирую добавить в расширение возможность оставлять отметки о пользователях портала, чтобы было удобнее ориентироваться в списке друзей или, наоборот, чёрном списке.
Также хочется сделать фильтр по темам постов в общей ленте обсуждений. А то как начнут все с каким-нибудь праздником однообразно всех поздравлять, то можно ленту сразу закрывать — ничего интересного в этот день точно не будет. Единственное, что поскольку доступа к базе данных сайта у расширения нет, то придётся просто скрывать превью постов из уже готовой выдачи, то есть некоторые страницы выдачи будут полупустые.
Далее нужно будет добавить экспорт и импорт сохранённых расширением данных, так как встроенная в браузер база данных — не самое надёжное хранилище, да и просто может понадобиться перенести настройки с компа на комп.
Естественно, почти наверняка выявится куча багов, которые тоже надо будет по мере возможности исправить.
Что касается долгосрочной судьбы расширения, то она будет зависеть от его востребованности, реакции администраторов Author.Today и прохождения модерации для включения в каталоги расширений разных браузеров. Я прекрасно понимаю, что не всякий пользователь захочет заморачиваться со скачиванием исходного кода с Github и загрузкой расширения через режим разработчика. Надеюсь, что хотя бы в Opera, а соответственно и в Яндекс Браузере, расширение будет доступно для установки без вышеописанных танцев с бубном.
Пока же могу рекомендовать расширение всем пользователям браузера Firefox: там оно легко устанавливается и автоматически обновляется. Надеюсь, AT helper окажется вам полезен.