Новое дополнение для Firefox "VOTT filter"

Давно я собирался найти и оживить широко известный в узких кругах плагин "VOTT.RU: Stop Pupking!" камрада "Кабанатор", да всё как-то страшновато было, ибо не занимался программной (да и вообще никакой) обработкой HTML уже лет двадцать. И вотт, прошло всего пять лет со смерти этого плагина и случился тред "Как стать программистом?", по итогам которого я таки решился - скачал и посмотрел.
Быстро выяснилось, что нельзя просто так взять и написать программу, какую ты хочешь - за прошедшие годы навыдумывали всяких требований по безопасности, JSON, DOM и прочая. И промисы, чтоб их. К тому же, в плагине использовалась библиотека JQuery, птичий язык которой я сходу вообще не понял. Короче - было сложно, учитывая отсутствие каких-либо знаний javascript.
В итоге - решил писать с нуля, пользуясь хорошим примером, описанием имеющегося функционала, желанием сделать "как хочу" и ресурсами MDN (копипаста - наше всё!). Искал подходящие образцы, с помощью отладочной консоли и какой-то матери допиливал под задачу. И вотт - набыдлокодил.

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

Устанавливайте, пробуйте, пишите в комментах своё мнение.
Дальше - описание функционала, максимально полное (как я думаю).

---
Дополнение для браузера
"VOTT filter" - Обработка списка комментариев для VOTT.RU

Фильтрация или декорирование сообщений в обсуждениях на сайте VOTT.RU
в соответствии с предварительно настроенным списком пользователей.

1. Основной функционал

1.1 Фильтрация сообщений в обсуждениях на сайте VOTT.RU.
После установки появляется значок дополнения в панели инструментов браузера:
серый в неактивном режиме, цветной на страницах со списком комментариев (в темах).
На значке отображается количество спрятанных комментариев в данной теме (если такие есть).
Доступно контекстное меню браузера (ПКМ на тексте страницы) - "Показать все комментарии",
при выборе которого будут отображены ранее спрятанные комментарии и помечены
особой рамочкой (пурпурного цвета). Чтобы снова спрятать комментарии - обновите страницу.
Кроме скрывания комментариев возможно настроить выделение фоновым цветом текста с
именем автора или текста заголовка комментария, а также добавление своих пометок
каждому пользователю.
Работает даже без авторизации на сайте, хотя при этом не используются
все возможности фильтрации.

1.2 Управление списком пользователей.
Список пользователей отображается при нажатии на значок дополнения
в панели инструментов браузера (даже неактивный). Удаление и редактирование
всех настроек пользователей выполняется прямо в списке
(подробнее см. "Список пользователей" и "Возможности фильтра").
Добавление пользователей в список происходит через контекстное меню браузера (ПКМ),
если активировать меню на какой-нибудь ссылке внутри комментария
(имя автора, ссылка на другой комментарий, кнопка "Ответить", картинка или линк в тексте).
Вручную добавить запись нельзя (если только через экспорт/импорт).

1.3 Подсветка рейтинга комментария.
Выделяет заданными цветами маленький квадратик с рейтингом (перед кнопками +/-).
Работает при авторизации на сайте, управляется со страницы настроек дополнения.
От фильтра и списка пользователей не зависит.

1.4 Сохранение всех данных.
Все настройки и список пользователей с параметрами фильтрации записываются в
локальное хранилище браузера (не синхронизируемое).
На каждую запись в списке пользователей сохраняется примерно 440 байт,
заявленный объем хранилища 5 Мб, так что можно сохранить очень длинный список.
Отдельной кнопки очистки хранилища нет - при нажатии "Сохранить" на страничке
настроек дополнения все содержание перезаписывается полностью.

1.5 Экспорт и импорт всех настроек.
На странице настроек дополнения имеются две кнопки, позволяющие записать
в текстовый файл все настройки и список пользователей с параметрами фильтрации,
а также загрузить все обратно.
Файлу присваивается имя "VOTT filter" с добавлением текущей даты для удобства
и производится "скачивание", так что ищите его в папке загрузок (если не выбрали другую).
Формат файла - текстовый JSON в кодировке UTF-8. Его можно посмотреть/изменить
любым редактором, все поля текстовые. Формат и структуру нарушать не надо -
контроль при импорте минимальный. Имена пользователей, даты и ссылки не проверяются.
Это ваш файл и ваш фильтр - на ваше усмотрение.
После успешного импорта списка и настроек нажмите кнопку "Сохранить" - автоматически
данные импорта не записываются (можно отменить импорт, просто закрыв страницу настроек).


