2

enter image description here

I want to learn how to use Chrome devtools to create my own custom adblocking rules according to Ublock/Adblock syntax. Now before I do that I need to figure out how Chrome's dev tools work.

Observe the picture please. This entire div element is what I want to block. Unfortunately this div element comes with an id. Said id is a random salad of numbers and letters that change everytime you reload the page.

How can I figure out what the "id" is actually called so that I can create a block rule just for that specific id with that specific name?

Bonuspoints if you can show me how to create the rule :P

0

If the Id is generated randomly each time, you need to find some other property that is unique for that DOM element to hook to. Text properties aren't great because you are hoping that no other node will use the text you are filtering on, and that there is no translation based on locale.

Having said that, I've used it in this example because I'm not sure of anything better on this AllMusic site you are using.

Using Underscore's find function, you can select the child nodes of document.body and return the first node that contains 'ad block' in the text.

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

You now have the DOM element, which you can manipulate (remove, hide, etc.).

An alternative using jQuery's filter function is:

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

PS. I feel like this is more of a StackOverflow kind of question.

0

An Adblock Plus hiding filter consists of two parts: <domain>##<selector>

  • The domain part is just a comma-separated list of domains on which the elements should be hidden.

  • The selector part defines what elements should be hidden and follows the CSS Selector standard. So instead of learning how to write filters, I'd suggest learning CSS selectors because there are a lot of helpful resources out there on how to write those.

For instance, in this case it might help to know that you can select an element based on where it is in the document. e.g. body > :nth-child(1) will select the first element in the body. For more specific selectors you'd need to check which of its characteristics stay constant and which ones change.

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.