The hide-if-contains-visible-text snippet hides any HTML element that matches a CSS selector if the element's visible text content contains a given string.
It can also check an unlimited amount of CSS attributes of a node to locate a specific string, even when a website employs methods to obscure or conceal the text.
search
The string to match against the visible text (text that isn't hidden by CSS properties or other means). If the string begins and ends with a slash (/), the text in between is treated as a regular expression.
Yes
selector
The CSS selector that an HTML element must match for it to be hidden.
Yes
searchSelector
The CSS selector that an HTML element containing the given string must match. Defaults to the value of the selector argument.
No
optionalParameters
The CSS attributes a computed style map of a node should have in order to consider that node hidden. You can provide any number of optional parameters by following these syntax rules:
key:value, where can be a string or a regex (if it starts and ends with a /)
each parameter is wrapped in single quotes, for example: '-snippet-box-margin:10px' 'width:0px'
No
In order to tackle common circumvention patterns, the snippet checks already some styles in the matched element, even if you don't add any optional parameter. You can see the default values in the "Default value" column.
Note that you can override the default parameters by adding them as optional parameter, following the syntax rules explained above. You can give any value, the "How to overwrite" column shows only examples. Adjust the values according to your needs.
-snippet-box-margin
Used to expand the bounding box of the overflow parent. This is useful if the website is pushing some elements outside of a overflow:hidden parent. Unit is pixels.
'-snippet-box-margin:2'
'-snippet-box-margin:10'
-disable-bg-color-check
Used to disable the check where we categorize elements with the same text color and background color as "not visible".
'-disable-bg-color-check:false'
'-disable-bg-color-check:true'
-check-is-contained
Used to categorize elements that are pushed outside of a parent even if the parent does not have the style overflow:hidden.
'-check-is-contained:false'
'-check-is-contained:true'
-pseudo-box-margin
Used to set the pseudo elements (:before , :after etc.) translate threshold. Any pseudo elements that have a transform(translate) value higher than this threshold will be counted as invisible. Unit is pixels.
'-pseudo-box-margin:2'
'-pseudo-box-margin:0'
-ignore-padding
Used to sustract the padding values from the calculations when determining if the child element is contained within the parent’s bounding box. To use when it is the padding of a child that makes the text visible.
'-ignore-padding:false'
'-ignore-padding:true'
opacity
Used to check if the gibberish text that scrambles the string we are looking for is contained in a transparent element.
'opacity:0'
'opacity:1'
font-size
Used to check if the gibberish text that scrambles the string we are looking is made invisible by the font-size.
'font-size:0'
'font-size:10'
color
Used to check if the gibberish text that scrambles the string we are looking is made invisible by the font color.
'color:rgba(0, 0, 0, 0)'
'color:rgba(255, 99, 71, 0.6)'
The following table lists examples that use the hide-if-contains-visible-text snippet:
hide-if-contains-visible-text FAQ nav
Hides any nav element whose visible text content contains the word FAQ. The word FAQ doesn't need to be found inside the direct children of the nav element; it can be anywhere in its subtree.
hide-if-contains-visible-text FAQ nav a
Hides any nav element that has an a element inside its subtree whose visible text content contains the word FAQ.
hide-if-contains-visible-text /.*/ li.serp-item 'li.serp-item div.label'
Hides any li.serp-item element which has an 'li.serp-item div.label' element inside its subtree whose visible text content matches the /.*/ regex.
hide-if-contains-visible-text /.*/ li.serp-item 'li.serp-item div.label' 'color:rgb(255, 255, 255)'
Hides any li.serp-item element which has an li.serp-item div.label element inside its subtree whose visible text content matches the /.*/ regex and whose font color is not white.