2. Список пользователей

2.1 Добавленные через контекстное меню пользователи отображаются во всплывающем окне
дополнения. В списке у каждого видно:
- имя пользователя (отображается ссылкой на профиль)
- персональный "погон"
- дата добавления в список
- источник - ссылка на комментарий, через который было сделано добавление
(слово "комментарий") или любая другая ссылка после редактирования (слово "адрес")
или любой текст (отображается начало).

2.2 Персональный "погон" - текст добавляется в комментариях к имени пользователя
после официального погона и выделяется темно-зеленым цветом и курсивом.

2.3 При настроенном фильтре поля списка могут быть отмечены фоновым цветом или
другим начертанием шрифта.

2.4 Переход по ссылкам производится прямо из списка - открываются новые окна или вкладки.

2.5 Редактирование записи начинается кликом мыши по полю даты добавления. В начале
редактирования добавляются две кнопки: около имени пользователя - для удаления записи,
около погона - для завершения редактирования и обновления записи.
Также поле даты заменяется на два поля выбора действий, управляющих фильтром
(см. "Возможности фильтра").

2.6 Имя пользователя изменить нельзя, дату тоже.
Текст "Погон" ограничивается максимальной длиной 33 символа.
Текст "Источник" ограничивается максимальной длиной 99 символов.
Валидность ссылки не проверяется, "http" автоматом не добавляется,
можно написать любой текст (отображается начало).

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

2.8 Редактирование записи завершается нажатием кнопки "V" в поле "Погон". При этом
все изменения в настройках текущей записи актуализируются и список перерисовывается.
Для сохранения результатов редактирования нажмите кнопку "Сохранить" внизу списка.

2.9 Отдельной кнопки для отмены изменений нет - можно просто закрыть всплывающее окно,
не нажав "Сохранить". Будьте внимательны - отменяются все несохраненные изменения
и удаления по всем записям.


3. Возможности фильтра

3.1 Фильтр управляется двумя полями выбора действий. После добавления в список
оба действия установлены как "Ничего не делать", при этом комментарии добавленного
пользователя выделяются рамочкой желтого цвета.

3.2 Первое поле управляет фильтрацией по автору комментария.
Варианты выбора:

- "Ничего не делать"

- "Выделение автора цветом" : поле автора комментария вместе с погоном получает выбранный фоновый цвет

- "Скрывать все" : будут спрятаны все комментарии за авторством данного пользователя

- "Только ответы мне" : будут спрятаны только ответы данного пользователя владельцу дополнения (вам). Прочие комментарии этого автора спрятаны не будут. Опция работает только при наличии авторизации на сайте

3.3 Второе поле управляет фильтрацией по заголовку комментария.
Варианты выбора:

- "Ничего не делать"

- "Выделение заголовка цветом" :поле заголовка комментария (данного автора!) получает выбранный фоновый цвет (там, где дата написания, "кому" и пр.)

- "Скрывать ответы ему" : будут спрятаны все ответы данному пользователю от всех остальных авторов

3.4 При выборе опции "Выделение цветом" немедленно активируется "выбиралка цвета",
скрывающая управление фильтрацией. Завершить выбор цвета можно нажатием кнопки
"Закрыть" или кликом в любом месте списка за пределами цветовыбиралки.
(Не кликайте за пределами всплывающего окна!)
Последний выбранный цвет запоминается (даже если вы нажали "Esc"),
после чего опять восстанавливаются поля управления фильтром.

3.5 Если в фильтре настроено выделение цветом - фоновый цвет полей в списке
меняется соответственно: "имя пользователя" и "погон" по первому полю,
"дата" и "источник" - по второму полю.

3.6 Если в фильтре настроена хоть одна опция скрытия комментариев - поля в списке
"имя пользователя" и "погон" дополнительно отмечаются жирным шрифтом и зачеркиванием.


4. Примечания

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

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

4.3 После редактирования списка пользователей или страницы настроек
обновите страницы с открытыми темами, автоматически это не делается.

4.4 Все параметры и список фильтрации сохраняются на локальном компьютере,
никуда не передаются и никому больше не видны. Результаты работы фильтра,
такие как присвоенный "погон" и цвет, тоже видны только у вас в браузере.

4.5 Главная страница со списком тем никак не обрабатывается.

4.6 Спасибо камраду "Кабанатор" за основную идею и пример реализации.
Однако, дополнение "VOTT.RU: Stop Pupking!" никак не поддерживается.

---

Пример списка (в процессе редактирования):
[censored]

и что из него получается:
[censored]

Всем!

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

> Свистелки и перделки для слабаков.

