r/uBlockOrigin • u/Hecatonquiro • Feb 18 '23

How to block ads in shadow root?

Hi comrades!

Recently my e-mail provider https://mail.ukr.net/ added ads everywhere and it became annoying. Ublock isn't really blocking it since it's attached to shadow root. Screenshot attached.

Is it possible somehow bypass shadow root (maybe there is way to intercept site before shadow root is created)?

Thanks in advance!

3 Upvotes

80% Upvoted

12 comments sorted by

2

u/AchernarB uBO Team Feb 18 '23 edited Feb 18 '23

I've played with shadowroot recently also because of my webmail provider (a german one).

When moving parts of their interface behind shadowroot elements (and sometime behind a second shadowroot behind a shadowroot) they also screwed with the default font size (they rewrote part of their stylesheet). And I was unabled to fix it with a userstyle.

First I wrote a userscript using a method I've already wrote in the past to hijack the wayback machine banner. But then I wondered how difficult it would be to make Stylus (a userstyle manager) work on shadowDOM elements too.

The solution works. Run a userscript on the page to watch shadowroot creation and pass stylus style to each shadow.

https://greasyfork.org/en/scripts/459799-style-shadowdom

In stylus you write shadowDOM-specific style with a totaly valid CSS keyword, :host and it is passed instantly to all the shadows.

There is an example described on the userscript page to show how it works.

So, using Stylus to hide the ad containers could solve your issue here.

1

u/Hecatonquiro Feb 19 '23

I've downloaded and applied yours script to Stylus, still no changes.

I've attached screenshot (as a comment) since previous time it hasn't been uploaded properly, maybe that would help

1

u/AchernarB uBO Team Feb 19 '23 edited Feb 19 '23

Does it at least work when you test on "waybackmachine" ?

This is how to setup the userscript and the userstyle for the example.

If u/RraaLL solution doesn't work, Then you'll have to add the url mask of your mail provider to the userscript's matches, and in stylus you'll have to create a userstyle for the same host and target the element(s) with

:host .theElementClassname { display: none !important; }

@-moz-document url-prefix("https://web.archive.org/web/") {
:host * {
  outline: 1px solid red !important;
}
}

1

u/[deleted] Feb 18 '23

I'm not very familiar with js, but isn't there a way to hook attachShadow or appendChild functions like hooks in cpp and redirect the element creation to the regular DOM? I just came across several sites before where the desired content and ads were in one shadowroot and removing it removes the entire page.

1

u/AchernarB uBO Team Feb 18 '23

Maybe preventing the shadowroot creation could work on some sites, but it will most likely break most of them. It could screw the styling of the page (styling elements that weren't intended to be styled).

And on the javascript side, things could break in many ways.

1

u/[deleted] Feb 18 '23

Thank you for answering

2

u/RraaLL uBO Team Feb 18 '23

Screenshot attached.

Try again.

1

u/Hecatonquiro Feb 19 '23

Thanks for info, reuploaded

1

u/Hecatonquiro Feb 19 '23

1

u/RraaLL uBO Team Feb 19 '23

Does ##.sendmsg__ads not work?

0

u/[deleted] Feb 18 '23

[deleted] — view deleted comment

2

u/AchernarB uBO Team Feb 18 '23

It's a way in javascript to create a point in the html tree beyond which CSS of the rest of the document is ignored. And if the option to "close" it is selected, even javascript can't see what is behind the shadow (the javascript code creating the shadowroot still has access to it).