На многих сайтах встречаются элементы, которые хотелось бы убрать: навязчивые баннеры, всплывающие окна, рекламные блоки или просто ненужные части интерфейса.
Современные блокировщики рекламы позволяют не только использовать готовые списки фильтрации, но и самостоятельно выбирать элементы для блокировки. В большинстве случаев этого достаточно: выбрал элемент, создал правило — и он больше не мешает.
Но иногда всё оказывается сложнее.
Например, после обновления страницы заблокированный элемент появляется снова, потому что его классы или положение в DOM изменились. Или автоматически созданное правило затрагивает другие элементы, которые пользователь вовсе не собирался блокировать.
В таких ситуациях важно не просто указать, какой элемент нужно заблокировать, но и определить, по каким именно признакам его следует находить.
Для решения подобных задач я разработал BlockIt — бесплатное расширение для Chrome, позволяющее создавать гибкие правила блокировки элементов веб-страниц.
В BlockIt можно использовать обычные CSS-селекторы, XPath или собственный расширенный синтаксис, который позволяет учитывать дополнительные характеристики элементов и их окружения: текст, атрибуты, классы, положение в DOM, связи с другими элементами и многое другое.
При этом создавать и настраивать правила можно без знания синтаксиса селекторов или специальных выражений. BlockIt предоставляет инструменты, позволяющие выбирать нужные признаки элементов, исключать нестабильные атрибуты и классы, комбинировать условия поиска и проверять, продолжает ли правило работать после обновления страницы.
Таким образом, BlockIt может быть полезен как опытным пользователям и веб-разработчикам, которым нужен подробный контроль над поиском элементов, так и тем, кто просто столкнулся с особенно назойливым блоком, который не удаётся надёжно убрать обычным способом.
Главная идея BlockIt — дать пользователю инструменты для создания точных и устойчивых правил, сохранив возможность самостоятельно решать, какие признаки использовать для блокировки.
Почему обычного CSS-селектора иногда недостаточно
Представим, что на странице есть несколько похожих блоков. Нужно заблокировать только один из них, не затрагивая остальные.
Chrome DevTools позволяет автоматически скопировать CSS-селектор выбранного элемента. Например:
#app > div:nth-child(2) > div:nth-child(3)
Этот селектор ищет элемент div, который является третьим дочерним элементом другого div. Тот, в свою очередь, должен быть вторым дочерним элементом элемента с идентификатором app.
На текущей странице он может работать правильно. Но если разработчики добавят новый контейнер или изменят порядок элементов, селектор может начать находить другой блок либо вообще перестать работать.
Другая распространённая проблема — динамически генерируемые классы.
Например, при одной загрузке страницы элемент выглядит так:
<div class="banner_a8f32">
А при следующей:
<div class="banner_c91e4">
Селектор .banner_a8f32 ищет элемент с классом banner_a8f32. После изменения класса он больше не найдёт нужный блок.
Иногда достаточно подобрать более устойчивый CSS-селектор. Но бывают ситуации, когда для точного поиска необходимо учитывать дополнительные признаки: текстовое содержимое, количество атрибутов, положение относительно других элементов или сочетание нескольких условий.
Именно для таких случаев в BlockIt предусмотрены дополнительные возможности.
Что такое правило BlockIt
Прежде чем перейти к способам создания правил, стоит разобраться с терминологией.
В широком смысле правило BlockIt — это описание того, как найти элементы страницы, которые необходимо заблокировать.
Для поиска можно использовать:
- CSS-селектор — стандартный синтаксис для поиска элементов DOM.
- XPath — язык выражений для поиска элементов в структуре документа.
- Синтаксис BlockIt — собственный синтаксис расширения, дополняющий возможности CSS-селекторов.
Таким образом, даже обычный CSS-селектор, добавленный в расширение, становится правилом блокировки BlockIt.
Однако в интерфейсе расширения термин «Правило BlockIt» используется и в более узком смысле — для обозначения выражения, написанного с использованием собственного синтаксиса BlockIt, в отличие от обычного CSS-селектора.
Например, после создания правила можно увидеть пометку «CSS-селектор» или «Правило BlockIt». В этом случае названия указывают именно на используемый синтаксис.
Несколько способов создать правило
Я хотел, чтобы BlockIt подходил как для простых задач, так и для ситуаций, когда требуется подробный контроль над поиском элементов.
Поэтому в расширении предусмотрено несколько способов создания правил.
1. CSS-селектор
Самый простой вариант — выбрать элемент в Chrome DevTools, скопировать его CSS-селектор и вставить в BlockIt.
Но использовать DevTools необязательно: CSS-селектор можно написать вручную или отредактировать уже существующий.
Например:
div.notice[data-type="promo"]
Этот селектор найдёт элементы div, у которых есть класс notice и атрибут data-type со значением promo.
Расширение показывает количество найденных совпадений. Это помогает проверить, не затрагивает ли правило лишние элементы.
Для найденных элементов можно выбрать одно из двух действий:
- Удалить — полностью убрать элемент из DOM, обычно освободив занимаемое им место.
- Скрыть — сделать элемент невидимым, сохранив занимаемое им место на странице.
Второй вариант полезен, если после удаления элемента нарушается вёрстка.
2. XPath
BlockIt также поддерживает XPath-выражения.
Например:
//div[@data-type='promo']
Это выражение ищет элементы div, у которых атрибут data-type имеет значение promo, независимо от их расположения в документе.
XPath предоставляет дополнительные способы поиска элементов и навигации по DOM.
Однако сам по себе XPath не гарантирует устойчивости. Если выражение опирается на изменяющиеся атрибуты или положение элементов, оно тоже может перестать работать.
3. Быстрое правило из HTML
Один из наиболее удобных способов создания правил — «Быстрое правило».
Вместо готового селектора достаточно скопировать HTML нужного элемента из Chrome DevTools и вставить его в соответствующее поле BlockIt.
Расширение разбирает HTML и позволяет выбрать, какие признаки следует использовать при поиске.
Например, исходный элемент выглядит так:
<div id="cmpbox" class="cmpbox_a8f32" role="dialog">
Если класс cmpbox_a8f32 генерируется динамически, его можно исключить, оставив только атрибуты id="cmpbox" и role="dialog".
После этого достаточно нажать кнопку «Добавить правило».
Таким образом, пользователь самостоятельно определяет, какие атрибуты и классы учитывать, но ему не нужно писать селектор вручную.
Конструктор правила
Для более сложных случаев в BlockIt предусмотрен конструктор правила.
Он позволяет описывать условия поиска элементов через интерфейс, не требуя знания CSS, XPath или собственного синтаксиса BlockIt.
В конструкторе можно учитывать не только признаки самого элемента, но и его окружение.
Например:
- HTML-тег, классы и атрибуты;
- текстовое содержимое, включая поиск по части текста и регулярным выражениям;
- количество классов и атрибутов;
- положение элемента среди соседних элементов;
- признаки родителей, предков, потомков и сиблингов;
- расстояние до сиблинга и отсутствие определённых связанных элементов.
Условия можно комбинировать.
Допустим, на странице несколько элементов с одинаковыми классами, но нужный находится внутри контейнера с определённым атрибутом. Вместо того чтобы полагаться на порядковый номер элемента, можно использовать признаки его окружения.
Или, если классы постоянно меняются, попробовать найти элемент по тексту и другим более устойчивым характеристикам.
Конструктор показывает словесное описание сформированного правила. Это помогает контролировать, какие именно признаки участвуют в поиске, даже если пользователь не знаком с синтаксисом селекторов.
Проверка после обновления страницы
Найти нужный элемент один раз — ещё не значит создать надёжное правило.
На динамических сайтах важно убедиться, что оно продолжает работать при последующих загрузках.
Поэтому в конструкторе правила предусмотрена проверка после обновления страницы.
Она позволяет сравнить количество найденных элементов до и после перезагрузки.
Если совпадения исчезли или их количество изменилось, это может указывать на нестабильность выбранных условий.
Можно скорректировать правило и повторить проверку.
Разумеется, совпадение количества элементов ещё не гарантирует, что правило всегда будет находить именно то, что нужно. Но такая проверка помогает обнаружить некоторые проблемы ещё на этапе создания правила.
Расширенный синтаксис BlockIt
Не все условия, доступные в конструкторе, можно выразить обычным CSS-селектором.
Например, стандартный CSS не предусматривает поиск по произвольному текстовому содержимому или проверку количества атрибутов элемента.
Для таких случаев я разработал собственный синтаксис BlockIt, расширяющий возможности CSS-селекторов.
Например, можно искать элементы по собственному тексту, не учитывая текст вложенных элементов, проверять количество классов и атрибутов или задавать дополнительные условия для окружающих элементов.
Если выбранные в конструкторе условия можно выразить стандартным CSS, результатом будет обычный CSS-селектор.
Если требуются дополнительные возможности, конструктор сформирует «Правило BlockIt» — здесь этот термин используется в узком смысле, то есть обозначает выражение с использованием расширенного синтаксиса.
В обоих случаях пользователь получает готовое правило для поиска и блокировки элементов.
При этом изучать синтаксис BlockIt необязательно: сложные условия можно составлять непосредственно в конструкторе.
А для тех, кто предпочитает работать с выражениями вручную, доступна документация синтаксиса BlockIt.
Когда обычный инструмент блокировки элементов не справляется
Представим ситуацию: на сайте появился раздражающий блок, который не блокируется стандартными фильтрами установленного блокировщика рекламы.
Пользователь решает заблокировать его вручную с помощью встроенного инструмента выбора элементов. Он выделяет нужный блок, создаёт правило — и элемент исчезает.
Но после обновления страницы он появляется снова.
Причина может заключаться в том, что автоматически сформированный селектор опирался на динамический класс или изменяющуюся структуру DOM.
В такой ситуации BlockIt предлагает несколько вариантов решения.
Можно самостоятельно подобрать более устойчивый CSS-селектор, воспользоваться XPath или составить сложное правило с дополнительными условиями через конструктор.
Например, отказаться от динамического класса и учитывать текст элемента, его атрибуты или признаки окружающих контейнеров.
После этого можно проверить работу правила в конструкторе при повторной загрузке страницы.
Это позволяет справляться с некоторыми сложными элементами, для которых автоматически предложенный селектор оказался недостаточно надёжным.
Конечно, подобные задачи можно решать и другими инструментами. В частности, uBlock Origin поддерживает расширенные косметические фильтры, позволяющие описывать сложные условия поиска.
Особенность BlockIt — в сочетании нескольких способов создания правил, подробного контроля над условиями поиска и инструментов, позволяющих работать со сложными условиями без изучения специального синтаксиса.
При этом расширение не обещает автоматически находить идеальные признаки для любого элемента.
Надёжность правила зависит от особенностей конкретной страницы и от того, насколько удачно выбраны условия поиска. BlockIt предоставляет инструменты для решения этой задачи, но окончательный выбор остаётся за пользователем.
Работа с iframe и Shadow DOM
Некоторые элементы страницы находятся не в основном DOM-документе.
Например, содержимое может размещаться внутри iframe или использовать Shadow DOM.
Это создаёт дополнительные сложности при поиске и блокировке элементов.
BlockIt поддерживает применение правил внутри iframe и Shadow DOM, хотя для разных способов поиска существуют технические ограничения.
В частности, XPath не может пересекать границу Shadow DOM. Для таких случаев можно использовать правила на основе CSS или расширенного синтаксиса BlockIt.
Кроме того, собственный синтаксис BlockIt предусматривает специальные условия, связанные с iframe и Shadow DOM.
Это расширяет возможности поиска элементов в сложных структурах веб-страниц.
Как BlockIt связан со StableHTMLFinder
В предыдущей статье о StableHTMLFinder я рассказывал о проблеме нестабильных CSS-селекторов и о том, как анализировать изменения DOM между загрузками страницы.
StableHTMLFinder и BlockIt решают разные, но связанные задачи.
StableHTMLFinder помогает определить, какие элементы и признаки сохраняются при повторных загрузках страницы.
BlockIt позволяет использовать выбранные признаки для поиска и блокировки нежелательных элементов.
Например, если классы нужного блока постоянно меняются, можно сначала исследовать страницу в StableHTMLFinder, найти устойчивые признаки самого элемента или его окружения, а затем использовать их для создания правила в BlockIt.
StableHTMLFinder также может формировать CSS-селекторы и правила с использованием синтаксиса BlockIt, которые можно скопировать в расширение для блокировки.
Но использовать оба инструмента вместе необязательно: BlockIt работает самостоятельно.
Управление правилами
После создания правила можно не только применять, но и управлять им.
BlockIt позволяет отключать правила без удаления, группирует их по сайтам и поддерживает экспорт и импорт настроек.
Это удобно, если со временем накапливается много правил для разных страниц.
Все правила хранятся локально в браузере и не отправляются на сервер.
Исходный код BlockIt открыт и доступен на GitHub под лицензией BSD-3-Clause.
Попробуйте BlockIt
BlockIt — бесплатное расширение для Chrome.
Если хотите попробовать его самостоятельно, посетите официальную страницу BlockIt, там вы найдёте ссылку для скачивания расширения из Chrome Web Store.
Для знакомства с возможностями расширения я подготовил подробную инструкцию с примерами и скриншотами. В ней рассмотрены разные способы создания правил — от простого CSS-селектора до конструктора со сложными условиями.
Если вы сталкивались с элементами, которые сложно заблокировать обычными CSS-селекторами, мне было бы интересно узнать, какие способы вы использовали для решения этой задачи.