Удобно же. Подкрасил кого надо, пометил кого не надо.

> Мне в конечном счете объяснили, что целиком блоки инфы затирать можно, как это делает с рекламой АДблок, а вот внутри блока это никак сделать нельзя, так как агрегатор яндекса сначала собирает ленту на отдельном сайте, а потом себе на главный сайт отправляет. И влезть туда никак не возможно, только сам яндекс может свой контент фильтровать. Интересно, так ли это в полной мере?

В полной мере - я не настолько спец в этом деле, я нуб.
Теоретически рассуждая - всё, что ты на экране видишь, как-то скачано браузером и поддаётся обработке.
Другой вопрос, если скачивание идёт скриптом, динамически - либо как-то перехватывать (надо знать протокол), либо обрабатывать по итогу (надо понимать, как найти итог и что там можно сделать).
Так что, если спец смотрел и сказал "не получится", то, наверное, и не получится.

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

На этот случай и приделал экспорт в текст!

> Когда примерно, камрад?

Сложно сказать, я про хромовые расширения только читал у мозиллы, что типа "очень совместимо, можно портировать". Ну и только что закончил доделки, мозг ещё кипит ))

> В любом случае, мегамолодец! Даже если не буду юзать.

Спасибо, старался!

> Эх, для оперы бы

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

> Я плюнул на мозиллу, она все сильнее и сильнее тупила, и ушел на Оперу

У меня вроде не тупит. На работе тоже на хром и яндекс плюнул и огнелис поставил - машина древняя, полёт нормальный.
Какую версию Оперы используешь?

> И да, добавь возможность ставить для пользователей картинки

Куда? Какие? Где их хранить?

> Они почему-то (может, так и должно быть?) у меня применяются только при нажатии на галку в столбце "Погон" (а только потом "Сохранить"). Вот тогда и сохраняется раскраска и появляется возможность редактировать погон.

Так и должно быть. См. п. 2.8: "Галка" завершает редактирование записи (одной). Можно тут же её редактировать снова (или другую) и надо опять нажать галку.
Потом "Сохранить" - все сразу.

> Да и не очень понятно нахрена вот конкретно этот кусок

Дык это и есть ярко-желтый пунктир, выделять свежедобавленных, по которым ещё не выставлено никаких действий.

> Я наверное старый, просто убрал эту штуку и стало вот так:

Можно поменять там "Gold" на тот цвет, который подходит.
А можно внутрь не лазить, просто выбрать "Выделение цветом" каким-нибудь тёмненьким - и рамки не будет.

> И я доволен как слон, спасибо)

На здоровье!
Я про тёмные темы вообще не заморачивался. Если что глаз режет - пиши свои соображения, прикручу по возможности. Может, цвет этой рамки в настройки вывести или лучше определять тёмные темы и автоматом затемнять?

> Настраивать его постоянно при добавлении погона это не круто.

Цвет кармы от юзера не зависит, подсвечивается даже у тех, кто не в списке.

> К тому же посты чередуются цветами и все равно будет не айс.

Надо будет попробовать тёмную тему.

> Хотелось бы иметь возможность просто это убрать.

Выставь число в настройках побольше (поменьше для отрицательного) - ни у кого не будет кармы 99.

> Не в курсе, я в этом не разбираюсь

Давай вместе разберёмся. Мы про цвет кармы комментария? В настройках для этого два числа и два цвета, для всех. Один раз настроил и всё. Если число большое - цвет не применится вообще никогда.
Что где не срабатывает - поясни.
99 поставил - настройки сохраняются? После сохранения и обновления страниц карма всё равно подсвечивается?

> Нахер все эти полоски, цветастые кубики и прочее. Просто погон, можно даже со ссылкой на комментарий это да, неплохо.

Насчёт жёлтой рамки. Как будет лучше - отключать совсем в настройках или выбирать ей цвет?

> А где сцылко на гитхаб или гитлаб какой-нибудь?

А нету!
Я ими не пользуюсь, не умею. Пока не надо было.

> Выложи на github исходники, камрады допилят, улучшат и непоправимо исправят!

Понял.
Надо будет поглядеть как это делается.

Дык, давно уже черкнул. Буду адаптировать.
Сейчас только ошибки устранить и доделать по мелочи, а потом займусь.

> Отключать в настройках вообще всё, кроме погонов. Можно одной галочкой.

Камрад, я обновил версию плагина - в настройках теперь есть отключение цвета. Везде! (ну, почти - рамку спрятанных комментариев оставил).

Ясно. Спасибо!
Ну теперь 2 последних можно и убрать ;)