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

addons.mozilla.org — Камрады! Радость снова пришла в наш дом! (правда, не для всех) Наконец-то опубликовано моё дополнение для Firefox, с помощью которого можно присваивать погоны, фильтровать и всячески раскрашивать комменты. История и описание - в первом.
Новости, Компьютеры | amb 20:37 27.11.2020
105 комментариев | 123 за, 2 против |
#1 | 20:38 27.11.2020 | Кому: Всем
Давно я собирался найти и оживить широко известный в узких кругах плагин "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 | 20:41 27.11.2020 | Кому: Всем
Amba троцкистам!
#3 | 20:45 27.11.2020 | Кому: Всем
Под оперу надо, там впн же
#4 | 20:48 27.11.2020 | Кому: Всем
оо.. дельно! разделяй и властвуй, понимаешь
#5 | 20:52 27.11.2020 | Кому: Швейк
Пока не умею.
Я на лисичке сижу, под неё и делал. ВПН у меня не используется - почему-то нет необходимости, но при случае включаю Browsec.
#6 | 21:02 27.11.2020 | Кому: amb
А можно тебе в личку написать? Есть одно соображение насчет плагина, но мои товарищи-программисты дать однозначную консультацию не могут. Вдруг и тебе будет интересно.
#7 | 21:07 27.11.2020 | Кому: Всем
Всем!

Кто хочет попробовать - поспешите установить!
Почему-то запланировано отключение загрузки. Я в этом деле - нуб, буду разбираться.
#8 | 21:08 27.11.2020 | Кому: бывший
> А можно тебе в личку написать?

Это куда?

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


Интересно. Пиши хоть сюда, в тему.
#9 | 21:10 27.11.2020 | Кому: Всем
Нихуя не понял, но очень интересно ©
Vascosoft
интеллектуал »
#10 | 21:12 27.11.2020 | Кому: Всем
Даёшь плагин для оперы! Да услышат создатели вотта наши чаяния и внесут всё это в стандартный функционал!
#11 | 21:18 27.11.2020 | Кому: Всем
> Свистелки и перделки для слабаков.

А. Ну, ладно. Я запенил - камрад старался!
#12 | 21:23 27.11.2020 | Кому: Всем
> Свистелки и перделки для слабаков.

Удобно же. Подкрасил кого надо, пометил кого не надо.
#13 | 21:24 27.11.2020 | Кому: Tegucigalpa
> А. Ну, ладно. Я запенил - камрад старался!

Спасибо!
#14 | 21:25 27.11.2020 | Кому: amb
Можно ли сделать плагин для браузера, например, лисички, чтобы он фильтровал новостную ленту? Скажем, в браузе по умолчанию установлен яндекс и он при открытии дает блоки различной своей инфы, в т.ч. новостную ленту. И вот некая прога фильтрует контент таким образом, чтобы не показывать заголовки новостей, в которых (заголовках) содержатся определенные слова из словаря, зашитого в проге. Мне в конечном счете объяснили, что целиком блоки инфы затирать можно, как это делает с рекламой АДблок, а вот внутри блока это никак сделать нельзя, так как агрегатор яндекса сначала собирает ленту на отдельном сайте, а потом себе на главный сайт отправляет. И влезть туда никак не возможно, только сам яндекс может свой контент фильтровать. Интересно, так ли это в полной мере? И нет ли все-таки лазеек вклинить фильтр. Цель: если какой-то человек все-таки не может без ленты новостей, то он мог бы поставить такой новостной АДблок, чтобы ему вливался НЕ весь поток ада, а "только хорошие новости".
#15 | 21:32 27.11.2020 | Кому: Всем
> Свистелки и перделки для слабаков.

Истинно так. Дзен копить надо сидя на холодном камне, под проливным дождем!
#16 | 21:33 27.11.2020 | Кому: Tegucigalpa
> Я запенил - камрад старался!

И это истинно так!
#17 | 21:42 27.11.2020 | Кому: бывший
> Мне в конечном счете объяснили, что целиком блоки инфы затирать можно, как это делает с рекламой АДблок, а вот внутри блока это никак сделать нельзя, так как агрегатор яндекса сначала собирает ленту на отдельном сайте, а потом себе на главный сайт отправляет. И влезть туда никак не возможно, только сам яндекс может свой контент фильтровать. Интересно, так ли это в полной мере?

