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:
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:
---- 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.
