Инструкция к расширению BlockIt

Что такое BlockIt?

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

Ключевые особенности

• Гибкость:
  • Вы сами решаете, удалить элемент или скрыть
  • Вы сами решаете, какие элементы блокировать, какие нет
  • Вы решаете, какие правила блокировки оставить, какие отключить, а какие удалить
  • Поддерживаются как CSS-селекторы, так и XPath-выражения
  • Правила применяются также внутри iframe и Shadow DOM
• Приватность: все правила хранятся только локально в браузере и никуда не отправляются.
• Синтаксис BlockIt: для сложных случаев доступен синтаксис, расширяющий стандартный синтаксис CSS-селекторов. Подробности при необходимости можно посмотреть в документации по синтаксису BlockIt.
• Группировка правил по сайтам: правила автоматически группируются для текущего сайта и для всех остальных. Это упрощает управление ими.
• Обмен настройками: вы можете поделиться своими правилами с другими пользователями, экспортировав их в файл.
• Поддержка нескольких языков: интерфейс расширения автоматически переключается на язык, установленный в вашем браузере. Поддерживаются: русский, английский, французский, немецкий, испанский, португальский, китайский и японский. Если ваш язык не поддерживается, интерфейс отобразится на английском.
• Открытый исходный код: расширение разрабатывается под лицензией BSD-3-Clause. Вы можете участвовать в развитии проекта, предлагать улучшения и изучать код на GitHub.

Быстрое начало В начало

Этот путь подходит, если вы хотите сначала попробовать готовый CSS-селектор из DevTools.

Язык интерфейса DevTools на скриншотах — русский, хотя по умолчанию в браузере он на английском. Вы можете изменить настройку языка интерфейса DevTools.

Как настроить DevTools под себя Необязательно

Как открыть DevTools

Действие	Результат
F12	Открывается панель DevTools.
Ctrl + Shift + I	Открывается та же панель.
Правый клик по элементу → «Посмотреть код» / «Inspect»	DevTools открывается с подсвеченным элементом.

Язык интерфейса

1. Откройте DevTools.
2. Нажмите шестерёнку ⚙ в правом верхнем углу и откройте «Настройки» / «Settings».
3. Откройте вкладку «Параметры» / «Preferences».
4. В разделе «Язык» / «Language» выберите нужный язык.
5. Закройте и снова откройте DevTools.

Расположение панели

Нажмите ⋮ в правом верхнем углу DevTools и выберите расположение в блоке «Сторона закрепления» / «Dock side»: справа, снизу, слева или в отдельном окне. Закрепление справа обычно удобно на широком мониторе, снизу — если по вертикали достаточно места, а отдельное окно — при работе с двумя экранами.

‹

›

1

‹

›

1

Режимы блокировки

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

Обычно правило срабатывает сразу. Если элемент остался видимым, обновите страницу.

Способы создания правила В начало

Сначала найдите нужный элемент в DevTools и посмотрите на его тег, классы и атрибуты.

1Скопировать CSS-селектор из DevTools Нажмите, чтобы прочитать

Начните с этого способа, если хотите быстро проверить, можно ли заблокировать элемент обычным селектором. DevTools создаёт его автоматически: выберите элемент, затем «Скопировать» / «Copy» → «Копировать selector» / «Copy selector».

Вставьте селектор в основное поле BlockIt, проверьте счётчик и добавьте правило. Если результат нестабилен после обновления, переходите к StableHTMLFinder или конструктору.

‹

›

1

2Скопировать XPath из DevTools Нажмите, чтобы прочитать

XPath — альтернативный способ описать путь к элементу по структуре страницы. Он может помочь, если классы и другие атрибуты нестабильны, но сам путь к элементу остаётся неизменным. В DevTools выберите «Копировать XPath» / «Copy XPath», затем вставьте выражение в основное поле BlockIt.

Проверьте полученное выражение. Chrome может построить XPath через id. Если этот id меняется, такой XPath тоже будет нестабильным. Абсолютный путь с порядковыми номерами, в свою очередь, сломается при перестройке HTML.

BlockIt проверяет XPath отдельно в основном документе и в каждом iframe, поэтому XPath элемента внутри iframe может сработать. Через границу Shadow DOM браузер не выполняет XPath. В таком случае используйте способ, который строит правило на основе CSS-селектора или расширенного синтаксиса BlockIt: например, конструктор правила либо StableHTMLFinder.

‹

›

1

3Создать быстрое правило из HTML Нажмите, чтобы прочитать

Этот способ даёт больше контроля, чем готовый селектор из DevTools: после разбора HTML вы сами решаете, какие атрибуты войдут в селектор.

