Content blocker not removing content

I have a content blocker that generally works correctly, but I need to block an element that has certain text in it.

For example, <span id="theId">Some text</span> is easy enough to block because I can locate the id and block that, but what if there is no id, or the id is completely random? What if it's just <span>Some text</span>? How do I block that?

Let's say this is my only content blocker rule:

[
  {
    "action": {
      "type": "css-display-none",
      "selector": ":has-text(/Some text/i)"
    },
    "trigger": {
      "url-filter": ".*"
    }
  }
]

No errors are seen when the rule is loaded, so it's syntactically correct, it just doesn't block the HTML. I gather this is because :has-text() works on attributes, not contents, so it works on alt, href, aria-label etc. but not on the contents of the element itself.

How do I block Some text in my example above? Thanks!

Answered by darkpaw in 824489022

I figured it out. Using :has-text(/myText/i) seems to work.

But... I still think Apple need to do far better in their documentation. One example is not good enough, especially when Apple devs are writing frameworks that cover many scenarios - why not mention some of those in the docs?

Is no one writing content blocker rules anymore?

Anyone at Apple know how to handle this? You guys wrote the content blocker framework; you must have examples of how to use it?

This page: https://developer.apple.com/documentation/safariservices/creating-a-content-blocker only has one example, and doesn't cover much at all.

Searching the internet seems to just return info on how the various adblocker apps work - including using their own internal methods (-abp-has(> div > img.advert) etc.), which Safari cannot use.

If we cannot select elements by the text they contain, then content blockers in Safari are severely hampered. What if I don't want to see news stories about football? Unless the alt tag of an img has the word 'football' in it, I can't block it, and I can't block something as simple as this: <a href="/pages/sport/thebiggame/">Football</a>.

Accepted Answer

I figured it out. Using :has-text(/myText/i) seems to work.

But... I still think Apple need to do far better in their documentation. One example is not good enough, especially when Apple devs are writing frameworks that cover many scenarios - why not mention some of those in the docs?

Content blocker not removing content
 
 
Q