image

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

С чего вообще возникла эта идея?


Достаточно значительную часть своего времени я провожу в различных соцсетях. Нет, у меня еще осталась личная жизнь (С Саус Парк), но при этом я зарегистрирован и состою во многих форумах, сетях, группах, чатах и т.п. — где по необходимости, а где из-за хобби и для досуга / развлечения. В каждой группе присутствует свой состав участников, и в процессе взаимодействия формируется различное отношение к ним — кого-то хочется добавить в друзья, а кого-то в игнор. При этом интерфейсы различных соцсетей предлагают разный набор возможностей и средств для этого — многие форумы не показывают содержание постов пользователей из черного списка, но показывают их наличие и ответы на них, Телеграм вообще не имеет никаких подобных возможностей, а тот же ВКонтакте позволяет добавить пользователей как в друзья так и в черный список, но логика работы этой функциональности лично меня не устроила.

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

Анализируя различные варианты того, что я могу сделать с этой ситуацией (в конце концов, яжпрограммист), я остановился на идее создания расширения для Chrome.

Во-первых, потому что я редко использую отдельные специализированные приложения для чего-либо, когда есть альтернатива в виде веб-интерфейса. Все эти ваши Зумы, ВКонтакте, Точки/Тиньковы и прочие, имя им легион, я открываю через браузер. В том числе и потому, что я не настолько активно пользуюсь смартфоном, а больше десктопом — с удобным большим монитором, хорошей клавиатурой и мышью. А устанавливать отдельные приложения для каждой ерунды считаю излишним, только Телеграм у меня удостоился этой чести.

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

В результате через несколько дней у меня уже было рабочее расширение, полностью решающее мою задачу. Позволю себе упомянуть некоторые технические моменты, возникшие в процессе реализации, и методы их решения. Поанализировав код html страниц, которые отдает ВКонтакте, я выявил критерии, по которым определенные элементы можно отнести к типу «проверяемых на возможное изменение отображения» — это посты, ответы, объявления, элементы списка поставивших лайки и т.п. Часть из этих элементов имела говорящие сами за себя уникальные айдишники типа

post_1213312431...

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

opacity = 0.15

исключительно для большей наглядности, в рабочем варианте у меня стоит

display = 'none'.

Далее надо реализовать интерфейс добавления пользователей в черный список. Выше я упомянул как ищется аватарка пользователя с его айдишником, так вот когда элемент аватарки найден, он стилистически оформляется как кнопка (добавляются фон и границы) и вешается листенер на событие клика по нему. Тут надо упомянуть, что код расширения и код страницы выполняются в разных окружениях, и между собой имеют только достаточно ограниченные варианты взаимодействия (посылка сообщений и т.п.), но доступ к DOM элементам страницы как на чтение так и на запись у расширения есть, поэтому можно легко подменять/назначать свои обработчики событий дополнительно или вместо тех, которые назначены кодом страницы. Подозреваю, что можно сделать более вариантивно, и показывать выпадающий список с действиями по клику на аватар — пререйти настраницу пользователя, добавить его в ЧС или что-то еще, но я выбрал простой вариант — по клику на аватар пользователь сразу добавляется в ЧС :) Если надо перейти на страницу — почти везде рядом с аватарами присутствую текстовые имена-ники пользователей, которые работают как ссылки на их страницы, поэтому никаких ограничений интерфейса не возникает.

Вот скрин того, как это выглядит визуально (при выделении прозрачностью):

image


Хранение черного списка для простоты реализовано в Local storage, но очевидно, что это вопрос непринципиальный — можно хоть в Global storage хранить, хоть вообще на своем сервере с апи по добавлению/проверке айдишника пользователя.

Ну и на закуску — страница ВКонтакте динамическая, обновляется по вебсокету в том числе без каких-либо активных действий пользователя. Но тут нам на помощь приходит волшебный объект MutationObserver, который автоматически следит за любыми назначенными изменениями страницы и даже предоставляет список добавленных элементов addedNodes. Итого, для расширения достаточно запустить код фильтрации всего контента при загрузке страницы (настраивается в манифесте во время какого события жизненного цикла запускать код) и далее отрабатывать его на всех добавленных элементах, которые любезно предоставит нам MutationObserver.

Вот и всё. Весь кот расширения — один файл в 100 строк. Дешево, сердито и практично! Пользователь, единожды добавленный в черный список, не показывается больше вообще нигде — в любой группе, любом посте, ответе, личных сообщениях, списке поставивших лайки и т.п. где он появляется, расширение тут же назначает ему display = 'none'. И жить становится легче и приятней :)

