How to use Brave's "Cosmetic Filter" to block undesired page elements

Hello everyone!

I’m writing this because I see a lot of reports citing ads still being displayed in browser. The majority of the time, these ads are first party and its easy to forget that Brave does not block 1st party ads by default, as they tend to be safe/non-malicious. However, in the case of gmail, Facebook and many other websites I can see why this may not be desirable and thought that it would relevant to show how this can still be done by a feature recently implemented in Brave (Dev/Beta):

Brave Cosmetic Filter

(Name pending)

This feature is still in development and not entirely intuitive, so I’m going to try and explain it as clearly as possible for those who may need some extra assistance:

If you right-click anywhere on a page in Brave (Beta/Dev), you’ll see this little guy:
image

This feature allows you to block an element seen on a page regardless of what that element is (again, this feature is still being tested and is WIP). For example, if I were on Reddit and saw some content I’d rather not see, I might block this content like so:

Blocking elements this way removes the selected element from the page. Any time you return to that page, the element will remain blocked until the second option in the context menu ( Clear CSS rules for this site) is selected and the page is refreshed at which point the page will display normally.

You’ll notice that, in the example above, the input box in the selector form is initially pre-filled. The filter will attempt to capture the appropriate element based on where you right-click. However, you can also manually enter specific page elements to be blocked. A good use-case for this would be ads that appear in your Gmail inbox:

:point_up: ---- As you can see above, the selector is having trouble detecting the proper element to block. This doesn’t mean its not possible, just that it requires a few extra steps for those willing:

Here, I was able to block these ads on the page by using the inspector and manually adding the appropriate container/tag in the selector box. If you’re not particularly well versed in HTML/CSS (or the inspector itself) this may take a bit of trial and error. Luckily, the built in developer tools/inspector are pretty easy to use as far as isolating what containers/tags correspond to different elements on the page. We’re working on fleshing this feature out to be more approachable and easier to use.

Hopefully this brief tutorial proves useful to someone. If you have any questions regarding the Cosmetic Filter, please don’t hesitate to ask.

31 Likes

Excellent post @Mattches! :fire:

7 Likes

Great to finally see this implemented and it got a great little post too :ok_hand:

7 Likes

That’s awesome! You guys rock, I’m loving Brave. So great having the speed of Chrome backed by the full extension store, minus all the crap. Eager for all the functions to be tested and for Rewards to be enabled. Thanks so much!

8 Likes

Awesome work on the post @Mattches :+1:

8 Likes

Where does Brave store the list of selectors I have chosen to block? Can the file be edited outside of the UI described above? macOS 10.14.1 (18B2107)

5 Likes

Essential function nowadays, in addition to being integrated into the browser.
Happy to use it since Brave v0.56.12 I guess. :clap::clap:

7 Likes

I’m campaigning to get updates/additional features for this pushed up in priority due to all the user interest. Glad you’re enjoying it :slight_smile:

8 Likes

Hello. I just installed the Brave browser for Windows. I’m attempting to block some elements using the element selector. I am able to block the element temporarily until the page is reloaded. Afterwards, the element (with the same ID, so it’s not being assigned a new ID upon reload) appears again. Why are my blocked elements not being saved? If it’s of any use, the website that I am trying it on is reddit.com.

3 Likes

@vsi2btemp,
New Reddit or old Reddit?

3 Likes

Hi.
Im not even able to get the selector box.If y didnt get it yet,im quite green.
I r-click on the ad in gmail,go down to “Brave” and l-click “block element via selector” but nothing happens!
Im sure its some obvious thing im not doing correctly.PLEASE point it out to me!This whole ads-in gmail-thing stresses me out.
Thanks.

3 Likes

@ddmeltzer8,
Can you tell me what Brave version you’re using?

4 Likes

Hi.
Heres a cap.Let me know if theres anything else y need to know.
Thanks.

1 Like

I think it might be a click issue. Could you just right click and then hover over Brave so that the fly out menu comes and then click Block element via selector? I remember experiencing it sometime back but it wasn’t consistently reproduced for me.

5 Likes

@sriram good call.
@ddmeltzer8, this may not be what you’re doing at all but if you click on “Brave” in the context menu the menu will close. You have to hover to get the additional submenu:

4 Likes

Yes,i know.But when i click Block elem…nothing happens.I also tried going through “inspect” but thats was a bit toooo complicated for me.
Any other ideas how i can fix it?
Thanks.

2 Likes

Can you share an image and URL of what it is you’re trying to block? I can test on my end.

5 Likes