div[data-pagelet^="FeedUnit"]:has([role^=button]:has(> span:has-text(S)):not(:has-text(1)):not(:has-text(2)):not(:has-text(3)):not(:has-text(4)):not(:has-text(5)):not(:has-text(6)):not(:has-text(7)):not(:has-text(8)):not(span:has-text(9)):not(span:has-text(w)))
In case anyone interested: https://github.com/dawnerd/ublock-filters/blob/master/sites/...
Is there no simple way to accomplish the same in a browser extension without bringing in some crazy AI solution? Just read the webpage as it is rendered to an actual human, identify the x/y coordinates of the element, pass that to Firefox/Chrome/Safari's element selector, and delete. Voila!
I'm sure there's a very good reason why this exact solution just doesn't work, but I'd love to hear it explained, because it seems so simple to me. Then again I'm a backend guy, and I just don't even know frontend.
Humans read web pages using their vision. So what you’re proposing is to look at the final rendered image of text instead of the DOM tree. The only way to do that would be to perform OCR (https://en.wikipedia.org/wiki/Optical_character_recognition) on a screenshot of the whole web page. This would be possible, but I think nobody’s tried because it feels overly complicated, and many OCR libraries can’t understand text 100% reliably, not even computer-rendered text. Also remember that the OCR library would have to run in JavaScript. Would it run fast enough to block the ad before the user sees it? Would it annoy the user by spinning up their computer’s fan?
> identify the x/y coordinates of the element
This wouldn’t be too too hard to implement using `document.elementsFromPoint(x, y)`. This part isn’t the problem.
Also, the problem with OCR/CNN solutions are that you have to render ahead (i.e. parts of the page that you haven't scrolled to yet) to remove ads without being disruptive to the website's content flow.
The word "promoted" might not even appear as text, it might be simply a series of divs with one letter each (out of order, of course) and then visually defined with CSS.
The browser doesn't know it's rendering a word, it only knows it's rendering a series of divs with one letter on each, and it absolutely can't know what the visual representation of the divs spell.
What you are proposing is another crazy AI solution, OCR.
Which would mean to render the document, using pattern recognition delimit the area with the sponsored post, then pass those coordinates to the browser in order to select the currently visible element, then delete it.
Even then I could think of a thousand ways to beat this, because OCR can't see invisible things and you can do all sorts of fun stuff with invisible styling, and it'd be the same game of cat and mouse the ad blockers are currently running but at a higher level of abstraction.
[1] https://addons.mozilla.org/en-US/firefox/addon/fb_ad_block/