Використання Chrome для створення правил AdBlock / UBlock

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

Спостерігайте за малюнком, будь ласка. Весь цей елемент діви - це те, що я хочу заблокувати. На жаль, цей елемент діви поставляється з ідентифікатором. Згаданий ідентифікатор - випадковий салат із цифр і букв, який змінюється щоразу, коли ви перезавантажуєте сторінку.

Як я можу зрозуміти, як насправді називається "id", щоб я міг створити правило блоку саме для цього конкретного ідентифікатора з цим конкретним іменем?

Бонусні бали, якщо ви можете показати мені, як створити правило: P

Якщо Idкожен раз генерується випадковим чином, вам потрібно знайти якусь іншу властивість, унікальну для цього елемента DOM. Властивості тексту не є великими, тому що ви сподіваєтесь, що жоден інший вузол не використовуватиме текст, який ви фільтруєте, і що немає перекладу на основі мови.

Сказавши це, я використовував це в цьому прикладі, тому що я не впевнений у чомусь кращому на цьому веб-сайті AllMusic, який ви використовуєте.

Використовуючи функцію підкресленняfind , ви можете вибрати дочірні вузли document.bodyта повернути перший вузол, який містить 'рекламний блок' у тексті.

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

Тепер у вас є елемент DOM, яким ви можете маніпулювати (видаляти, приховувати тощо).

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

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

PS. Я відчуваю, що це більше питання StackOverflow.

Приховуючий фільтр Adblock Plus складається з двох частин: <domain>##<selector>

• Доменна частина - це лише розділений комою список доменів, на яких слід приховати елементи.

• Селекторна частина визначає, які елементи слід приховати, і відповідає стандарту CSS Selector . Тож замість того, щоб навчитися писати фільтри, я б запропонував вивчити селектори CSS, оскільки там є багато корисних ресурсів щодо їх написання.

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