‹

›

1

Не оставляйте атрибут автоматически. Класс или id со случайным набором символов может измениться после следующей загрузки страницы.

4Использовать StableHTMLFinder Нажмите, чтобы прочитать

Установить StableHTMLFinder из Chrome Web Store

Подробное руководство: инструкция StableHTMLFinder.

StableHTMLFinder полезен, когда классы и id обфусцированы, меняются между загрузками или на странице много похожих блоков. Он часто проще, чем ручной разбор HTML, но анализ занимает время: расширению нужно несколько раз загрузить страницу.

‹

›

1

StableHTMLFinder не блокирует элементы сам. Он помогает выбрать основу для правила BlockIt:

• CSS-селектор — самый простой вариант, если он построен по устойчивым признакам и находит нужное количество элементов.
• Правило BlockIt — используйте, если для точного поиска нужны возможности расширенного синтаксиса, которых нет в обычном CSS.
• Самостоятельная работа с картой — изучите стабильные признаки самого элемента и его окружения, а затем укажите их в конструкторе BlockIt. Этот вариант полезен, если готовые результаты недостаточно точны.

5Открыть конструктор правила Нажмите, чтобы прочитать

Конструктор правила — мощный инструмент для создания точных правил без знания CSS, XPath или синтаксиса BlockIt. Он подходит и для стабильных, и для нестабильных элементов: правило может опираться не на конкретный класс, а на текст, количество атрибутов или классов, положение среди сиблингов и окружающие элементы.

В DevTools скопируйте HTML нужного элемента, откройте «Продвинутый режим» BlockIt, вставьте HTML в соответствующее поле и нажмите «Открыть конструктор».

Карточка элемента

Каждая карточка описывает один HTML-элемент: тег, количество атрибутов, условия по атрибутам, тексту и позиции.

Дерево связей

Предки находятся выше. Потомки располагаются ниже с отступом. Сиблинги находятся на одном уровне вложенности.

Устойчивые признаки

Автоматически подставленные значения можно отключать. Не используйте меняющиеся id и классы только потому, что они были найдены в HTML.

Проверка

Смотрите количество совпадений сразу, затем используйте «Проверить после обновления», чтобы убедиться в устойчивости результата.

Какие признаки указать в карточке элемента?

По возможности оставляйте только нужные и достаточно устойчивые признаки. Если хотите проверить совпадения в DevTools, используйте признаки, из которых конструктор может собрать обычный CSS-селектор. Метка рядом с предпросмотром показывает, что получилось: «CSS-селектор» или «Правило BlockIt».

• Тег, классы и атрибуты: тег, отдельные классы и обычные условия на имя и значение атрибута обычно можно выразить CSS-селектором. Для имени атрибута подходят точное совпадение и поддерживаемые CSS сравнения значения: точно, начинается с, заканчивается на или содержит.
• Количество атрибутов и классов: можно задать ровно, не менее или не более указанного числа. Эти подсчёты нельзя проверить обычным CSS-селектором — они требуют синтаксиса BlockIt.
• Текст: собственный текст элемента или текст внутри него, в том числе точное совпадение, начало, конец, часть текста или регулярное выражение. Обычный CSS не ищет элементы по тексту, поэтому такое условие требует BlockIt.
• Частичное совпадение имени класса, регулярные выражения и шаблоны имени атрибута: такие условия также требуют BlockIt; CSS-селектор не умеет проверять регулярные выражения.
• Позиция среди сиблингов: порядковый номер среди детей одного родителя можно выразить CSS-псевдоклассом вроде :nth-child(). Но выбор номера среди уже найденных правилом совпадений — отдельная возможность BlockIt.
• Связанные элементы и расстояние до сиблинга: некоторые связи конструктор может выразить CSS, другие сочетания связей и условий требуют BlockIt. Расстояние 0 означает непосредственного соседа.

Если в предпросмотре указано «Правило BlockIt», проверить его как CSS в DevTools не получится. Такие признаки включайте, когда они действительно нужны для точного правила. Само правило можно ввести в поиск по карте стабильности StableHTMLFinder и посмотреть, какие элементы на ней ему соответствуют. CSS-селектор, напротив, можно скопировать и проверить в DevTools.

Связанные элементы

У цели и предков можно добавить непосредственного родителя или просто предка. У цели можно добавить дочерний элемент, потомка или сиблинга; у сиблингов также могут быть потомки. Для сиблинга расстояние можно учитывать при необходимости. Для связанного элемента доступен переключатель «Допускается отсутствие».

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

