feat: pseudo directives with :remove (#5397)

Co-authored-by: Philipp Claßen <philipp.classen@posteo.de>

Author: seia-soto

packages/adblocker-content/src/index.ts

@@ -8,7 +8,7 @@
 
 import type { AST } from '@ghostery/adblocker-extended-selectors';
 
-const SCRIPT_ID = 'cliqz-adblocker-script';
+const SCRIPT_ID = 'ghostery-adblocker-script';
 const IGNORED_TAGS = new Set(['br', 'head', 'link', 'meta', 'script', 'style', 's']);
 
 export type Lifecycle = 'start' | 'dom-update';
@@ -27,8 +27,8 @@ export interface IMessageFromBackground {
   extended: {
     ast: AST;
     id: number;
-    remove: boolean;
     attribute?: string | undefined;
+    directive?: AST | undefined;
   }[];
 }
 

packages/adblocker-extended-selectors/src/eval.ts

@@ -503,3 +503,46 @@ export function querySelectorAll(element: Element, selector: AST): Element[] {
 
   return [];
 }
+
+/**
+ * Executes pseudo-directive on the element.
+ * @param element The target from normal or extended selector.
+ * @param selector The AST only containing pseudo directive.
+ */
+export function handlePseudoDirective(element: Element, selector: AST): void {
+  if (selector.type !== 'pseudo-class') {
+    return;
+  }
+
+  if (selector.name === 'remove') {
+    element.remove();
+  } else if (selector.name === 'remove-attr') {
+    if (selector.argument === undefined) {
+      return;
+    } else if (selector.argument.startsWith('/') && selector.argument.endsWith('/')) {
+      const regex = parseRegex(selector.argument);
+      for (let i = element.attributes.length - 1; i >= 0; i--) {
+        const attribute = element.attributes.item(i);
+        if (attribute !== null && regex.test(attribute.name)) {
+          element.removeAttribute(attribute.name);
+        }
+      }
+    } else {
+      return element.removeAttribute(stripsWrappingQuotes(selector.argument));
+    }
+  } else if (selector.name === 'remove-class') {
+    if (selector.argument === undefined) {
+      return;
+    } else if (selector.argument.startsWith('/') && selector.argument.endsWith('/')) {
+      const regex = parseRegex(selector.argument);
+      for (let i = element.classList.length - 1; i >= 0; i--) {
+        const className = element.classList.item(i);
+        if (className !== null && regex.test(className)) {
+          element.classList.remove(className);
+        }
+      }
+    } else {
+      return element.classList.remove(stripsWrappingQuotes(selector.argument));
+    }
+  }
+}

packages/adblocker-extended-selectors/src/extended.ts

@@ -8,6 +8,8 @@
 
 import { tokenize, RECURSIVE_PSEUDO_CLASSES } from './parse.js';
 
+import type { AST, PseudoClass } from './types.js';
+
 export const EXTENDED_PSEUDO_CLASSES = new Set([
   // '-abp-contains',
   // '-abp-has',
@@ -92,6 +94,10 @@ export const PSEUDO_CLASSES = new Set([
 // this reason.
 export const PSEUDO_ELEMENTS = new Set(['after', 'before', 'first-letter', 'first-line']);
 
+// Pseudo directives are pseudo-classes containing actions. It is
+// still not a standard CSS spec but defines custom action.
+export const PSEUDO_DIRECTIVES = new Set(['remove', 'remove-attr', 'remove-class']);
+
 export enum SelectorType {
   Normal,
   Extended,
@@ -111,9 +117,13 @@ export function classifySelector(selector: string): SelectorType {
   for (const token of tokens) {
     if (token.type === 'pseudo-class') {
       const { name } = token;
-      if (EXTENDED_PSEUDO_CLASSES.has(name) === true) {
+      if (EXTENDED_PSEUDO_CLASSES.has(name) === true || PSEUDO_DIRECTIVES.has(name) === true) {
         foundSupportedExtendedSelector = true;
-      } else if (PSEUDO_CLASSES.has(name) === false && PSEUDO_ELEMENTS.has(name) === false) {
+      } else if (
+        PSEUDO_CLASSES.has(name) === false &&
+        PSEUDO_ELEMENTS.has(name) === false
+        // `PSEUDO_DIRECTIVES.has(name)` is always `false` here.
+      ) {
         return SelectorType.Invalid;
       }
 
@@ -148,3 +158,119 @@ export function classifySelector(selector: string): SelectorType {
 
   return SelectorType.Normal;
 }
+
+/**
+ * Exposes ASTs per purpose. For an instance, it distinguishes
+ * a directive selector from element selectors.
+ * @returns "element" AST and "directive" AST; no "element" AST
+ * means there's no selector, no "directive" AST means there's no
+ * pseudo-directive.
+ */
+export function destructAST(ast: AST): { element: AST; directive: PseudoClass | null } {
+  // If the root AST type is 'pseudo-class', it means the
+  // selector starts like `:pseudo-class()` without any other
+  // types of selectors. We need to check if the AST is pseudo-
+  // directive. Currently, this is not possible as we drop these
+  // filters from the parsing phase.
+  // if (ast.type === 'pseudo-class' && PSEUDO_DIRECTIVES.has(ast.name)) {
+  //   return {
+  //     element: null,
+  //     directive: ast,
+  //   };
+  // }
+
+  // If the root AST type is 'compound', it means there's
+  // multiple AST nodes before the pseudo-directive. A compound
+  // cannot hold another compound as its children thanks to the
+  // parser characteristic. Also, the parser will group every
+  // other selectors such as 'complex', simplyfying the AST. It
+  // will look like 'some-selectors...:pseudo-class()`.
+  if (ast.type === 'compound') {
+    // We pick-up the last node and check if that's a pseudo-
+    // directive.
+    const last = ast.compound[ast.compound.length - 1];
+    if (last.type === 'pseudo-class' && PSEUDO_DIRECTIVES.has(last.name)) {
+      // Compound selectors have >=2 elements. When the length is
+      // 2: e.g. ['a', ':directive'], return 'a'. When the length
+      // is 3 or bigger: e.g. ['a', 'b', ':directive'], return
+      // ['a', 'b'] as a compound selector.
+      if (ast.compound.length < 3) {
+        return {
+          element: ast.compound[0],
+          directive: last,
+        };
+      }
+      return {
+        element: {
+          type: 'compound',
+          compound: ast.compound.slice(0, -1),
+        },
+        directive: last,
+      };
+    }
+  }
+
+  // If there's no pseudo-directive, everything else would be
+  // the element selector.
+  return {
+    element: ast,
+    directive: null,
+  };
+}
+
+/**
+ * Finds a position of a pseudo directive from the complete CSS
+ * selector. You can split the selector into normal or extended
+ * selector and pseudo directive using this function.
+ * @returns The position of a pseudo directive, or -1
+ */
+export function indexOfPseudoDirective(selector: string): number {
+  // Directives are not chainable. We manually parse from the
+  // backwards and break the process down into multiple loops for
+  // optimised code path.
+  let i = selector.lastIndexOf(')');
+  let c = -1; // Character code.
+
+  if (i === -1) {
+    return -1;
+  }
+
+  // Look for the potential quoting.
+  while (i--) {
+    c = selector.charCodeAt(i);
+
+    // Skip control and whitespace characters.
+    if (c < 33) continue;
+
+    if (c === 39 /* `'` */ || c === 34 /* '"' */ || c === 96 /* '`' */) {
+      // Run the first loop with the quoting expection.
+      while (i--) {
+        if (selector.charCodeAt(i) === c) {
+          break;
+        }
+      }
+
+      break;
+    }
+  }
+
+  // If it was not a quoting, we try to find the parenthesis.
+  if (i < 0) i = selector.length;
+
+  while (i--) {
+    if (selector.charCodeAt(i) === 40 /* '(' */) {
+      break;
+    }
+  }
+
+  // Look for the last definition character ':'.
+  c = selector.lastIndexOf(':', i);
+
+  // We stored the position of `:` in `c` and the position of `(`
+  // in `i`, so we can check the name of the pseudo directive.
+  if (PSEUDO_DIRECTIVES.has(selector.slice(c + 1, i))) {
+    return c;
+  }
+
+  return -1;
+}

packages/adblocker-extended-selectors/src/index.ts

@@ -7,12 +7,14 @@
  */
 
 export { parse, tokenize } from './parse.js';
-export { querySelectorAll, matches } from './eval.js';
+export { querySelectorAll, matches, handlePseudoDirective } from './eval.js';
 export * from './types.js';
 export {
   EXTENDED_PSEUDO_CLASSES,
   PSEUDO_CLASSES,
   PSEUDO_ELEMENTS,
   SelectorType,
   classifySelector,
+  destructAST,
+  indexOfPseudoDirective,
 } from './extended.js';