В полной мере - я не настолько спец в этом деле, я нуб.
Теоретически рассуждая - всё, что ты на экране видишь, как-то скачано браузером и поддаётся обработке.
Другой вопрос, если скачивание идёт скриптом, динамически - либо как-то перехватывать (надо знать протокол), либо обрабатывать по итогу (надо понимать, как найти итог и что там можно сделать).
Так что, если спец смотрел и сказал "не получится", то, наверное, и не получится.
#18 | 21:46 27.11.2020 | Кому: Всем
не знаю зачем, но молодец.
#19 | 21:47 27.11.2020 | Кому: Всем
> Что б навел на ник, а под ним выпадает меню с ссылками на его избранные комменты. Мож кому пригодится когда.

Дык прилепить можно, а нужно ли? Про всех досье собирать на всякий случай - запаришься. Сразу захочется всякие поиски, сортировки, пометки и пошло-поехало, лепи базу данных. Я думал о таком, пока не готов.
#20 | 21:49 27.11.2020 | Кому: Всем
> Вот так у приблуды слетели настройки, а уже и не помнишь без подсказки и подсветки кто тебе тут друг, а кто гнилой пидарас.
>
> Это недопустимо.

На этот случай и приделал экспорт в текст!
#21 | 21:51 27.11.2020 | Кому: Всем
> ЗЫ: раз уж лепишь такую полезную приблуду, то прилепи "банк памяти" что бы пруфы цеплялись к юзверю.

И все автоматически пристёгивались ко всем ответам этому юзеру. Чтобы тот не забывал, какую херню он когда-то сморозил :)))
#22 | 21:53 27.11.2020 | Кому: Alex Wolf
> не знаю зачем, но молодец.

Многие спрашивали.
Вон, камрад dse раздаёт волшебные заклинания под какой-то блокировщик, чтобы комменты чистить.
А тут всё быстро, в несколько кликов, и обратимо. Плюс можно помечать, а не чистить (я так и делаю).
#23 | 21:54 27.11.2020 | Кому: Всем
Нет браузера, кроме оперы, и VPN пророк её.
#24 | 21:54 27.11.2020 | Кому: amb
> дальше буду модифицировать под хром

Когда примерно, камрад?
В любом случае, мегамолодец! Даже если не буду юзать.
#25 | 21:59 27.11.2020 | Кому: Всем
> Вот так у приблуды слетели настройки, а уже и не помнишь без подсказки и подсветки кто тебе тут друг, а кто гнилой пидарас.
>
> Это недопустимо.

При склерозе полезная приблуда - сразу покажет кто есть ху!
#26 | 22:00 27.11.2020 | Кому: amb
Что-то не сохраняет настройки под Mint 20. Т.е. персонаж добавляется, а опции по нему — нет.
Оно где настройки хранит? Мож права на запись выдать нужно?
a.v.v
дурачок »
#27 | 22:00 27.11.2020 | Кому: Всем
> присваивать погоны, фильтровать и всячески раскрашивать комменты

это как его, волюнтаризм
[censored]

КС
#28 | 22:02 27.11.2020 | Кому: aspav
> Когда примерно, камрад?

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

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


Спасибо, старался!
#29 | 22:08 27.11.2020 | Кому: alshup
> Что-то не сохраняет настройки под Mint 20. Т.е. персонаж добавляется, а опции по нему — нет.

В списке персонажей "Сохранить" нажимал? Отрисовка новых опций ещё ничего не сохраняет.

> Оно где настройки хранит? Мож права на запись выдать нужно?


В локальном хранилище для дополнений. Может, в MInt и права нужно, я не знаю.
Попробуй на странице настроек поменять раскраску рейтингов, сохранить настройки и перезагрузить браузер - проверить сохранение.
shazamba
он же Незомби »
#30 | 22:10 27.11.2020 | Кому: Всем
Эх, для оперы бы
Я плюнул на мозиллу, она все сильнее и сильнее тупила, и ушел на Оперу

И да, добавь возможность ставить для пользователей картинки
#31 | 22:16 27.11.2020 | Кому: shazamba
> Эх, для оперы бы

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

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


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

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


Куда? Какие? Где их хранить?
#32 | 22:24 27.11.2020 | Кому: amb
> В списке персонажей "Сохранить" нажимал? Отрисовка новых опций ещё ничего не сохраняет.

Да уж нажимал.

> Попробуй на странице настроек поменять раскраску рейтингов, сохранить настройки и перезагрузить браузер - проверить сохранение.


Сохранилось.
Странно. Поковыряюсь ещё.
Но всё равно спасибо!
#33 | 22:28 27.11.2020 | Кому: alshup
> Сохранилось.
> Странно. Поковыряюсь ещё.

Действительно, странно. Всё сохраняется в одном месте. А на странице настроек "Количество пользователей в списке" ненулевое? Оно из сохранения берётся.
Попробуй экспорт ещё - глянь, что там в файле.
Да, главный вопрос - не сохраняются вообще никакие опции или частично?
#34 | 22:36 27.11.2020 | Кому: amb
Специально открыл лису, чтобы поюзать интересную штучку.

