This guide is aimed at filter authors and advanced users that want to make the most out of Adblock Plus. It's a companion to the guide on writing filters that covers snippet filters. While it's recommended that you be familiar with writing filters, you should be OK otherwise. You don't need a deep knowledge of JavaScript, but you need to be familiar with it, as well as with web technologies like HTML, CSS, and the DOM. If you really want, Mozilla has a great resource to learn JavaScript, HTML and CSS.
This guide doesn't cover how to write an actual snippet, i.e. the JavaScript code that is loaded by Adblock Plus into the browser when you execute a snippet filter. This requires modifying the extension, and it will be covered in an upcoming developer guide.
Table of contents
- What are snippet filters?
- Syntax
- Arguments
- Examples
- Debugging
- Behavioral Snippets
- Conditional Hiding Snippets
- How to access shadow DOM elements
What are snippet filters?
Snippet filters are a new type of filter introduced in Adblock Plus 3.3 that allows running specialized code snippets (written in JavaScript) on pages within a list of specified domains. These snippets are selected from an existing library available in Adblock Plus.
The snippet approach allows interfering with ad display code in a more efficient manner, and also allows locating elements to hide in a way that can't be expressed with CSS or the current advanced selectors.
For security reasons, snippet filters can only be added to a user's custom filters list or in the ABP Anti-Circumvention Filter List, the latter being vetted and reviewed.
Syntax
The basic syntax of a snippet filter is as follows:
You can run several snippets in the same filter by separating them with a ;
. See example 6.
Arguments
Arguments are strings. They can be surrounded by single quotes ('
) if they contain spaces. To have a single quote '
as part of the argument, escape it like this: \'
; you can also escape spaces with \
instead of quoting the argument. See examples 3a, 3b and 3c.
You can input Unicode characters by using the syntax \uNNNN
, where NNNN is the Unicode codepoint. See example 4.
You can also input carriage return, line feed, and tabs using \r
, \n
, and \t
, respectively. To have a \
in an argument, including a regular expression, it must be escaped with \
, i.e. doubled up. See example 5.
Examples
Basic snippet filter syntax
These examples demonstrate the syntax of a snippet filter and how to pass arguments. While we mostly use the log
snippet, these examples apply to other snippet functions as well.
Example 1
example.com#$#log Hello
This prints "Hello" in the web console on the domain example.com
and its subdomains.
Example 2
anotherexample.com,example.com#$#log Hello
Same as example 1, but "Hello" also appears on the domain anotherexample.com
. Like with other filter types, multiple domains should be separated by commas ,
.
This filter makes the filter in example 1 obsolete. Having both filters makes the message appear twice on example.com
, as both would be run.
Example 3a
example.net,example.com#$#log 'Hello from an example to another example'
This is a different message from example 2. Because it contains spaces, the string must be surrounded with single quotes '
.
Example 3b
example.net,example.com#$#log 'Hello it\'s me again'
This shows the escape sequence for having a single quote, using \'
.
Example 3c
example.net,example.com#$#log Hello\ no\ quotes
You can also escape spaces instead of quoting the argument, using \
.
Example 4
emoji.example.com#$#log \u1F601
On the domain emoji.example.com
, the emoji 😀 is printed in the console. The filter will not be run on example.com
or www.example.com
. This shows how to use escape for Unicode symbols.
Example 5
emoji.example.com#$#log '\u1F601\nand a new line'
This is similar to example 4, except that the filter prints the emoji 😀 and then on a new line, prints and a new line
. This shows how to use escape for Unicode symbols, as well as adding a new line.
Example 6
Running two snippets:
debug.example.com#$#debug; log 'This should be prefixed by DEBUG'
First, we see debug
. This is the snippet that enables debugging. It's just like any other snippet. Then we see log
, whose output is modified when debugging is enabled. See the section on debugging for more details.
example.com#$#log 'Always log'; log 'And better twice than once'
This is another example of logging two lines. Here the snippet command will be called twice.
Debugging
We saw a debug
snippet in Example 6. Its use is simple: calling debug
before a snippet turns on the debug flag. If the other snippets support it, they'll enable their debug mode. What a snippet does in debug mode is up to the snippet.
debug
Since: Adblock Plus 3.8
Enables debug mode.
Filter |
Result |
|
logs OK to the console with a preceded by a DEBUG word |
|
activates |
log
Since: Adblock Plus 3.3
Logs its arguments to the console. This may be used for testing and debugging.
Filter |
Result |
|
logs |
|
logs |
|
logs |
trace
Since: Adblock Plus 3.3
Similar to log
, but does the logging in the context of the document rather than the content script.
This may be used for testing and debugging, especially to verify that the injection of snippets into the document is working without any errors.
Filter |
Result |
---|---|
|
logs |
|
logs |
|
logs |
Behavioral Snippets
Snippets that change the normal execution behavior of the page.
abort-current-inline-script
Since: Adblock Plus 3.4.3
Aborts the execution of an inline script when a property is either read or written.
Name |
Description |
Mandatory |
api |
API function or property name to anchor on. It can also be the path to that property. If the property is a direct child of window, this parameter will be just the property name. But, if you want to access a sub property, this parameter will be a chain of properties separated by dots. |
yes |
search |
If specified, only scripts containing the given string are prevented from executing. If the string begins and ends with a slash ( |
no |
abort-on-property-read
Since: Adblock Plus 3.4.1
Patches a property on the window object to abort execution when the property is read.
No error is printed to the console.
The idea originates from uBlock Origin.
Name |
Description |
Mandatory
|
property |
The name of the property or the path to that property. If the property is a direct child of window, this parameter will be just the property name. But, if you want to access a sub property, this parameter will be a chain of properties separated by dots. |
yes |
setConfigurable |
Value of the configurable attribute of the descriptor of property. If this parameter is not used it defaults to true. Setting it to false will prevent the property set and get being overwritten or otherwise changed by anybody. If this snippet doesn't work as expected when passing only the property, it could mean that the website is circumventing and setting this parameter to false can come in handy.
|
no |
abort-on-property-write
Since: Adblock Plus 3.4.3
Patches a property on the window object to abort execution when the property is written.
No error is printed to the console.
The idea originates from uBlock Origin.
Name |
Description |
Mandatory |
property |
The name of the property or the path to that property. If the property is a direct child of window, this parameter will be just the property name. But, if you want to access a sub property, this parameter will be a chain of properties separated by dots. |
yes |
setConfigurable |
Value of the configurable attribute of the descriptor of property. If this parameter is not used it defaults to true. Setting it to false will prevent the property set and get being overwritten or otherwise changed by anybody. If this snippet doesn't work as expected when passing only the property, it could mean that the website is circumventing and setting this parameter to false can come in handy. |
no |
abort-on-iframe-property-read
Since: Adblock Plus 3.10.1
Patches a list of properties on the iframes' window object to abort execution when the property is read.
No error is printed to the console.
Name |
Description |
properties |
The list with the properties we want to abort on. |
abort-on-iframe-property-write
Since: Adblock Plus 3.10.1
Patches a list of properties on the iframes' window object to abort execution when the property is written.
No error is printed to the console.
Name |
Description |
properties |
The list with the properties we want to abort on. |
cookie-remover
Since: Adblock Plus 3.11.2
A snippet to remove certain cookies.
Name |
Description |
Mandatory |
cookie |
Pattern that matches the name of the cookie(s) we want to remove. If the string starts and ends with a slash ( |
yes |
autoRemoveCookie |
Default value: To use only in case the website sets back the cookie after removal. |
no |
freeze-element
Since: Adblock Plus 3.10
Freezes a DOM element so it prevents adding new nodes inside it.
Name |
Description |
Example |
Mandatory |
selector |
The CSS selector for the parent element that we want to freeze |
'.left-content .container' |
yes |
options |
A single parameter for snippet's options. A string containing all the options we want to pass, each of them separated by a plus character (+). Empty single quotes if none ('') Available options: •subtree (if we want to freeze all the element's children as well) •abort (throw an error every time an child element gets added) |
'' or subtree or abort or subtree+abort etc. |
no |
exceptions |
An array of regex/selectors used to specify the nodes we don't want to prevent being added. Each array item can be: •selector (targeting Element nodes) •regex (targeting Text nodes, identified by slash) |
.article #banner .navigation /.*/ |
no |
json-override
Since: Adblock Plus 3.11.2
It's very similar to json-prune, but instead of removing a property, we override it with a value from the same list as for override-property-read.
Name |
Description |
Mandatory |
rawOverridePaths |
A list of space-separated properties to remove. It also accepts property chains - e.g. foo.bar.tar. |
yes |
value |
The value to override the property with (see below for possible values) |
yes |
rawNeedlePaths |
A list of space-separated properties which must be all present for the pruning to occur. It also accepts property chains. |
no |
filter |
A string to look for in the raw string, before it's passed to JSON.parse. If no match is found no further search is done on the resulting object. If the string begins and ends with a slash ( |
no |
json-prune
Since: Adblock Plus 3.9.0
Traps calls to JSON.parse, and if the result of the parsing is an Object, it will remove specified properties from the result before returning to the caller.
The idea originates from uBlock Origin.
Name |
Description |
Mandatory |
rawPrunePaths |
A list of space-separated properties to remove. |
yes |
rawNeedlePaths |
A list of space-separated properties which must be all present for the pruning to occur. Can include placeholders {} and [] to iterate over nested objects and arrays respectively. |
no |
override-property-read
Since: Adblock Plus 3.9.4
Overrides a property's value on the window object with a set of available properties.
The idea originates from uBlock Origin.
Name |
Description |
Mandatory |
property |
The name of the property or the path to that property. If the property is a direct child of window, this parameter will be just the property name. But, if you want to access a sub property, this parameter will be a chain of properties separated by dots. |
yes |
value |
The value to override the property with. |
yes |
setConfigurable |
Value of the configurable attribute of the descriptor of property. If this parameter is not used it defaults to true. Setting it to false will prevent the property set and get being overwritten or otherwise changed by anybody. If this snippet doesn't work as expected when passing only the property and the value, it could mean that the website is circumventing and setting this parameter to false can come in handy. |
no |
prevent-listener
Since: Adblock Plus 3.11.2
Prevents adding event listeners.
Wrap EventTarget.prototype.addEventListener and don't allow adding listeners for certain types of events.
Name |
Description |
Mandatory |
type |
Pattern that matches the type(s) of event we want to prevent. If the string starts and ends with a slash ( |
yes |
handler |
Pattern that matches the event handler's declaration. If the string starts and ends with a slash ( |
no |
selector |
The CSS selector that the event target must match. If the event target is not an HTML element the event handler is added. |
no |
replace-fetch-response
Since: Adblock Plus 4.4
Replaces the response of a fetch request if the response text matches a given regular expression pattern.
Name |
Description |
Mandatory |
Default value
|
search |
String or regex pattern that will be run against the stringified fetch response. Everything that matches the regex will be replaced with the replacement value. |
yes |
n.a. |
replacement |
Everything that matches the regex will be replaced with the replacement value. By default this will be an empty string, so everything that matches the regex will be removed from the fetch response. |
no |
empty string |
needle |
The replacement will only happen if the needle text is present in the response. By default this is an empty string. If the string begins and ends with a slash ( / ), the text in between is treated as a regular expression. |
no |
empty string |
replace-xhr-response
Since: Adblock Plus 4.4
Replaces the response of a XHR request if the response text matches a given regular expression pattern.
Name |
Description |
Mandatory |
Default value
|
search |
String or regex pattern that will be run against the stringified XHR response. Everything that matches the regex will be replaced with the replacement value. |
yes |
n.a. |
replacement |
Everything that matches the regex will be replaced with the replacement value. By default this will be an empty string, so everything that matches the regex will be removed from the XHR response. |
no |
empty string |
needle |
The replacement will only happen if the needle text is present in the response. By default this is an empty string. If the string begins and ends with a slash ( / ), the text in between is treated as a regular expression. |
no |
empty string |
simulate-mouse-event
Since: Adblock Plus 3.17
Triggers arbitrary mouse events on elements that are matched by a CSS or Xpath selector, by calling dispatchEvent for a selector.
Name |
Description |
Mandatory |
selectors |
The CSS/Xpath selector that an HTML element must match for the event to be triggered. Maximum 7 selectors are supported. Take a look at the optional parameters and the examples below for the explanation of how they should be written. |
yes |
Optional parameters are added to the selectors with a $ sign. Multiple parameters can be combined for a single selector by separating them with a comma. If a parameter is not specified, the default value will be assumed for that selector.
Name |
Description |
Default |
Mandatory |
$trigger |
If this flag is not set, only the chosen event for the last selector will be triggered. $trigger flag can be used for the other selectors to make sure the event is triggered for them as well. $trigger is always true for the last selector so can be omitted for it. |
false |
no |
$delay |
Determines how much time the snippet should wait before simulating the even. Note that the default is 500 ms. If you don't want to have a delay, you should explicitly state $delay=0. |
500 |
no |
$continue |
If set, the event will be triggered after each delay period ends. For example, if the selected event is click and the delay is 500 ms. The click event will be triggered every 500 ms instead of just once. |
false |
no |
$event |
Determines which event should be simulated for the selector. |
click |
no |
Filter |
Result |
simulate-mouse-event 'some-css-selector' |
Simulates a click event for the eleents that match the selector after 500 ms. |
simulate-mouse-event 'css-selector1' 'css-selector2' |
Simulates a click event for css-selector2 only if the css-selector1 is present in the page. Does not click css-selector1. |
simulate-mouse-event 'css-selector1$trigger' 'css-selector2' |
Simulates a click event for both of the selectors if both of them are present in the page. Note that the $trigger parameter for css-selector2 can be omitted as it is the last parameter. |
simulate-mouse-event 'xpath(some-xpath-selector)$delay=0' |
Simulates a click event for the elements that are matched with the xpath selector with no delay. |
simulate-mouse-event 'some-css-selector$continue,delay=100' |
Simulates a click event every 100 ms. |
simulate-mouse-event 'some-css-selector$continue,delay=100, event=mouseover' |
Simulates a mouseover (hover) event over all the elements matching the selector every 100 ms. |
As you can see the you can mix and match the parameters to create the filter that best suits the case. The parameters doesn't have any order $delay=100,trigger is the same as $trigger,delay=100.
skip-video
Since: Adblock Plus 3.21
Makes the video skip to its end or fast forwards it with the given amount. It does it by setting the currentTime attribute of the video object.
Name | Description | Mandatory | Default Value |
playerSelector | The CSS or the XPath selector to the <video> element in the page. | Yes | - |
xpathCondition | The XPath selector that will be used to know when to trigger the skipping logic. | Yes | - |
optionalParameters | Optional parameters to configure the snippet. Any number of the supported parameters from the table below can be added to this in any order. Separate the optional parameters with space as if they are different arguments to the filter. | No |
Name | Description | Default Value | Example |
-skip-to | Determines the time of the video to skip to. If the value is zero or negative, the snippet skips to the end of the video (video.currentTime = video.duration + skipTo). If the skipTo value is positive, the snippets skips the video by the given value (video.currentTime = video.currentTime + skipTo). A small negative value like (-0.1) or zero is preferred for most of the cases as it would cause the video to nearly instantly end. Large positive values can be used to quickly fast forward a video (5-10 seconds at a time) to better mimic user behaviour and escape some detection methods. Example: If there is a 30 second ad, -0.1 is given as the skipTo parameter, the video will be instantly skipped to 29.900 (0.1 seconds before the 30 second mark). If positive 10 seconds is given as the skipTo parameter, video will be skipped to 10 seconds, 20 seconds and to 30 seconds every time there is a tick of the snippet (happens at every page mutation). If 0 is given as the skipTo parameter, video will be instantly skipped to the end (30 second mark). Unit is in seconds. | -0.1 | -skip-to:10 |
-max-attempts | If the video is not fully loaded by the time the xpath condition is met; there is a retry mechanism in the snippet. The snippet will try to skip the video once every retryMs interval. maxAttempts parameter will determine the maximum number of attempts the snippet should do before giving up. This parameter doesn't need to be changed for most of the cases but might be useful for some circumvention scenarios. | 10 | -max-attemps:20 |
-retry-ms | If the video is not fully loaded by the time the xpath condition is met; there is a retry mechanism in the snippet. The snippet will try to skip the video once every retryMs interval. This parameter doesn't need to be changed for most of the cases. Unit is in milliseconds. | 10 | -retry-ms:100 |
-wait-until | Optional parameter that can be used to delay the running of the snippet until the given state is reached. Accepts: loading, interactive, complete, load or any event name. Pass empty string to disable.-wait-until:"" (Snippet will run immediately) | Disabled (snippet runs immediately) | -wait-until:load |
-run-once | Used to disable the snippet after it has skipped the video once. | False | -run-once:true |
-stop-on-video-end | Used to pause the snippet when the video is already near its end. Video is considered near its end when the difference between the video duration and the current time is less than 0.5 seconds. | False | -stop-on-video-end:true |
-start-from |
Delays running of the snippet until the given time. Unit is in ms. |
0 | -start-from:1000 |
-mute-video-when-skipping |
Mutes the video when the skipping logic is running. |
True | -mute-video-when-skipping:false |
strip-fetch-query-parameter
Since: Adblock Plus 3.5.1
Strips a query string parameter from fetch()
calls.
Name |
Description |
Mandatory |
name |
The name of the parameter. |
yes |
urlPattern |
An optional pattern that the URL must match. If the string begins and ends with a slash ( |
no |
Conditional Hiding Snippets
Snippets that are responsible for hiding page content based on various conditions like matching text, style, machine learning model, etc.
hide-if-classifies
Since: Adblock Plus 3.20
Hides any HTML element (or its ancestors) that match a CSS selector if the element is classified as an ad by a machine learning model.
Name |
Description |
Mandatory |
model |
The name of the model to be used for inference. Must be hosted on easylist-downloads.adblockplus.org/models/. Will be downloaded as needed. |
yes |
selector |
A CSS selector matching all DOM elements to run inference on. If inference results in a positive prediction for any of the matches, the matched element will be hidden. If subSelector is not specified, inference will be run on the entire element. |
yes |
subSelector |
A CSS selector matching a DOM element within selector. If specified, inference will only be run on the element matched by subSelector while selector will be used for hiding. |
no |
hide-if-contains
Since: Adblock Plus 3.3
Hides any HTML element or one of its ancestors matching a CSS selector if the text content of the element contains a given string.
Name |
Description |
Mandatory |
search |
The string to look for in HTML elements. If the string begins and ends with a slash ( |
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 |
hide-if-contains-image
Since: Adblock Plus 3.4.2
Hides any HTML element or one of its ancestors matching a CSS selector if the background image of the element matches a given pattern.
Name |
Description |
Mandatory |
search |
The pattern to look for in the background images of HTML elements. This must be the hexadecimal representation of the image data for which to look. If the string begins and ends with a slash ( |
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 pattern must match. Defaults to the value of the selector argument. |
no |
hide-if-contains-similar-text
Since: Adblock Plus 3.14.2
Hides an element based on its similar text content.
hide-if-contains-similar-text currently uses a pre-sorted Levenshtein distance for cases where the content has shuffled chars or text.
Name |
Description |
Mandatory |
search |
The string to match to the similar text. Is considered similar text that isn't hidden by CSS properties or other means. If the string begins and ends with a slash ( |
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 |
hide-if-contains-visible-text
Since: Adblock Plus 3.6
Hides any HTML element matching a CSS selector if the visible text content of the element 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.
Name |
Description |
Mandatory |
search |
The string to match to the visible text. Is considered visible text that isn't hidden by CSS properties or other means. If the string begins and ends with a slash ( |
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 |
You can provide any number of optional parameters. There are 2 kinds of optional parameters: [1] tuning text matching logic or [2] adding arbitrary CSS attributes.
The optional parameters need to follow these syntax rules:
|
no |
Default Parameters
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.
Name | Description | Default Value | How to overwrite |
-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' |
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:16' |
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)'
|
hide-if-contains-and-matches-style
Since: Adblock Plus 3.3.2
Hides any HTML element or one of its ancestors matching a CSS selector if the text content of the element contains a given string and, optionally, if the element's computed style contains a given string.
Name |
Description |
Mandatory |
search |
The string to look for in HTML elements. If the string begins and ends with a slash ( |
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 |
style |
The string that the computed style of an HTML element matching selector must contain. If the string begins and ends with a slash ( |
no |
searchStyle |
The string that the computed style of an HTML element matching searchSelector must contain. If the string begins and ends with a slash ( |
no |
waitUntil |
Optional parameter that can be used to delay the running of the snippet until the given state is reached. Accepts: loading, interactive, complete, load or any event name. |
no |
windowWidthMin |
Optional parameter that can be used to disable the snippet if the window.innerWidth is smaller than the given value. |
no |
windowWidthMax |
Optional parameter that can be used to disable the snippet if the window.innerWidth is greater than the given value. |
no |
hide-if-has-and-matches-style
Since: Adblock Plus 3.4.2
Hides any HTML element or one of its ancestors matching a CSS selector if a descendant of the element matches a given CSS selector and, optionally, if the element's computed style contains a given string.
Name |
Description |
Mandatory |
search |
The CSS selector against which to match the descendants of HTML elements. |
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 specified descendants must match. Defaults to the value of the selector argument. |
no |
style |
The string that the computed style of an HTML element matching selector must contain. If the string begins and ends with a slash ( |
no |
searchStyle |
The string that the computed style of an HTML element matching searchSelector must contain. If the string begins and ends with a slash ( |
no |
waitUntil |
Optional parameter that can be used to delay the running of the snippet until the given state is reached. Accepts: loading, interactive, complete, load or any event name. |
no |
windowWidthMin |
Optional parameter that can be used to disable the snippet if the window.innerWidth is smaller than the given value. |
no |
windowWidthMax |
Optional parameter that can be used to disable the snippet if the window.innerWidth is greater than the given value. |
no |
hide-if-labelled-by
Since: Adblock Plus 3.9
Hides any HTML element that uses an aria-labelledby
, or one of its ancestors, if the related aria element contains the searched text.
Name |
Description |
Mandatory |
search |
The string to look for in HTML elements. If the string begins and ends with a slash ( |
yes |
selector |
The CSS selector of an HTML element that uses as aria-labelledby attribute. |
yes |
searchSelector |
The CSS selector of an ancestor of the HTML element that uses as aria-labelledby attribute. Defaults to the value of the selector argument. |
no |
hide-if-matches-computed-xpath
Since: Adblock Plus 3.18.1
Hide a specific element whose class name or id changes in runtime through a dynamically build XPath query.
This snippet takes as first parameter an incomplete XPath selector. Incomplete because it has a placeholder in form of {{}}. The next parameters, searchQuery and searchRegex, will tell the snippet how to fill the placeholder.
Name |
Description |
Mandatory |
query |
The template XPath query that targets the element to hide. Use {{}} to dynamically insert into the query. |
yes |
searchQuery |
XPath query that searchs for an element to be used alongside searchRegex. |
yes |
searchRegex |
The regex that is used to extract a text from the innerHTML of the element that matches searchQuery. The extracted text will be injected to the query. |
yes |
waitUntil |
Optional parameter that can be used to delay the running of the snippet until the given state is reached. Accepts: loading, interactive, complete, load or any event name. |
no |
hide-if-matches-xpath
Since: Adblock Plus 3.9.0
Hide a specific element through a XPath 1.0 query string. See Getting started with XPath filters to know more.
Name |
Description |
Mandatory |
query |
The XPath query that targets the element to hide. |
yes |
scopeQuery | XPath selector that the filter devs can use to restrict the scope of the Mutation Observer. It is important that the selector is as specific as possible to avoid to match too many nodes. |
no |
hide-if-matches-xpath3
Since: Adblock Plus 3.19
Hides a specific element through a XPath 3.1 query string.
Name |
Description |
Mandatory |
query |
The XPath query that targets the element to hide. |
yes |
scopeQuery | XPath selector that the filter devs can use to restrict the scope of the Mutation Observer. It is important that the selector is as specific as possible to avoid to match too many nodes. |
no |
hide-if-shadow-contains
Since: Adblock Plus 3.3
Hides any HTML element or one of its ancestors matching a CSS selector if the text content of the element's shadow contains a given string.
Name |
Description |
Mandatory |
search |
The string to look for in every HTML element's shadow. If the string begins and ends with a slash ( |
yes |
selector |
The CSS selector that an HTML element must match for it to be hidden. |
yes |
How to access shadow DOM elements
Since: Adblock Plus 3.25
Shadow DOM elements are elements that are isolated from the main DOM of the web page: instead of being part of the main document subtree, they belong to a document fragment which is just another subtree of nodes that are not as vulnerable to scripts (and styles) as normal DOM nodes are.
We can see and inspect them in the browser but we cannot reach them by writing a normal selector.
We are currently able to tackle:
- open or closed shadow roots (see paragraph about browser compatibility below): they are created by calling the DOM API element.attachShadow or via declarative shadow DOM. CV providers can use shadow roots to hide the elements that distinguish the sponsored content from the non-sponsored content.
- svg-use pattern: another encapsulating pattern used by CV providers. In SVG, the <use xlink:href="#id"> element is used to reference and reuse existing elements defined elsewhere in the document, whose id matches the value stored in the href or xlink:href attribute.
The demarcators
The following snippets can handle the new demarcators:
- hide-if-contains
- hide-if-contains-image
- hide-if-contains-similar-text
- hide-if-contains-visible-text (^^sh^^ only, does NOT support ^^svg^^)
- hide-if-contains-and-matches-style
- hide-if-has-and-matches-style (currently only in selector and searchSelector params, not in the search parameter!)
- hide-if-labelled-by
- simulate-mouse-event
The blank spaces around the demarcators are irrelevant and will be ignored: "div.shadowRootParent ^^sh^^ span.childNode" will be behave the same as "div.shadowRootParent^^sh^^span.childNode". In this document the demarcators are surround by blank spaces for readability's sake.
More than one demarcator can be used in the same selector, in order to access nested encapsulated elements.
type of encapsulation |
demarcator |
selector example |
how it works |
open or closed shadow root |
^^sh^^ |
.shadowRootParent ^^sh^^ span.childNode |
The selector is split at the demarcator. The 1st part of the query is executed. This leads to the shadow root parent. Then the shadow root is accessed with this specific API. At this point nodes inside the shadow root are targeted by using the second part of the selector. |
svg-use pattern |
^^svg^^ |
.shadowRootParent ^^svg^^ |
The 1st part of the query before the demarcator is executed, which will likely point to a <use> element. The value of the xlink:href or href attribute is extracted from the found element and it is used to find the matching original element by its id. The referenced ids until no more demarcators are found in the selector |