DandelionSprout / adfilt

The place where I, DandelionSprout, store my web filter lists for countless topics, including my Nordic adblock list. As simple as that, really.
Other
1.51k stars 149 forks source link

##.: Hides page elements, based on one or more class values in the F12 "Elements" filetree (separated with full-stops). #774

Closed ghost closed 1 year ago

ghost commented 1 year ago

I’m sorry for bothering you I’m probably just stupid or below average intelligence

Thank you for your respiratory it does help someone what but I’m still confused on this first one

.: Hides page elements, based on one or more class values in the F12 "Elements" filetree (separated with full-stops).

so I know that F 12 is how we get to developer tool or inspect element if using Firefox or chrome

man’s I have been learning css and html

so when you said it hides page elements which that part is html based on one or more class values

do you mean like? Like selector.{property: [”value;”] }

Is this this the value you meant?

so like if I did ##.

It would block all element with a value?

meaning

.btn {background-color:red;}

so since this element has a class with a value aka “red”

it gets blocked? As well any other elements with a class of a property and value?

Also I don’t understand what you mean separated with full stops

Again sorry with even your version I have question I’m probably just too dumb to comprehend what you simplified

Also I will be happy to a donation

Any chance could I get 1 on 1 with you? I really want to understand this so that I don’t have to always bother Adguard I’m the kind of person that only wants to take my computer into a shop to get fix after iv tried everything imaginable of searching, learning, reading, trying

And I really want to understand this!!! I’m just worried I’m too dumb to

DandelionSprout commented 1 year ago

I was thinking that linking to that page would be helpful and considered friendly, and not make you continue to extremely panic the way you've done on https://github.com/AdguardTeam/AdguardFilters/issues overnight. Calm down very, very much, or this will be the quickest block I've ever made on a Git site.

I can at least answer the core question regarding ##.: If we take this screenshot from Dev Tools below: image Then ##. simply tells the adblocker to look for any class= values. For example page-responsive. As a result, ##.page-responsive would hide that part of the page.

DandelionSprout commented 1 year ago

On paper, experimenting around with uBlock Origin's element picker (Icon below; other adblockers' pickers are less versatile) and the F12 element tree should be easier and quicker than asking others; so I sadly won't allow particularly many questions about such. image

DandelionSprout commented 1 year ago

YouTube courses on HTML and CSS are irrelevant to adblockers, as they only teach how to create such things, not how to modify them.

I don't think there are any courses in existence on adblocker syntax, as it has unfortunately traditionally been a matter of "Messing around with element pickers and how to host TXT files" with no one (except arguably me, who also made list templates for beginners long ago) seeming to think about making a step-by-step guide for such.

iam-py-test commented 1 year ago

Would doing courses on everything there is about dev tool elements help?

Imre (DandelionSprout) might disagree (and he is far more knowledgeable than me), but I personally would say probably yes. Sadly, all of the adblocker references I'm aware of require at least a basic understanding of HTML/CSS. developer.mozilla.org is a good reference and has some guides on HTML/CSS, although all are about creating websites and not reverse engineering them. The developer tools are really helpful, and even experienced filterlist maintainers probably still use them. Sadly, they also aren't the easiest to learn. I don't even think iOS Safari has devtools though, so if you are only using iOS, it is understandably harder (I started programming using only iOS, so I guess it's possible). AdGuard for iOS does have it's own element "picker" (Click on the AdGuard icon in Safari, click "Block elements on this page", and then click on the element you want to block. Expanding the "Advanced Settings" will show you the rule AdGuard has come up with)

Images The rule AdGuard created is github.com##div.logged-out.env-production.page-responsive.header-overlay.home-campaign:first-child > div.application-main:nth-child(5) > main.font-mktg > div.overflow-hidden:first-child > div.px-3.home-campaign-hero:nth-child(2) > div.position-relative.pt-3.pt-md-8.pt-lg-12.container-xl.js-build-in-trigger.build-in-animate > div.d-flex:last-child > div.col-11.text-left.pt-12.mt-12.pl-2.pl-sm-0:last-child > h1.h0-mktg.mt-sm-6.mt-md-11.mt-lg-9.mb-2.mb-sm-4.position-relative.z-2:nth-child(2) . That looks pretty intimidating. I have simplified it to `github.com##div.logged-out.env-production.page-responsive.header-overlay.home-campaign:first-child` The first part (`github.com`) means this will only be applied to github.com. The `##` means this is a comedic filter (a filter which hides something on the page). The first part of the rule is `div`. This means the element I selected is a `div` element. The `.logged-out` means "select any element with the class logged-out". The `.logged-out.env-production.page-responsive.header-overlay.home-campaign` means "select any element with the classes logged-out, env-production, page-responsive, header-overlay, and home-campaign. `first-child` means to select the first of the "elements" which are "under" this `div`.

Sorry I can't be more helpful. I'm not a very good teacher.

DandelionSprout commented 1 year ago

Sure I'm a big fan of fairies and Lalaloopsy, but let me be very straightforward here:

w h a t t h e f u c k

Posting art portfolios in fullsize, that are just barely better than typical deviantART stuff, is not a recipe to get anywhere in the world of adblocking regardless of intent. I am closing this thread, and ceasing all further contact with you (malicerainbow), because there is 0% chance that anything good could come out of this if this thread continued.

krystian3w commented 1 year ago

https://adguard.com/kb/general/ad-filtering/create-own-filters/#cosmetic-rule

https://help.adblockplus.org/hc/en-us/articles/360062733293-How-to-write-filters#content-filters