IMPORTANT: This feature requires understanding of HTML/CSS selectors to use. However, there is now a
user-friendly approach available. If you left-click on the extension icon, to the right of the address bar, there will be the option to "Set Auto Hide"
for your current web page. This will auto generate the necessary HTML selectors of all the currently hidden elements. You can then edit the details as
you please then click "Save". The downside to using auto generated selectors is that they may not always work, especially when using the "Remove" menu
action option for multiple elements.
If you wish to have more control over this feature then learning the basics of HTML selectors isn't too difficult
(for examples, see:
https://www.w3schools.com/cssref/css_selectors.asp). Right click the
element you want to automatically hide, then click "Inspect". This will open the 'Elements' panel in Chrome DevTools where your selected element will
be highlighted in the HTML structure. From that you can try to formulate a HTML selector that will exclusively select that element. For example, this
very paragraph of text can be uniquely selected with either of the follow HTML selectors:
- #autoHidingContainer div:nth-of-type(3) p:nth-of-type(2)
- #auto-hiding-explanation-text
Alternatively, after clicking "Inspect", you can right click the highlighted element in the HTML structure. Then go to
"Copy" -> "Copy selector". This will copy Chrome's own generated HTML selector. However, using this generated selector
as-is also has a good chance of not working, especially for ads (see warning below).
Once you have determined the HTML selector, add the website address to the list above. This will allow you to input the HTML selectors for that
site.
You can use the asterisk character (*) to match partial website addresses. Examples:
- Full address: https://en.wikipedia.org/wiki/Main_Page
- Partial address: *.wikipedia.org/*
WARNING: Although it's possible that this feature might not work in some situations, it is FAR more likely that either the HTML selector
or website address is wrong. Also, be careful when trying to formulate the HTML selector for an ad. Ad banners are almost certainly going to be inside
an 'iframe' element. Nothing inside an iframe can be selected, you must select the iframe itself, (so long as it's not also inside another iframe), or
one of its parent containers.
NOTE: The automatic hiding only triggers within the initial few seconds of the page loading. Thus, if the site itself later reloads any of
the hidden elements/ads then this feature won't be able to stop them from being redisplayed.
