Использование Chrome для создания правил AdBlock/UBlock

Question

Я хочу узнать, как использовать Chrome devtools для создания собственных правил блокировки рекламы в соответствии с синтаксисом Ublock/Adblock. Теперь, прежде чем я это сделаю, мне нужно выяснить, как работают инструменты разработки Chrome.

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

Как я могу выяснить, как на самом деле называется "идентификатор", чтобы я мог создать правило блока только для этого конкретного идентификатора с этим конкретным именем?

Бонусные очки, если вы можете показать мне, как создать правило:P

Answer 1

Скрытый фильтр Adblock Plus состоит из двух частей: <domain>##<selector>

• Доменная часть - это просто список доменов, разделенных запятыми, в которых элементы должны быть скрыты.

• Часть селектора определяет, какие элементы должны быть скрыты, и соответствует стандарту селектора CSS. Поэтому вместо того, чтобы учиться писать фильтры, я бы предложил изучить CSS-селекторы, потому что есть много полезных ресурсов о том, как их писать.

Например, в этом случае может быть полезно знать, что вы можете выбрать элемент в зависимости от того, где он находится в документе. например, body > :nth-child(1) выберет первый элемент в теле. Для более конкретных селекторов вам нужно проверить, какие из его характеристик остаются постоянными, а какие изменяются.

Answer 2

Если Id генерируется случайным образом каждый раз, вам нужно найти какое-то другое свойство, уникальное для этого элемента DOM, к которому нужно подключиться. Свойства текста не очень хороши, потому что вы надеетесь, что никакой другой узел не будет использовать текст, по которому вы фильтруете, и что нет перевода на основе локали.

Сказав это, я использовал это в этом примере, потому что я не уверен, что на этом сайте AllMusic, который вы используете, нет ничего лучше.

Используя функцию find Underscore , вы можете выбрать дочерние узлы document.body и вернуть первый узел, который содержит «рекламный блок» в тексте.

var blockElem = _.find(document.body.childNodes, function (elem) { 
    return elem.innerText && elem.innerText.toLowerCase().indexOf("ad block") != -1 }
);

Теперь у вас есть элемент DOM, которым вы можете манипулировать (удалять, скрывать и т.д.).

Альтернатива, использующая функцию filter jQuery :

var blockElem = $("body div").filter(function() {
    return $(this).text().toLowerCase().indexOf("ad block") != -1;
}).first();

PS. Я чувствую, что это скорее вопрос StackOverflow.