Implement hide-if-contains snippet

[mjethani]

Background

The problem is described in #6804.

Until this improvement is made to element hiding emulation, we should use a snippet to hide an ad before the user sees it.

What to change

Implement a snippet called hide-if-contains with the following signature:

function hideIfContains(search, selector = "*")

On any DOM modification, the snippet should use document.querySelectorAll(selector) to look up all elements that match the given CSS selector, then look for search in each element's text content and hide the element if the string is found.

Hints for testers

Try this:

<!-- test.html -->
<div>
  Lorem ipsum dolor sit amet, consectetur
  adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua.
</div>
<script src="script.js"></script>

/* script.js */
setTimeout(() =>
{
  let ad = document.createElement("div");
  ad.id = Math.random().toString(36).substring(2);
  ad.innerHTML = "<div>Best ad ever!</div>";
  document.body.appendChild(ad);
},
500);

The filter #$#hide-if-contains 'Best ad ever!' div[id] should hide the ad.

[abpbot]

A commit referencing this issue has landed:
​Issue 6809 - Implement hide-if-contains snippet

[abpbot]

A commit referencing this issue has landed:
​Issue 6809 - Implement hide-if-contains snippet

[Ross]

Appears to be working correctly in Firefox 62. However in Chrome 68 it only seems to work some of the time. Manish do you see the same?

[mjethani]

@Ross I've updated the test in this issue. There may be a timing issue, which has not been a problem in practice for us. I'll try to address it anyway as a separate issue. Meanwhile let's try with a 500-millisecond delay as shown in the example.

[Ross]

Thanks. It then works as expected.

ABP 3.2.2103
Firefox 61 / 55 / 51 / Windows 10
Chrome 68 / 55 / 49 / Windows 10