Browser-laptop: Block native ads

[fczuardi]

Site: https://twitter.com/

Steps to reproduce:

1- On the menu, setup Bravery > Block ads
2- Open https://twitter.com/

Expected results:

Zero promoted tweets are shwon.

Actual results:

Promoted tewwts are still visible.

Screenshot:

[BrendanEich]

We aren't (yet) taking on "native ads" in Twitter, Facebook, or other such apps. We do want to support user scripts such that people can share ways to block these, since they vary a lot in details by which they would be identified and removed from the presentation (not in general network-level blocked as we do with third party ads and trackers).

[jonathansampson]

Just received a request from another user to block _Promoted Tweets_ from Twitter. Took a few minutes to examine them. As far as elements go, these tweets have a .promoted-tweet class, which makes targeting and hiding the elements a breeze. That may not be necessary, however.

The ads appear to be loaded from predictable domains, which would make pattern-matching fairly straight-forward. One such ad that I came across was a the following path: https://twitter.com/i/cards/tfw/v1/836148298583015426?advertiser_name=IBM%20Mobile&cardname=summary&is_following_advertiser=false&autoplay_disabled=true&forward=true&impression_id=3289c87263e1be6f&lang=en&card_height=130&scribe_context=%7B%22client%22%3A%22web%22%2C%22page%22%3A%22home%22%2C%22section%22%3A%22home%22%2C%22component%22%3A%22tweet%22%7D.

Actually, that link appears to only be part of the ad.

[cndouglas]

+1 from #8211 (promoted tweets)

[gojomo]

Notably at the moment, if you go the inspector and add a style rule...

.promoted-tweet {display:none;}

...promoted tweets will be hidden. But if you go to about:adblock and add a custom filter:

twitter.com##.promoted-tweet

...they're not hidden. So perhaps Twitter is effectively thwarting the ad-blocker.

[jonathansampson]

@gojomo You're correct. You can presently modify one of our injected CSS files to accomplish this hiding automatically. It isn't yet ideal (as your changes are reverted by updates), but it works for now: you need only to modify the selector in the following file:

_%localappdata%\brave\app-0.19.53\resources\extensions\brave\content\styles\removeEmptyElements.css_

Note that you'll need to replace _0.19.53_ with whichever version of Brave you're using.

.ad-hideable,
.ad-div,
.masthead-ad-control,
.video-ads,
#ad_creative_3,
#footer-ads,
#watch7-sidebar-ads,
.ytp-ad-progress-list,
.ad-container,
#video-masthead,
- #watch-channel-brand-div {
+ #watch-channel-brand-div,
+ .promoted-tweet {
    display: none !important;
}

[gojomo]

@jonathansampson Thanks, I was excited to hear this might be possible. But on MacOS, I did not find any version-specific directory like app=0.19.53. I found a very-similar file at:

/Applications/Brave.app/Contents/Resources/extensions/brave/content/styles/removeEmptyElements.css

Unfortunately, adding .promoted-tweet to this file had no effect on elements on Twitter, even after a quit-relaunch. Still, though, adding a style for the same selector, in the inspector, does have the desired hiding effect.

Might the real removeEmptyElements.css be hidden or cached elsewhere on MacOS? Or somehow otherwise disabled even for a site with 'shields-up' and 'block ads' enabled?

Also, still curious why an otherwise ostensibly-valid AdblockPlus rule in the 'custom filters' is having no effect, causing this CSS-approach to be recommended instead. Known issue?

[bsclifton]

@Snuupy is currently addressing this with brave-core with a cosmetic filter (you can check out his PR here: https://github.com/brave/brave-extension/pull/48). You can hide any element on the page and edit the selector before it gets saved

We won't be fixing this with browser-laptop though- so I'll close as wontfix

[bsclifton]

Just to clarify the above: once the above PR is merged (and you're using brave-core) you would need to block these ads yourself (we wouldn't be blocking the 1st party ads by default)

[notDavid]

Hi, just curious... so when reading this

We do want to support user scripts such that people can share ways to block these, since they vary a lot in details

and this:

We will also need a page where the rules can be visible (ex. about:adblock) and perhaps editable (possibly broken down by domain).

does that mean it will eventually be possible to just use shared lists for this, like the way for example uBlock Origin currently works in Firefox?

[bsclifton]

@notDavid yup- that would be the goal 😄 First, by being able to import/export. Then we can look into ways to share the lists (ex: be able to subscribe to a list)

You should leave some feedback there with what you'd like to see 😄 (or specific questions)