@duckduckgo/autoconsent 14.0.1 → 14.2.0

package/lib/messages.ts

@@ -7,6 +7,7 @@ export type BackgroundMessage = InitResponseMessage | EvalResponseMessage | OptO
 export type ContentScriptMessage =
     | InitMessage
     | EvalMessage
+    | DelayMessage
     | DetectedMessage
     | FoundMessage
     | OptOutResultMessage
@@ -32,6 +33,11 @@ export type EvalMessage = {
     snippetId?: keyof typeof snippets;
 };
 
+export type DelayMessage = {
+    type: 'visualDelay';
+    timeout: number;
+};
+
 export type DetectedMessage = {
     type: 'cmpDetected';
     cmp: string;

package/lib/types.ts

@@ -24,7 +24,7 @@ export interface AutoCMP {
 }
 
 export interface DomActionsProvider {
-    click(selector: ElementSelector, all: boolean): boolean;
+    click(selector: ElementSelector, all: boolean): Promise<boolean>;
     elementExists(selector: ElementSelector): boolean;
     elementVisible(selector: ElementSelector, check: VisibilityCheck): boolean;
     waitForElement(selector: ElementSelector, timeout?: number): Promise<boolean>;
@@ -59,6 +59,7 @@ export type Config = {
     prehideTimeout: number;
     enableFilterList: boolean;
     enableHeuristicDetection: boolean;
+    visualTest: boolean; // If true, the script will delay before every click action
     logs: {
         lifecycle: boolean;
         rulesteps: boolean;
@@ -97,5 +98,5 @@ export type ConsentState = {
     detectedPopups: string[]; // Names of CMP rules where `detectPopup` returned true.
     heuristicPatterns: string[]; // Matched heuristic patterns
     heuristicSnippets: string[]; // Matched heuristic snippets
-    selfTest: boolean; // null if no self test was run, otherwise it holds the result of the self test.
+    selfTest: boolean | null; // null if no self test was run, otherwise it holds the result of the self test.
 };

package/lib/utils.ts

@@ -61,6 +61,7 @@ export function isElementVisible(elem: HTMLElement): boolean {
 }
 
 export function copyObject(data: any) {
+    // @ts-expect-error - globalThis.structuredClone may be undefined
     if (globalThis.structuredClone) {
         return structuredClone(data);
     }
@@ -79,6 +80,7 @@ export function normalizeConfig(providedConfig: any): Config {
         isMainWorld: false,
         prehideTimeout: 2000,
         enableFilterList: false,
+        visualTest: false,
         logs: {
             lifecycle: false,
             rulesteps: false,
@@ -101,9 +103,56 @@ export function normalizeConfig(providedConfig: any): Config {
 }
 
 export function scheduleWhenIdle(callback: () => void, timeout = 500) {
+    // @ts-expect-error - globalThis.requestIdleCallback may be undefined
     if (globalThis.requestIdleCallback) {
         requestIdleCallback(callback, { timeout });
     } else {
         setTimeout(callback, 0);
     }
 }
+
+export function highlightNode(node: HTMLElement) {
+    if (!node.style) return;
+    if (node.__oldStyles !== undefined) {
+        return; // already highlighted
+    }
+    if (node.hasAttribute('style')) {
+        node.__oldStyles = node.style.cssText;
+    }
+    node.style.animation = 'pulsate .5s infinite';
+    node.style.outline = 'solid red';
+
+    let styleTag = document.querySelector('style#autoconsent-debug-styles');
+    if (!styleTag) {
+        styleTag = document.createElement('style');
+        styleTag.id = 'autoconsent-debug-styles';
+    }
+
+    styleTag.textContent = `
+      @keyframes pulsate {
+        0% {
+          outline-width: 8px;
+          outline-offset: -4px;
+        }
+        50% {
+          outline-width: 4px;
+          outline-offset: -2px;
+        }
+        100% {
+          outline-width: 8px;
+          outline-offset: -4px;
+        }
+      }
+    `;
+    document.head.appendChild(styleTag);
+}
+
+export function unhighlightNode(node: HTMLElement) {
+    if (!node.style || !node.hasAttribute('style')) return;
+    if (node.__oldStyles !== undefined) {
+        node.style.cssText = node.__oldStyles;
+        delete node.__oldStyles;
+    } else {
+        node.removeAttribute('style');
+    }
+}

package/lib/web.ts

@@ -28,8 +28,8 @@ function filterCMPs(rules: AutoCMP[], config: Config) {
 export default class AutoConsent {
     id = getRandomID();
     rules: AutoCMP[] = [];
-    config: Config;
-    foundCmp: AutoCMP = null;
+    #config?: Config;
+    foundCmp?: AutoCMP;
     state: ConsentState = {
         cosmeticFiltersOn: false,
         filterListReported: false,
@@ -43,12 +43,12 @@ export default class AutoConsent {
         selfTest: null,
     };
     domActions: DomActions;
-    filtersEngine: FiltersEngine;
-    protected sendContentMessage: MessageSender;
-    protected cosmeticStyleSheet: CSSStyleSheet;
-    protected focusedElement: HTMLElement = null;
+    filtersEngine?: FiltersEngine;
+    sendContentMessage: MessageSender;
+    protected cosmeticStyleSheet?: CSSStyleSheet;
+    protected focusedElement?: HTMLElement;
 
-    constructor(sendContentMessage: MessageSender, config: Partial<Config> = null, declarativeRules: RuleBundle = null) {
+    constructor(sendContentMessage: MessageSender, config: Partial<Config> | null = null, declarativeRules: RuleBundle | null = null) {
         evalState.sendContentMessage = sendContentMessage;
         this.sendContentMessage = sendContentMessage;
         this.rules = [];
@@ -72,10 +72,17 @@ export default class AutoConsent {
         this.domActions = new DomActions(this);
     }
 
-    initialize(config: Partial<Config>, declarativeRules: RuleBundle) {
+    get config() {
+        if (!this.#config) {
+            throw new Error('AutoConsent is not initialized yet');
+        }
+        return this.#config;
+    }
+
+    initialize(config: Partial<Config>, declarativeRules: RuleBundle | null) {
         const normalizedConfig = normalizeConfig(config);
         normalizedConfig.logs.lifecycle && console.log('autoconsent init', window.location.href);
-        this.config = normalizedConfig;
+        this.#config = normalizedConfig;
         if (!normalizedConfig.enabled) {
             normalizedConfig.logs.lifecycle && console.log('autoconsent is disabled');
             return;
@@ -85,9 +92,9 @@ export default class AutoConsent {
             this.parseDeclarativeRules(declarativeRules);
         }
 
-        if (config.enableFilterList) {
+        if (BUNDLE_FILTERLIST && config.enableFilterList) {
             try {
-                if (BUNDLE_FILTERLIST && serializedEngine && serializedEngine.length > 0) {
+                if (serializedEngine && serializedEngine.length > 0) {
                     this.filtersEngine = deserializeFilterList(serializedEngine);
                 }
             } catch (e) {
@@ -104,7 +111,7 @@ export default class AutoConsent {
 
         this.rules = filterCMPs(this.rules, normalizedConfig);
 
-        if (config.enablePrehide) {
+        if (this.shouldPrehide) {
             if (document.documentElement) {
                 this.prehideElements(); // prehide as early as possible to prevent flickering
             } else {
@@ -130,6 +137,10 @@ export default class AutoConsent {
         this.updateState({ lifecycle: 'initialized' });
     }
 
+    get shouldPrehide() {
+        return this.config.enablePrehide && !this.config.visualTest;
+    }
+
     saveFocus() {
         this.focusedElement = document.activeElement as HTMLElement;
         if (this.focusedElement) {
@@ -145,7 +156,7 @@ export default class AutoConsent {
             } catch (e) {
                 this.config.logs.errors && console.warn('error restoring focus', e);
             }
-            this.focusedElement = null;
+            this.focusedElement = undefined;
         }
     }
 
@@ -157,9 +168,9 @@ export default class AutoConsent {
 
     parseDeclarativeRules(declarativeRules: RuleBundle) {
         if (declarativeRules.consentomatic) {
-            Object.keys(declarativeRules.consentomatic).forEach((name) => {
-                this.addConsentomaticCMP(name, declarativeRules.consentomatic[name]);
-            });
+            for (const [name, rule] of Object.entries(declarativeRules.consentomatic)) {
+                this.addConsentomaticCMP(name, rule);
+            }
         }
 
         if (declarativeRules.autoconsent) {
@@ -202,7 +213,7 @@ export default class AutoConsent {
         this.updateState({ detectedCmps: foundCmps.map((c) => c.name) });
         if (foundCmps.length === 0) {
             logsConfig.lifecycle && console.log('no CMP found', location.href);
-            if (this.config.enablePrehide) {
+            if (this.shouldPrehide) {
                 this.undoPrehide();
             }
 
@@ -236,7 +247,7 @@ export default class AutoConsent {
 
         if (foundPopups.length === 0) {
             logsConfig.lifecycle && console.log('no popup found');
-            if (this.config.enablePrehide) {
+            if (this.shouldPrehide) {
                 this.undoPrehide();
             }
             return false;
@@ -395,11 +406,11 @@ export default class AutoConsent {
 
     async handlePopup(cmp: AutoCMP): Promise<boolean> {
         this.updateState({ lifecycle: 'openPopupDetected' });
-        if (this.config.enablePrehide && !this.state.prehideOn) {
+        if (this.shouldPrehide && !this.state.prehideOn) {
             // prehide might have timeouted by this time, apply it again
             this.prehideElements();
         }
-        if (this.state.cosmeticFiltersOn) {
+        if (BUNDLE_FILTERLIST && this.state.cosmeticFiltersOn) {
             // cancel cosmetic filters if we have a rule for this popup
             this.undoCosmetics();
         }
@@ -431,7 +442,7 @@ export default class AutoConsent {
             logsConfig.lifecycle && console.log(`${this.foundCmp.name}: opt out result ${optOutResult}`);
         }
 
-        if (this.config.enablePrehide) {
+        if (this.shouldPrehide) {
             this.undoPrehide();
         }
 
@@ -439,15 +450,15 @@ export default class AutoConsent {
             type: 'optOutResult',
             cmp: this.foundCmp ? this.foundCmp.name : 'none',
             result: optOutResult,
-            scheduleSelfTest: this.foundCmp && this.foundCmp.hasSelfTest,
+            scheduleSelfTest: Boolean(this.foundCmp && this.foundCmp.hasSelfTest),
             url: location.href,
         });
 
-        if (optOutResult && !this.foundCmp.isIntermediate) {
+        if (optOutResult && this.foundCmp && !this.foundCmp.isIntermediate) {
             this.sendContentMessage({
                 type: 'autoconsentDone',
-                cmp: this.foundCmp.name,
-                isCosmetic: this.foundCmp.isCosmetic,
+                cmp: this.foundCmp?.name,
+                isCosmetic: this.foundCmp?.isCosmetic,
                 url: location.href,
             });
             this.updateState({ lifecycle: 'done' });
@@ -474,7 +485,7 @@ export default class AutoConsent {
             logsConfig.lifecycle && console.log(`${this.foundCmp.name}: opt in result ${optInResult}`);
         }
 
-        if (this.config.enablePrehide) {
+        if (this.shouldPrehide) {
             this.undoPrehide();
         }
 
@@ -486,7 +497,7 @@ export default class AutoConsent {
             url: location.href,
         });
 
-        if (optInResult && !this.foundCmp.isIntermediate) {
+        if (optInResult && this.foundCmp && !this.foundCmp.isIntermediate) {
             this.sendContentMessage({
                 type: 'autoconsentDone',
                 cmp: this.foundCmp.name,
@@ -547,12 +558,12 @@ export default class AutoConsent {
 
         const selectors = this.rules
             .filter((rule) => rule.prehideSelectors && rule.checkRunContext())
-            .reduce((selectorList, rule) => [...selectorList, ...rule.prehideSelectors], globalHidden);
+            .reduce((selectorList, rule) => [...(selectorList || []), ...(rule.prehideSelectors || [])], globalHidden);
 
         this.updateState({ prehideOn: true });
         setTimeout(() => {
             // unhide things if we are still looking for a pop-up
-            if (this.config.enablePrehide && this.state.prehideOn && !['runningOptOut', 'runningOptIn'].includes(this.state.lifecycle)) {
+            if (this.shouldPrehide && this.state.prehideOn && !['runningOptOut', 'runningOptIn'].includes(this.state.lifecycle)) {
                 logsConfig.lifecycle && console.log('Process is taking too long, unhiding elements');
                 this.undoPrehide();
             }
@@ -570,11 +581,11 @@ export default class AutoConsent {
      * @returns true if the filters were applied, false otherwise
      */
     async applyCosmeticFilters(styles?: string) {
-        if (!this.filtersEngine) {
+        if (!BUNDLE_FILTERLIST || !this.filtersEngine) {
             return false;
         }
-        const logsConfig = this.config?.logs;
-        if (BUNDLE_FILTERLIST && !styles) {
+        const logsConfig = this.config.logs;
+        if (!styles) {
             styles = getCosmeticStylesheet(this.filtersEngine);
         }
 
@@ -606,9 +617,11 @@ export default class AutoConsent {
     }
 
     undoCosmetics() {
-        this.updateState({ cosmeticFiltersOn: false });
-        this.config.logs.lifecycle && console.log('[undocosmetics]', this.cosmeticStyleSheet, location.href);
-        this.domActions.removeStyleSheet(this.cosmeticStyleSheet);
+        if (BUNDLE_FILTERLIST) {
+            this.updateState({ cosmeticFiltersOn: false });
+            this.config.logs.lifecycle && console.log('[undocosmetics]', this.cosmeticStyleSheet, location.href);
+            this.domActions.removeStyleSheet(this.cosmeticStyleSheet);
+        }
     }
 
     reportFilterlist() {
@@ -636,7 +649,7 @@ export default class AutoConsent {
         // this may be a false positive: sometimes filters hide unrelated elements that are not cookie pop-ups
         const cosmeticFiltersWorked = this.domActions.elementVisible(getFilterlistSelectors(cosmeticStyles), 'any');
 
-        const logsConfig = this.config?.logs;
+        const logsConfig = this.config.logs;
 
         if (!cosmeticFiltersWorked) {
             logsConfig?.lifecycle && console.log("Cosmetic filters didn't work, removing them", location.href);
@@ -681,7 +694,7 @@ export default class AutoConsent {
     }
 
     async receiveMessageCallback(message: BackgroundMessage) {
-        const logsConfig = this.config?.logs;
+        const logsConfig = this.#config?.logs;
         if (logsConfig?.messages) {
             console.log('received from background', message, window.location.href);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duckduckgo/autoconsent",
-  "version": "14.0.1",
+  "version": "14.2.0",
   "description": "",
   "exports": {
     ".": {
@@ -51,7 +51,7 @@
     "@esm-bundle/chai": "^4.3.4-fix.0",
     "@playwright/test": "^1.17.1",
     "@types/chai": "^5.0.0",
-    "@types/chrome": "^0.0.322",
+    "@types/chrome": "^0.0.326",
     "@types/eslint": "^9.6.1",
     "@types/mocha": "^10.0.1",
     "@types/sinon": "^17.0.4",

package/playwright/runner.ts

@@ -73,7 +73,7 @@ export function generateTest(url: string, expectedCmp: string, options: TestOpti
                 });
             }
 
-            let selfTestFrame: Frame = null;
+            let selfTestFrame: Frame | null = null;
             async function messageCallback({ frame }: { frame: Frame }, msg: ContentScriptMessage) {
                 LOG_MESSAGES.includes(msg.type) && console.log(msg);
                 received.push(msg);

package/readme.md

@@ -174,7 +174,7 @@ Returns true if the given selector matches one or more elements.
   "check": "any" | "all" | "none"
 }
 ```
-Returns true if elements matched by ElementSelector are currently visible on the page. If `check` is `all`, every element must be visible. If `check` is `none`, no element should be visible. Visibility check is a CSS-based heuristic.
+Returns true if elements matched by ElementSelector are currently visible on the page. If `check` is `all` (default), every element must be visible. If `check` is `none`, no element should be visible. Visibility check is a CSS-based heuristic.
 
 ### Wait for element
 

package/rules/autoconsent/cookie-law-info.json

@@ -1,14 +1,25 @@
 {
     "name": "cookie-law-info",
-    "prehideSelectors": ["#cookie-law-info-bar, #cookie-law-bg"],
+    "prehideSelectors": ["#cookie-law-info-bar, #cookie-law-bg, .cli-popupbar-overlay"],
     "detectCmp": [{ "exists": "#cookie-law-info-bar" }, { "eval": "EVAL_COOKIE_LAW_INFO_DETECT" }],
-    "detectPopup": [{ "visible": "#cookie-law-info-bar, #cookie-law-bg", "check": "any" }],
-    "optIn": [{ "click": "[data-cli_action=\"accept\"]" }],
+    "detectPopup": [{ "visible": "#cookie-law-info-bar" }],
+    "optIn": [
+        {
+            "click": "[data-cli_action=\"accept\"]"
+        }
+    ],
     "optOut": [
-        { "hide": "#cookie-law-info-bar, #cookie-law-bg" },
+        {
+            "hide": "#cookie-law-info-bar, #cookie-law-bg, .cli-popupbar-overlay"
+        },
         {
             "eval": "EVAL_COOKIE_LAW_INFO_0"
         }
     ],
-    "test": [{ "cookieContains": "cookielawinfo-checkbox-non-necessary=yes", "negated": true }]
+    "test": [
+        {
+            "cookieContains": "cookielawinfo-checkbox-non-necessary=yes",
+            "negated": true
+        }
+    ]
 }

package/rules/autoconsent/cookiehub.json

@@ -0,0 +1,61 @@
+{
+    "name": "cookiehub",
+    "vendorUrl": "https://www.cookiehub.com/",
+    "prehideSelectors": [".ch2-container"],
+    "detectCmp": [
+        {
+            "exists": ".ch2-dialog"
+        }
+    ],
+    "detectPopup": [
+        {
+            "visible": ".ch2-dialog"
+        }
+    ],
+    "optIn": [
+        {
+            "waitForThenClick": ".ch2-allow-all-btn"
+        }
+    ],
+    "optOut": [
+        {
+            "if": { "exists": ".ch2-open-settings-btn, .ch2-open-personal-data-btn" },
+            "then": [
+                {
+                    "click": ".ch2-open-settings-btn, .ch2-open-personal-data-btn"
+                },
+                {
+                    "waitForVisible": ".ch2-settings"
+                },
+                {
+                    "if": { "exists": ".ch2-deny-all-btn" },
+                    "then": [
+                        {
+                            "click": ".ch2-deny-all-btn"
+                        }
+                    ],
+                    "else": [
+                        {
+                            "click": ".ch2-settings input[type=checkbox]:not([disabled]):checked",
+                            "all": true,
+                            "optional": true
+                        },
+                        {
+                            "click": ".ch2-save-settings-btn"
+                        }
+                    ]
+                }
+            ],
+            "else": [
+                {
+                    "hide": ".ch2-container"
+                }
+            ]
+        }
+    ],
+    "test": [
+        {
+            "cookieContains": "cookiehub="
+        }
+    ]
+}

package/rules/autoconsent/eu-cookie-compliance.json

@@ -2,19 +2,20 @@
     "name": "eu-cookie-compliance-banner",
     "detectCmp": [{ "exists": "body.eu-cookie-compliance-popup-open" }],
     "detectPopup": [{ "exists": "body.eu-cookie-compliance-popup-open" }],
-    "optIn": [{ "click": ".agree-button" }],
+    "optIn": [
+        {
+            "click": ".eu-cookie-compliance-banner .agree-button, .eu-cookie-compliance-banner .accept-all"
+        }
+    ],
     "optOut": [
         {
-            "if": {
-                "visible": ".decline-button,.eu-cookie-compliance-save-preferences-button"
-            },
-            "then": [
-                {
-                    "click": ".decline-button,.eu-cookie-compliance-save-preferences-button"
-                }
-            ]
-        },
-        { "hide": ".eu-cookie-compliance-banner-info, #sliding-popup" }
+            "click": ".eu-cookie-compliance-banner .decline-button, .eu-cookie-compliance-banner .accept-necessary, .eu-cookie-compliance-save-preferences-button"
+        }
     ],
-    "test": [{ "cookieContains": "cookie-agreed=2", "negated": true }]
+    "test": [
+        {
+            "cookieContains": "cookie-agreed=2",
+            "negated": true
+        }
+    ]
 }