Браузерное расширение AT helper

Написал небольшое браузерное расширение «AT helper» для более удобной работы с литературной площадкой Author.Today.

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

1. Позволяет установить тёмную тему (работает только в Полной версии сайта).
2. Авторы могут видеть изменения в показателях своих книг (на странице https://author.today/u/{your_profile_name}/works/edit).
3. Читатели могут отмечать в процессе чтения опечатки, а затем сообщать о них автору.

Также планирую добавить возможность оставлять отметки о пользователях портала, чтобы было удобнее ориентироваться в списке друзей или, наоборот, чёрном списке.

 

А теперь обо всём поподробнее.

Начнём с того, что браузерные расширения — это встроенные в браузер мини-программы, которые добавляют новые возможности. Вероятно, самые популярные расширения — это блокировщики вездесущей рекламы, если вы никогда ими не пользовались, то самое время начать)) Большинство расширений влияют на работу всех вкладок вашего браузера, но есть и такие, которые ориентированы на работу с конкретными сайтами. AT helper, как не трудно догадаться, как раз из подобных мини-программ.

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

Что касается безопасности этого расширения, то его исходный код доступен на Github, можете проверить сами или попросить взглянуть знакомого программиста. Также код прошёл проверку модераторами браузера 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 или кнопку «Отмена».

Теперь, если вы выйдете из читалки и перейдёте на страницу произведения, то сможете увидеть новую иконку в правом нижнем углу, нажав на которую откроется модальное окно с отмеченными ранее опечатками. При нажатии кнопки «Копировать» текст со всеми опечатками сразу вставиться в комментарий к произведению, можете ещё что-нибудь дописать или опубликовать сообщение сразу. Обращаю внимание, что если текст с опечатками попытаться обернуть в спойлер, то после публикации вместо комментария будет отображаться троеточие — похоже, здесь имеет место какая-то странная проверка на сервере АТ. Обидно, изначально мне хотелось обернуть список опечаток в спойлер, чтобы не раздражать автора и читателей, но пока это не получается. Можно не нажимать кнопку «Копировать», а выделить и сохранить список опечаток в буфер обмен, но тогда пропадёт форматирование (жирный цвет и курсив). После успешной отправки сообщения рекомендую снова открыть модальное окно со списком опечаток и нажать на кнопку «Очистить», чтобы не путаться с уже отправленной информацией.

Ошибки по каждому произведению хранятся отдельно и показываются при заходе на страницу романа/рассказа. Список отмеченных опечаток по всем работам можно увидеть на странице настроек браузерного расширения. Чтобы туда попасть нажмите на иконку расширения в правом верхнем углу и кликните на «Настройки». На вкладе «Опечатки» вы увидите все отмеченные ошибки, а также сможете удалить неактуальные/лишние.

Исключить неинтересные темы из общей ленты

Добавлено 22 апреля 2024 г.: На Author.Today есть две ленты новостей: персональная (author.today/feed) и общая (author.today/discussions/all/top). Персональная лента настраивается довольно гибко, но если вы добавляете много друзей, то она в любом случае быстро превращается в хлам. Я почти сразу отключил там уведомления о новых постах и иллюстрациях, оставив лишь ответы на мои комментарии, инфу о полученных наградах и подписках на мой профиль. При этом, чтобы быть в курсе движа на площадке, но не терять много времени на просмотр блогов, я периодически проверяю первые две-три страницы самых популярных постов за день. Для этого отлично подходит общая лента, но у неё есть один существенный недостаток: из неё нельзя исключить посты с неинтересными темами.

Как минимум было бы полезно исключить из списка постов «Самопиар», а также «Флешмобы и праздники». Чужой самопиар мало кому интересен, также очень бесят абсолютно однотипные поздравления с каким-нибудь праздником – в знаменательные даты в общую ленту можно не заходить, все постят одно и то же.