Предпросмотр и проверка

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

Пример настройки правила для нескольких элементов

1. Включите «Порядковый номер среди сиблингов» и укажите позиции нужных элементов: в примере это 2, 3 и 5.
2. Оставьте точное сравнение имени атрибута class.
3. Удалите из значения класса ненадёжную часть и замените условие «значение: точно» на «значение: содержит».
4. Отключите «Количество классов», если это число не является существенным признаком и может измениться.
5. Прочитайте словесное описание в блоке «Предпросмотр правила» и проверьте, все ли условия нужны.
6. Закройте DevTools на целевой странице и нажмите «Проверить после обновления». С открытыми инструментами разработчика сайт иногда загружает другой контент.
7. Убедитесь, что после обновления количество найденных элементов не изменилось. Это указывает на устойчивость правила.
8. Нажмите «Создать правило».

‹

›

1

Когда переходить к другому способу

Начните с CSS-селектора из DevTools, если нужен быстрый результат. Быстрое правило из HTML подходит, когда признаки элемента выглядят устойчивыми, но вы хотите самостоятельно выбрать атрибуты. Если признаки нестабильны, выглядят случайными или на странице много похожих блоков, переходите к StableHTMLFinder или конструктору.

Конспект по CSS-селекторам В начало

Что такое селекторы?

Селекторы — это способ найти нужный элемент на веб-странице по его свойствам: тегу, классу, идентификатору, атрибутам или положению в структуре HTML.

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

Эти примеры помогут читать и немного редактировать обычные CSS-селекторы.

Как проверить селектор

1. В DevTools откройте вкладку «Элементы» / Elements.
2. Нажмите Ctrl + F или Cmd + F на Mac.
3. Вставьте селектор в строку поиска.
4. DevTools подсветит все совпадения и покажет их количество, например 1 of 3.

1

Типы селекторов

У обычных CSS-селекторов есть ограничения. Они не умеют описывать количество атрибутов или классов без их перечисления, собственный текст элемента, произвольный текст внутри него, регулярные выражения и шаблоны имён атрибутов. Например, запись [data-*] не является стандартным CSS-селектором. Для таких случаев используются правила BlockIt — расширение стандартного синтаксиса CSS-селекторов, в котором доступны конструкции [data-*], :attr-name(/^data-/) и другие дополнительные условия. Ознакомиться с документацией по синтаксису BlockIt.

<main>
  <h1>Основная страница</h1>
  <iframe src="advertisement.html"></iframe>
</main>

<video-player>
  #shadow-root (open)
    <button class="play">Воспроизвести</button>
</video-player>

Управление правилами В начало

Созданные правила отображаются в списке для текущего сайта и в списке правил без привязки к домену. Для правил из конструктора доступны редактирование и удаление; отключённые правила остаются в списке с соответствующей пометкой.

Отключение и удаление

Как отключить правило?

Найдите правило в списке «Активные правила» и нажмите «Отключить». Правило останется на прежнем месте с пометкой «Отключено», но больше не будет применяться. Если правило уже скрыло элемент на открытой странице, обновите эту страницу, чтобы восстановить её исходное содержимое.

Как удалить правило?

Найдите правило в списке «Активные правила» и нажмите «Удалить». Чтобы восстановить скрытый элемент на открытой странице, перезагрузите её с помощью F5 или кнопки обновления вкладки.

Экспорт и импорт

Экспорт сохраняет правила в файл, а импорт добавляет правила из такого файла или заменяет ими текущий список. Эта функция нужна для переноса настроек и обмена ими между устройствами.

‹

›

1

Проверка правил

Откройте страницу, на которой хотите проверить правила, затем откройте BlockIt. В заголовке группы «Для этого сайта: <домен>» нажмите кнопку «Проверить правила».

Проверка показывает, находят ли сохранённые правила элементы на открытой странице. Можно выполнить одно измерение или включить «Проверить стабильность» и выбрать несколько перезагрузок. Во время измерений BlockIt временно не применяет правила, перезагружает страницу и показывает количество совпадений для каждого правила при каждой загрузке.

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

Проверка запускается для правил текущего базового домена и правил без привязки к домену. BlockIt не разделяет субдомены при сохранении обычной привязки: например, правило, созданное на e.mail.ru, сохраняется для mail.ru. При этом проверяются элементы именно на той странице, с которой вы открыли диагностику. Поэтому исправное правило для одного субдомена или раздела сайта может получить статус «Не сработало» на другом субдомене либо по другому адресу. Для достоверного результата откройте страницу, для которой создавалось правило, и запустите проверку оттуда.