Safari Remove Custom Elements
I would like to remove custom HTML elements from websites - mainly ad banners or it could be anything. It looks like this functionality is not allowed with the latest ad blockers in the extension gallery (please correct me if I am wrong). So far I have tried Ghostery Lite, Adblock, Ka-Block, UBlock, 1Block, etc.
I am curious if this could be done with a custom extension that I only use locally:
- keep a list of unwanted HTML elements per site
- remove elements on site visit
Before I spend hours on this, is this doable?
Mac OS X: 10.15.5 Safari: 13.1.1
Solution 1:
Adguard for Mac avoids the restrictions placed on browser extensions. It intercepts http(s) connections from all apps (not just Safari) and applies its blocking rules.
As well as using blocklists linked to Adguard, you can create your own. So invent your own rules - limited only by your imagination!
And if you need a little help there is an active forum which includes a section for Custom Filters.
Solution 2:
Before I spend hours on this, is this doable?
Yes. However, it would be a spectacular time suck trying continually maintain it.
A better (and my preferred) option is to do something at the network level and use pfBlockerNG or piHole. I personally use pfBlockerNG because I’m a big proponent of pfSense firewall routers (as well as FreeBSD). pf is also the default firewall found on macOS. Though, I’ve never tried running pfBlocker on macOS.
PiHole is a really interesting product in that it’s small enough to run on a Raspberry Pi or various other Linux distros. While I’ve done some preliminary experiments with it, I opted for pfBlockerNG because I’m a BSD guy and not much of a Linux fan. However, YMMV.
What do these things do?
Block elements at the network level based on a community supported blacklist. A more up-to-date and thorough list is available via subscription. So depending on your needs and risk tolerance, it could be a free solution. For instance, I use the community version for home and the subscription model for work and for my clients.
Better than Browser Plugins
(IMO) these are much better than browser plugins. Since they operate at the network layer and will protect your whole network rather than just a single browser. Additionally, there's no overhead you CPU needs yo deal with, even if it is negligible.
However, most important for me is the privacy aspect where plugins ask for access to things like your location, your browsing history and even your contacts. “Free” usually has a cost associated with it and it’s usually your privacy.
PiHole and pfBlockerNG use a different model, called “freemium.” The product is available for free, but premium services (like support or real-time black list updates) are available for a fee.
One of the benefits of using this approach was finding and blocking advertising domains things like my SmartTV (Samsung and LG)or internet connected radio (Sonus) were communicating with. You can’t address that with a browser plugin!
Finally, blocking these elements at the network level will free up quite a chunk of bandwidth you didn’t even realize was being consumed by advertising domains and trackers.
Solution 3:
Yes, this is doable using SafariServices in a custom app. You could create a app which loads specific things you want to disable (for example, a list of domains or CSS selectors) and lets Safari know when that list is updated. You would then have to transform your list into something the Content Blocker Extension can parse and tell Safari to refresh its content blocking list. You could use this locally without having to sign it/submit it to the App Store.