С помощью браузерного расширения мне наконец-то удалось решить эту проблему, теперь посты с неинтересными темами скрываются и не отвлекают от быстрого скроллинга в ленте. Подчеркну, что посты именно скрываются – браузерное расширение не влияет на запросы к базе данных сайта, оно манипулирует уже отрисованным результатом. Поэтому не удивляйтесь, что на разных страницах количество постов будет слегка различаться: из стандартных двадцати постов на одну страницу часть блогов может быть скрыта благодаря новому фильтру.

Исключить можно любые темы постов, например, «Промокоды и розыгрыши», если вы присутствуете на площадке сугубо как автор, и не заинтересованы в приобретении чужих книг.

Чтобы исключить сразу несколько тем, зажмите клавишу Ctrl и кликайте по темам в фильтре.

Новый фильтр по количеству лайков

Добавлено 22 апреля 2024 г.: Довольно напрашивающаяся возможность: кто-то считает, что не стоит тратить время на книги с маленьким количеством лайков, кто-то, наоборот, плюётся от пользующихся популярностью книг. И первой, и второй категории читателей пригодится дополнительный фильтр по количеству лайков.

Как и в предыдущих случаях, новый фильтр не меняет запросы к базе данных сайта, он применяется к результатам выдачи. Книги, не удовлетворяющие критериям минимального и/или максимального количества лайков будут автоматически скрыты.

При работающем фильтре количество книг на разных страницах может достаточно сильно разниться: на одной будет 20 книг, на другой останется 10 и так далее. Всё зависит от установленного вами диапазона значений.

Обратите внимание, что у книг с 10 тысячами лайков и более количество указывается сокращённо с буковкой «К»: 10К, 11К, 12К… В таких случаях считается, что у книги 10000, 11000, 12000 и так далее лайков.

Если вы хотите убрать фильтр, просто удалите из поля все цифры.

Приватные заметки о пользователях

Добавлено 22 апреля 2024 г.: Иногда бывает сложно вспомнить о причинах добавления пользователя в чёрный список, или в список друзей, а может, у вас просто подозрения насчёт какого-то человека. Чтобы ничего не забыть, будет полезно делать о пользователях заметки, которые можно сразу увидеть, зайдя в чей-то профиль.

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

Чтобы сохранить заметку, нажмите на появившуюся после любого изменения текста кнопочку «Сохранить» (будет справа) или на любую область на обложке профиля. Текстовое поле на секунду окрасится в зелёный цвет, сигнализируя об успешном сохранении данных.

Список всех заметок о пользователях можно найти на странице настроек расширения. Кликните на иконку расширения в правом верхнем углу экрана, затем надпись «Настройки» и перейдите там на вкладку «Пользователи». Можете удалять или редактировать записи там же.

Экспорт и импорт данных расширения

Добавлено 22 апреля 2024 г.: Поскольку вся информация, собранная при работе расширения, хранится во встроенной в ваш браузер базе данных, будет полезно хотя бы иногда делать резервную копию этих данных.

Нажмите на иконку расширения в правом верхнем углу экрана, затем кликните на кнопку «Экспорт данных». Вы получите json файл, с помощью которого легко перенесёте данные на другой компьютер/браузер, или, в случае необходимости, восстановите.

Для импорта нажмите на иконку расширения в правом верхнем углу экрана, затем кликните на надпись «Настройки». Вы перейдете на страницу настроек расширения, где на первой же вкладке будет красная кнопка «Импорт». Нажав на неё и выбрав сохранённый ранее файл с данными, вы загрузите информацию во встроенную в браузер базу данных.

Не забывайте народную мудрость: нет бэкапа – жди факапа. Делайте резервные копии, если активно пользуетесь расширением AT helper.

Установка

Firefox

Здесь всё просто, расширение успешно прошло модерацию и доступно для установки по ссылке addons.mozilla.org/ru/firefox/addon/at-helper/

Обратите внимание, что при включении/установке может понадобиться предоставить расширению разрешение на чтение/изменение данных на Author.Today. Если ничего не работает, и вы видите под иконкой расширения зеленую точку, то кликните на иконку правой кнопкой мыши и предоставьте расширению доступ. Расширение не лезет в cookies, local storage, не отправляет ни на какие сторонние сайты какую-либо информацию, но оно работает с элементами сайта, поэтому доступ к «данным сайта» (на мой взгляд, не очень удачная формулировка) необходим. Если хотите подстраховаться, дублирую ссылку на Github, можете проанализировать код: github.com/emikhno/AT-helper

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

