Using Adblock Plus filters to block HTML elements

Question

I was looking at this guide on how to block elements using ABP: https://adblockplus.org/en/filters#elemhide

As an example, I went to the options and added a filter for

blankmediagames.com/TownOfSalem/###fb-root

This should theoretically block the div with id fb-root containing a couple of iframes that use a lot of memory but are not needed, and the rule should only apply to the website https://blankmediagames.com/TownOfSalem/ (the website for the Town of Salem game).

Though I have created the rule, I do not see the element being blocked. It is still there when I open the developer tools in Chrome, and I can also still see the subframe and its memory usage in Chrome's task manager (shown as Subframe: https://facebook.com/ and using ~65K).

I must be doing something wrong. I would like to find a way to avoid having to manually end the subframe process each time I go here. Am I missing something obvious?

Answer 1

Element hiding filters can only be restricted to domains, not to particular URLs on a domain. Here's a filter that should hide the element on that page:

blankmediagames.com###fb-root

If, however, you want to block the entire frame, an element hiding filter won't help. For that you need to create a blocking filter such as:

||facebook.com^$subdocument,domain=blankmediagames.com

That filter blocks any subframes on blankmediagames.com that contain content from facebook.com.

Alternatively, you could enable the "Block social media icons tracking" option in the Adblock Plus settings page (or a similar option in other ad blockers) which should block all social media elements.