> > Что-то не сохраняет настройки под Mint 20. Т.е. персонаж добавляется, а опции по нему — нет.

>
> В списке персонажей "Сохранить" нажимал? Отрисовка новых опций ещё ничего не сохраняет.
Я тоже не смог сходу сохранить настройки юзверя.
Они почему-то (может, так и должно быть?) у меня применяются только при нажатии на галку в столбце "Погон" (а только потом "Сохранить"). Вот тогда и сохраняется раскраска и появляется возможность редактировать погон.
#35 | 22:38 27.11.2020 | Кому: Всем
А можно, чтобы не было class="comment_wrapper2 comment_bordered"?
#36 | 22:46 27.11.2020 | Кому: aspav
> нажатии на галку в столбце "Погон"

Во!!

Будем так и делать, стало быть.
#37 | 22:47 27.11.2020 | Кому: amb
> Попробуй экспорт ещё

Там не появлялись "ему" и т.п., теперь появились (по методу aspav); ну и работает как выбрал.
#38 | 22:47 27.11.2020 | Кому: aspav
> Они почему-то (может, так и должно быть?) у меня применяются только при нажатии на галку в столбце "Погон" (а только потом "Сохранить"). Вот тогда и сохраняется раскраска и появляется возможность редактировать погон.

Так и должно быть. См. п. 2.8: "Галка" завершает редактирование записи (одной). Можно тут же её редактировать снова (или другую) и надо опять нажать галку.
Потом "Сохранить" - все сразу.
#39 | 22:50 27.11.2020 | Кому: Jonny
> А можно, чтобы не было class="comment_wrapper2 comment_bordered"?

А как нужно?
#40 | 22:51 27.11.2020 | Кому: amb
Да всё, исправил уже сам.
Просто из-за этого у меня посты с погоном обводились ярко-желтым пунктиром режущим глаза (темная тема вотт).

.comment_bordered {
    border: 2px dashed Gold !important;
    border-radius: 0.5em;
}

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

Думается мне, что было бы лучше через

div.comment_hightlight_pogon {
background-color: #162b07;
}
#41 | 22:52 27.11.2020 | Кому: amb
Мануалы читать, внимательно, тем более, — не по понятиям!
Извиняюсь, короче, и спасибо ещё раз.
#42 | 22:52 27.11.2020 | Кому: amb
Оченно полезная херовинка.

> Так и должно быть. См. п. 2.8: "Галка" завершает редактирование записи (одной).


Ёпть! Ты знал!!!

ЗЫ. Нужно внимательнее читать, значицца :)
#43 | 22:54 27.11.2020 | Кому: alshup
> Мануалы читать, внимательно, тем более, — не по понятиям!

Точно! Чтение мануала - последнее, что делают профессионалы :)))
#44 | 22:54 27.11.2020 | Кому: Jonny
> Да и не очень понятно нахрена вот конкретно этот кусок

Дык это и есть ярко-желтый пунктир, выделять свежедобавленных, по которым ещё не выставлено никаких действий.
#45 | 22:56 27.11.2020 | Кому: Всем
> Свистелки и перделки для слабаков.

Настоящему джигиту не нужно вешать погоны. У него все и так уже переписаны в маленький чОрный блокнот (:
#46 | 22:57 27.11.2020 | Кому: alshup
> теперь появились (по методу aspav)

[гордо прохаживается]
Старый добрый метод "тыка". "Если нихера не помогает, ткни куда-нибудь ещё".
#47 | 22:57 27.11.2020 | Кому: aspav
> Ёпть! Ты знал!!!

А то! Я ж эту галку и рисовал :)

> ЗЫ. Нужно внимательнее читать, значицца :)


Ну да. Я просто не умею сделать, чтоб без галки и удобопонятно.
#48 | 22:57 27.11.2020 | Кому: amb
> ярко-желтый пунктир, выделять свежедобавленных, по которым ещё не выставлено никаких действий.

А вона это чо!
Спасибо.
#49 | 22:58 27.11.2020 | Кому: amb
> Дык это и есть ярко-желтый пунктир, выделять свежедобавленных, по которым ещё не выставлено никаких действий.

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

И я доволен как слон, спасибо)
#50 | 23:00 27.11.2020 | Кому: amb
> Я ж эту галку и рисовал :)

Я догадывался, что это неспроста ты про неё в курсе. :)

> Я просто не умею сделать, чтоб без галки и удобопонятно.


Не-не, с галкой всё заипись. Просто, я не сразу догадался, что на неё нужно жмякнуть. Читать-то лень. Но в конце концов попал и в галку.
Войдите или зарегистрируйтесь чтобы писать комментарии.