Chrome

Здесь установка будет сложнее, чем в браузере Firefox. Чтобы опубликовать расширение в интернет-магазине Chrome, нужно заплатить регистрационный взнос 5$, что вроде и не так много, но в условиях антироссийских санкций весьма затруднительно.

Поэтому сначала расширение придётся скачать себе на компьютер с Github: github.com/emikhno/AT-helper/tree/chrome

Обратите внимание, что должна быть выбрана ветка «chrome», а не «firefox», у этих браузеров разные движки и код расширения несколько отличается. Ссылка выше ведет именно на ветку для chrome-подобных браузеров.

Дальше скачанный архив нужно распаковать, войти на страницу управления расширениями, как указано на картинке или по ссылке: chrome://extensions/

Далее следует включить режим разработчика, нажать на кнопку «Загрузить распакованное расширение» и выбрать папку, в которую вы распаковали скачанный код.

Главный недостаток такого способа установки — расширение не будет автоматически обновляться. Для этого нужно будет снова скачать код с Github, распаковать и загрузить описанным выше образом. Однако, если распаковать файлы в ту же папку, откуда вы загружали расширение ранее, то нажимать на кнопку «Загрузить распакованное расширение» не понадобится, при новом открытии браузера, оно подтянет все изменения.

Яндекс Браузер

К сожалению, у Яндекс Браузера нет своего каталога расширений, он подтягивает их из интернет-магазинов браузеров Opera и Chrome. Поэтому схема установки расширения будет почти идентична установке в браузере Chrome.

Скачиваем расширение себе на компьютер с Github: github.com/emikhno/AT-helper/tree/chrome

Распаковываем, заходим на страницу расширений, как на картинке или переходим по ссылке: browser://tune/

Дальше идёт специфичный для Яндекс Браузера трюк: надо переместить папку расширения из проводника в окно браузера. Расширение появится в секции «Из других источников» и с ним можно будет работать. Увы, обновлять, как и в случае с браузером Chrome, придётся вручную, заново скачивая расширения из Github и перетаскивая на страницу расширений.

Opera

Последовательность действий для установки примерно та же, что в Chrome.

Скачиваем расширение себе на компьютер с Github: github.com/emikhno/AT-helper/tree/chrome

Распаковываем, заходим на страницу расширений, как на картинке или переходим по ссылке: opera://extensions

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

Для обновления расширения вам придётся снова скачать код с Github и распаковать в ту же папку, что ранее, или осуществить новую загрузку, нажав на кнопку «Загрузить распакованное расширение».

Надеюсь, что в будущем расширение включат в каталог расширений Opera, но пока от модераторов браузера нет никакой обратной связи, с 26 марта расширение на проверке висит…

Microsoft Edge

Здесь ждать модерации не приходится, Microsoft давно ввёл антироссийские санкции, так что устанавливать расширение придётся вручную.

Вначале скачиваем расширение себе на компьютер с Github: github.com/emikhno/AT-helper/tree/chrome

Распаковываем, заходим на страницу управления расширениями, как на картинке или переходим по ссылке: edge://extensions/

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

Для обновления расширения вам придётся снова скачать код с Github и распаковать в ту же папку, что ранее, или осуществить загрузку по новой, нажав на кнопку «Загрузить распакованное».

Дальнейшие планы

Обновлено 22 апреля 2024 г.: На текущий момент реализовал всё, что планировал. Буду ждать прохождение затянувшейся модерации в Opera (которая также позволит легко устанавливать расширение в Яндекс Браузере) и исправлять баги.

Пока же однозначно могу рекомендовать расширение всем пользователям браузера Firefox: там оно легко устанавливается и автоматически обновляется. Надеюсь, AT helper окажется вам полезен.