hide-if-matches-computed-xpath
The hide-if-matches-computed-xpath hides specific element whose class name or ID changes in runtime through a dynamically-built XPath query.
This snippet takes as a first parameter an XPath selector that's incomplete, due to a placeholder in the form {{}}. The next parameters, searchQuery and searchRegex, tell the snippet how to fill the placeholder.
You can use hide-if-matches-computed-xpath to:
Hide elements whose classes or IDs are randomized when a page refreshes
Hide elements that write flexible queries to take stylesheets, inline scripts, and regex into account
Hide elements that change at runtime
Parameters
query
The template XPath query that targets the element to hide. Use {{}} to dynamically insert into the query.
Yes
searchQuery
The XPath query that searches for an element to be used alongside searchRegex.
Yes
searchRegex
The regular expression used to extract text from the innerHTML of the element that matches searchQuery. The extracted text gets injected into the query.
Yes
waitUntil
An 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
Filter examples
The following table lists examples that use the hide-if-contains-and-matches-style snippet:
hide-if-matches-computed-xpath '//[@class="{{}}"]' '//div[@id="target"]' '/./'
Hides all elements with a class whose name matches any string in the div with an id="target".
hide-if-matches-computed-xpath '//[@class="{{}}"]/child::text()[contains(.,"Sponsored")]' '//div[@id="target"]' '/./'
Hides all elements that contain the text Sponsored with a class whose name matches any string in the div with an id="target".
hide-if-matches-computed-xpath '//[@class="{{}}"]/child::text()[contains(.,"Sponsored")]' '//div[@id="target"]' '/test(.)test/' interactive
Hides all elements that:
contain the text
Sponsoredwith a class whose name matches any string that starts with
test, followed by any sequence of charactersend with
testin thedivwith anid="target"
This filter runs when the document state is interactive.
Debugging
No query or searchQuery provided
Right after the snippet fires
Mandatory parameters are missing; double check your filter.
Started searching for <<searchQuery>
When the snippet begins to look for the searchQuery
A node is searched for to find the string that matches the regular expression.
Found node: <<searchNode>>
When a node matches the searchQuery
A node element was found that will be used to find the string that matches the regular expression.
Searching in <<searchNode.innerHTML>>
After searchQuery finds a matching node
A node search was matched by the searchQuery for a string that matches the regular expression to fill the XPath query.
Matched search query: <<foundText>>
After comparing the text inside the <<searchNode>> against the regular expression
A string was found that matches the regular expression. This string will be used to fill the XPath query.
Starting hiding elements that match query: <<computedQuery>>
After the placeholder in the XPath query has been replaced with the <<foundText>>
The snippet has filled the placeholder and is looking for HTML elements that match the computed XPath query.
Matched: <<HTML element>> for selector: <<query>>
Right after an HTML element has been matched and hidden
The snippet has successfully matched and hidden a HTML element.
Other resources
Last updated
Was this helpful?