TIL: uBlock Origin supports XPath syntax!

August 17, 2021

If you’re using an adblocker, chances are you’re using uBlock Origin. And if you’re not, you should be using it. Anyway, I just found out that uBlock supports XPath syntax, and here’s how to use it to hide elements on a page.

Overview

XPath is a query language for XML documents, such as an HTML page. So basically it’s what you use to ‘select’ specific elements, just like you would use document.getElementById() (or, more generally, document.querySelector()) in JavaScript. Personally, I prefer XPath over CSS selectors, because it feels easier to write and more flexible (not necessarily true, but it’s my subjective opinion). It’s useful when parsing/filtering HTML, but also when writing element hiding rules for an adblocker, as I found out today.

All you need to do is add a static cosmetic filter, via the “my filters” tab in uBlock. The syntax is:

<domains>##<subject>:xpath(<expression>)

Where:

• <domains> is a comma-separated list of domains on which the filter will work
• ## means to hide elements (see here)
• <subject> is the root element to which the XPath expression will be applied; can be a CSS selector or a procedural cosmetic filter (see here for more info)
• <expression> is an XPath expression, see e.g. here for a tutorial

You can also test it out visually via uBlock’s element picker, in which case you can leave out the <domains> part of the filter.

Example

For example, let’s say I search Google for ‘apples’, and I want to block the whole ‘top stories’ section on the results page. Looking at the source code, Google obfuscates and/or randomizes many class names and IDs, but the section is a div that contains the element g-section-with-header. So to block the whole thing, I need to block any div, inside the div with ID search, which has g-section-with-header as a child.

In uBlock syntax with XPath:

google.com##div#search:xpath(//div[child::g-section-with-header])

What it means:

• google.com: the domain on which this filter will work
• ##: element hiding
• div#search: the root element from which XPath will start
• :xpath(<expression>): use XPath syntax to select an element
• //div[child::g-section-with-header]: looking at all descendants of the root node (div#search), select div elements which have as a direct child the element g-section-with-header

And sure enough, that makes the ‘top stories’ BS disappear.

Of course, don’t use Google, use Searx or DuckDuckGo.