ЗЫ: кот проекта лежит на отечетсвенном аналоге гитхаба — gitflic.ru/project/ivana/vk-filter потому что сейчас такое дело, что гитхаб/гитлаб в любое время может превратиться в тыкву, да и ВКонтакте тоже отечественный сервис, так что все сходится :) Только проект с кодом не имеет публичный доступ — эта функцинальность пока закрыта для использования на gitflic. Если подскажете удобный отечественный аналог гитхаба с публичными проектами, то возможно перенесу туда. Но выж тоже программисты, а там всего 100 строк кода, и выше имхо я более чем подробно расписал его работу, можете легко реализовать сами при желании :)

ЗЗЫ: оставляйте ваш ценный фидбек в комментах, критикуйте. Только вы же поняли, что в описанной выше логике работы расширения я нигде не опирался на апи ВКонтакте (хоть и выбрал его в списке хабов, потому что имхо очень близкая тема), поэтому его очень легко расширить и на Телеграм, и на… в общем, на всё :)

Комментарии (17)


  1. edo1h
    03.04.2022 22:34

    ЗЫ: кот проекта лежит на отечетсвенном аналоге гитхаба — gitflic.ru/project/ivana/vk-filter потому что сейчас такое дело, что гитхаб/гитлаб в любое время может превратиться в тыкву, да и ВКонтакте тоже отечественный сервис, так что все сходится :) Только проект с кодом не имеет публичный доступ — эта функцинальность пока закрыта для использования на gitflic. Если подскажете удобный отечественный аналог гитхаба с публичными проектами, то возможно перенесу туда.

    гхм… стандартна ситуация, когда код проекта лежит более, чем в одном месте.
    зачем «переносить» куда-то, если можно разместить и на git-что-то-там.ru, и на github.


    1. IIvana Автор
      03.04.2022 22:57

      Хм. А гит-пуш / гит-пулл / гит статус и т.п. на какой сайт за каким ориждином пойдут? Или это также передается параметрами? Не использовал еще такой вариант, надо будет покурить такую возможность.


      1. navferty
        03.04.2022 23:26
        +1

        Да, в локальном репозитории можно переключать origin

        git remote set-url origin git@github.com:User/UserRepo.git


        1. edo1h
          03.04.2022 23:49
          +6

          лучше добавить отдельный remote:


          git remote add github git@github.com:User/UserRepo.git
          git push github

          впрочем, можно к существующему origin добавить второй адрес:


          git remote set-url --add --push origin git@github.com:User/UserRepo.git

          после этого git push origin будет пушить и в гитхаб тоже


          1. IIvana Автор
            03.04.2022 23:57

            Круто, пасиб! Буду юзать! А я еще думал как мне с гитхаба куда-нибудь все продублировать, а оно вон как )


  1. Hrodvitnir
    04.04.2022 06:52
    +1

    Будет неловко, если люди из ЧС со скриншота увидят эту статью


    1. IIvana Автор
      04.04.2022 13:16

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


  1. abyssSoft
    04.04.2022 07:01
    +1

    Хорошая статья. Мне понравилась оригинальность задумки.

    Скажите, а вы не думали написать скрипт для tampermonkey? Просто я раньше тоже писал расширения для браузеров, а потом понял что есть же удобный инструмент, причём универсальный, который можно установить на все браузеры и научить тому что мне нужно. Я например так рекламу яндекса вырезаю.


    1. IIvana Автор
      04.04.2022 13:20
      +1

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


      1. abyssSoft
        04.04.2022 13:43

        Дайте пожалуйста знать, что получится в результате.


  1. lab412
    04.04.2022 07:10
    +2

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


    1. IIvana Автор
      04.04.2022 13:22

      Думал над этим, но когда я первый раз заявил об этом плагине миру (на одном программистском форуме и в своем Телеграм-канале с 40 участниками), мир отреагировал достаточно пассивно и не проявил интереса и энтузиазма ) Но может действительно попробую реализовать эту идею общего шаринга.


  1. delvin-fil
    04.04.2022 17:17


    1. IIvana Автор
      04.04.2022 17:44

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


      1. IIvana Автор
        05.04.2022 13:19

        А бывает и так (только что увидел и не смог не заскринить )))


      1. delvin-fil
        05.04.2022 15:22

        Снова мемчик в тему. ????


  1. AndreyYu
    04.04.2022 23:21

    "искаропки" ! )