@duckduckgo/autoconsent 3.0.4 → 4.1.0

package/lib/web.ts

@@ -1,18 +1,38 @@
 import { rules as dynamicRules, createAutoCMP } from './index';
-import { MessageSender, AutoCMP, RuleBundle, Config } from './types';
+import { MessageSender, AutoCMP, RuleBundle, Config, ConsentState } from './types';
 import { ConsentOMaticCMP, ConsentOMaticConfig } from './cmps/consentomatic';
 import { AutoConsentCMPRule } from './rules';
 import { enableLogs } from './config';
 import { BackgroundMessage, InitMessage } from './messages';
 import { prehide, undoPrehide } from './rule-executors';
 import { evalState, resolveEval } from './eval-handler';
+import { getRandomID } from './random';
 
 export * from './index';
 
+function filterCMPs(rules: AutoCMP[], config: Config) {
+  return rules.filter((cmp) => {
+    return (
+      (!config.disabledCmps || !config.disabledCmps.includes(cmp.name)) // CMP is not disabled
+      &&
+      (config.enableCosmeticRules || !cmp.isCosmetic) // CMP is not cosmetic or cosmetic rules are enabled
+    );
+  });
+}
+
 export default class AutoConsent {
+  id = getRandomID();
   rules: AutoCMP[] = [];
   config: Config;
   foundCmp: AutoCMP = null;
+  state: ConsentState = {
+    lifecycle: 'loading',
+    prehideOn: false,
+    findCmpAttempts: 0,
+    detectedCmps: [],
+    detectedPopups: [],
+    selfTest: null,
+  };
   protected sendContentMessage: MessageSender;
 
   constructor(sendContentMessage: MessageSender, config: Config = null, declarativeRules: RuleBundle = null) {
@@ -21,6 +41,7 @@ export default class AutoConsent {
     this.rules = [...dynamicRules];
 
     enableLogs && console.log('autoconsent init', window.location.href);
+    this.updateState({ lifecycle: 'loading' });
     if (config) {
       this.initialize(config, declarativeRules);
     } else {
@@ -32,6 +53,7 @@ export default class AutoConsent {
         url: window.location.href,
       };
       sendContentMessage(initMsg);
+      this.updateState({ lifecycle: 'waitingForInitResponse' });
     }
   }
 
@@ -45,9 +67,8 @@ export default class AutoConsent {
     if (declarativeRules) {
       this.parseRules(declarativeRules);
     }
-    if (config.disabledCmps?.length > 0) {
-      this.disableCMPs(config.disabledCmps);
-    }
+
+    this.rules = filterCMPs(this.rules, config);
 
     if (config.enablePrehide) {
       if (document.documentElement) {
@@ -72,6 +93,7 @@ export default class AutoConsent {
     } else {
       this.start();
     }
+    this.updateState({ lifecycle: 'initialized' });
   }
 
   parseRules(declarativeRules: RuleBundle) {
@@ -88,10 +110,6 @@ export default class AutoConsent {
     this.rules.push(createAutoCMP(config));
   }
 
-  disableCMPs(cmpNames: string[]) {
-    this.rules = this.rules.filter((cmp) => !cmpNames.includes(cmp.name))
-  }
-
   addConsentomaticCMP(name: string, config: ConsentOMaticConfig) {
     this.rules.push(new ConsentOMaticCMP(`com_${name}`, config));
   }
@@ -106,73 +124,62 @@ export default class AutoConsent {
   }
 
   async _start() {
-    enableLogs && console.log(`Detecting CMPs on ${window.location.href}`)
-    const cmps = await this.findCmp(this.config.detectRetries);
-    if (cmps.length > 0) {
-      const popupLookups: Promise<boolean>[] = [];
-      for (const cmp of cmps) {
-        enableLogs && console.log("detected CMP:", cmp.name, window.location.href);
-        this.sendContentMessage({
-          type: 'cmpDetected',
-          url: location.href,
-          cmp: cmp.name,
-        }); // notify the browser
-        popupLookups.push(this.waitForPopup(cmp).then((isOpen) => {
-          if (isOpen) {
-            if (!this.foundCmp) {
-              this.foundCmp = cmp;
-            }
-            this.sendContentMessage({
-              type: 'popupFound',
-              cmp: cmp.name,
-              url: location.href,
-            }); // notify the browser
-            return true;
-          } else {
-            return Promise.reject(`${cmp.name} popup not found`);
-          }
-        }));
+    enableLogs && console.log(`Detecting CMPs on ${window.location.href}`);
+    this.updateState({ lifecycle: 'started' });
+    const foundCmps = await this.findCmp(this.config.detectRetries);
+    this.updateState({ detectedCmps: foundCmps.map(c => c.name) });
+    if (foundCmps.length === 0) {
+      enableLogs && console.log("no CMP found", location.href);
+      if (this.config.enablePrehide) {
+        this.undoPrehide();
       }
+      this.updateState({ lifecycle: 'nothingDetected' });
+      return false;
+    }
+    this.updateState({ lifecycle: 'cmpDetected' });
 
-      // could use `somethingOpen = await Promise.any(popupLookups).catch(() => false)`, but Promise.any is often unavailable in polyfilled environments
-      let somethingOpen = false;
-      for (const popupLookup of popupLookups) {
-        try {
-          await popupLookup;
-          somethingOpen = true;
-          break;
-        } catch (e) {
-          continue;
-        }
-      }
+    // we resort to cosmetic rules only if no non-cosmetic rules are found
+    let foundPopups = await this.detectPopups(foundCmps.filter(r => !r.isCosmetic))
+    if (foundPopups.length === 0) {
+      foundPopups = await this.detectPopups(foundCmps.filter(r => r.isCosmetic))
+    }
 
-      if (!somethingOpen) {
-        enableLogs && console.log('no popup found');
-        if (this.config.enablePrehide) {
-          undoPrehide();
-        }
-        return false;
+    if (foundPopups.length === 0) {
+      enableLogs && console.log('no popup found');
+      if (this.config.enablePrehide) {
+        this.undoPrehide();
       }
+      return false;
+    }
+    this.updateState({ lifecycle: 'openPopupDetected' });
 
-      if (this.config.autoAction === 'optOut') {
-        return await this.doOptOut();
-      } else if (this.config.autoAction === 'optIn') {
-        return await this.doOptIn();
-      }
+    if (foundPopups.length > 1) {
+      const errorDetails = {
+        msg: `Found multiple CMPs, check the detection rules.`,
+        cmps: foundPopups.map((cmp) => cmp.name),
+      };
+      enableLogs && console.warn(errorDetails.msg, errorDetails.cmps);
+      this.sendContentMessage({
+        type: 'autoconsentError',
+        details: errorDetails,
+      });
+    }
 
+    this.foundCmp = foundPopups[0];
+
+    if (this.config.autoAction === 'optOut') {
+      return await this.doOptOut();
+    } else if (this.config.autoAction === 'optIn') {
+      return await this.doOptIn();
+    } else {
       enableLogs && console.log("waiting for opt-out signal...", location.href);
       return true;
-    } else {
-      enableLogs && console.log("no CMP found", location.href);
-      if (this.config.enablePrehide) {
-        undoPrehide();
-      }
-      return false;
     }
   }
 
   async findCmp(retries: number): Promise<AutoCMP[]> {
-    const allFoundCmps: AutoCMP[] = [];
+    this.updateState({ findCmpAttempts: this.state.findCmpAttempts + 1 })
+    const foundCMPs: AutoCMP[] = [];
 
     for (const cmp of this.rules) {
       try {
@@ -181,27 +188,20 @@ export default class AutoConsent {
         }
         const result = await cmp.detectCmp();
         if (result) {
-          enableLogs && console.log(`Found CMP: ${cmp.name}`);
-          allFoundCmps.push(cmp);
+          enableLogs && console.log(`Found CMP: ${cmp.name} ${window.location.href}`);
+          this.sendContentMessage({
+            type: 'cmpDetected',
+            url: location.href,
+            cmp: cmp.name,
+          }); // notify the browser
+          foundCMPs.push(cmp);
         }
       } catch (e) {
         enableLogs && console.warn(`error detecting ${cmp.name}`, e);
       }
     }
 
-    if (allFoundCmps.length > 1) {
-      const errorDetails = {
-        msg: `Found multiple CMPs, check the detection rules.`,
-        cmps: allFoundCmps.map((cmp) => cmp.name),
-      };
-      enableLogs && console.warn(errorDetails.msg, errorDetails.cmps);
-      this.sendContentMessage({
-        type: 'autoconsentError',
-        details: errorDetails,
-      });
-    }
-
-    if (allFoundCmps.length === 0 && retries > 0) {
+    if (foundCMPs.length === 0 && retries > 0) {
       return new Promise((resolve) => {
         setTimeout(async () => {
           const result = this.findCmp(retries - 1);
@@ -210,10 +210,28 @@ export default class AutoConsent {
       });
     }
 
-    return allFoundCmps;
+    return foundCMPs;
+  }
+
+  async detectPopups(cmps: AutoCMP[]): Promise<AutoCMP[]> {
+    const result: AutoCMP[] = [];
+    const popupLookups = cmps.map((cmp) => this.waitForPopup(cmp).then((isOpen) => {
+      if (isOpen) {
+        this.updateState({ detectedPopups: this.state.detectedPopups.concat([cmp.name]) });
+        this.sendContentMessage({
+          type: 'popupFound',
+          cmp: cmp.name,
+          url: location.href,
+        }); // notify the browser
+        result.push(cmp);
+      }
+    }).catch(() => null));
+    await Promise.all(popupLookups);
+    return result;
   }
 
   async doOptOut(): Promise<boolean> {
+    this.updateState({ lifecycle: 'runningOptOut' })
     let optOutResult;
     if (!this.foundCmp) {
       enableLogs && console.log('no CMP to opt out');
@@ -225,7 +243,7 @@ export default class AutoConsent {
     }
 
     if (this.config.enablePrehide) {
-      undoPrehide();
+      this.undoPrehide();
     }
 
     this.sendContentMessage({
@@ -240,14 +258,19 @@ export default class AutoConsent {
       this.sendContentMessage({
         type: 'autoconsentDone',
         cmp: this.foundCmp.name,
+        isCosmetic: this.foundCmp.isCosmetic,
         url: location.href,
       });
+      this.updateState({ lifecycle: 'done' })
+    } else {
+      this.updateState({ lifecycle: optOutResult ? 'optOutSucceeded' : 'optOutFailed' })
     }
 
     return optOutResult;
   }
 
   async doOptIn(): Promise<boolean> {
+    this.updateState({ lifecycle: 'runningOptIn' })
     let optInResult;
     if (!this.foundCmp) {
       enableLogs && console.log('no CMP to opt in');
@@ -259,7 +282,7 @@ export default class AutoConsent {
     }
 
     if (this.config.enablePrehide) {
-      undoPrehide();
+      this.undoPrehide();
     }
 
     this.sendContentMessage({
@@ -274,8 +297,12 @@ export default class AutoConsent {
       this.sendContentMessage({
         type: 'autoconsentDone',
         cmp: this.foundCmp.name,
+        isCosmetic: this.foundCmp.isCosmetic,
         url: location.href,
       });
+      this.updateState({ lifecycle: 'done' })
+    } else {
+      this.updateState({ lifecycle: optInResult ? 'optInSucceeded' : 'optInFailed' })
     }
 
     return optInResult;
@@ -297,6 +324,7 @@ export default class AutoConsent {
       result: selfTestResult,
       url: location.href,
     });
+    this.updateState({ selfTest: selfTestResult })
     return selfTestResult;
   }
 
@@ -323,11 +351,28 @@ export default class AutoConsent {
       return selectorList;
     }, globalHidden);
 
+    this.updateState({ prehideOn: true })
     return prehide(selectors);
   }
 
+  undoPrehide(): boolean {
+    this.updateState({ prehideOn: false })
+    return undoPrehide();
+  }
+
+  updateState(change: Partial<ConsentState>) {
+    Object.assign(this.state, change)
+    this.sendContentMessage({
+      type: 'report',
+      instanceId: this.id,
+      url: window.location.href,
+      mainFrame: window.top === window.self,
+      state: this.state,
+    })
+  }
+
   async receiveMessageCallback(message: BackgroundMessage) {
-    if (enableLogs && message.type !== 'evalResp' /* evals are noisy */) {
+    if (enableLogs && ['evalResp', 'report'].includes(message.type) /* evals are noisy */) {
       console.log('received from background', message, window.location.href);
     }
     switch (message.type) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duckduckgo/autoconsent",
-  "version": "3.0.4",
+  "version": "4.1.0",
   "description": "",
   "main": "dist/autoconsent.cjs.js",
   "module": "dist/autoconsent.esm.js",
@@ -9,6 +9,7 @@
   },
   "scripts": {
     "clean": "rm -r dist",
+    "lint": "eslint lib/ playwright/ tests/ rules/autoconsent/*.json",
     "bundle": "rollup -c",
     "watch": "rollup -c -w",
     "test": "playwright test",
@@ -28,16 +29,18 @@
   "license": "MPL-2.0",
   "devDependencies": {
     "@playwright/test": "^1.17.1",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-typescript": "^8.3.2",
+    "@rollup/plugin-json": "^6.0.0",
+    "@rollup/plugin-typescript": "^10.0.1",
     "@types/chai": "^4.3.1",
-    "@types/chrome": "^0.0.188",
-    "@types/mocha": "^9.1.1",
-    "@typescript-eslint/eslint-plugin": "^5.25.0",
-    "@typescript-eslint/parser": "^5.25.0",
+    "@types/chrome": "^0.0.206",
+    "@types/mocha": "^10.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.42.1",
+    "@typescript-eslint/parser": "^5.42.1",
     "auto": "^10.37.6",
+    "bulma": "^0.9.4",
     "chai": "^4.2.0",
-    "eslint-config-airbnb": "^19.0.4",
+    "eslint": "^8.27.0",
+    "eslint-plugin-json": "^3.1.0",
     "mocha": "^10.0.0",
     "rollup": "^2.79.1",
     "rollup-plugin-copy": "^3.4.0",

package/playwright/runner.ts

@@ -88,6 +88,7 @@ export function generateTest(
               disabledCmps: [],
               enablePrehide: true,
               detectRetries: 20,
+              enableCosmeticRules: true,
             })} })`);
             break;
           }

package/rollup.config.js

@@ -40,15 +40,17 @@ export default [{
   }],
   plugins: [
     typescript(),
-    terser(),
     copy({
       targets: [
         {
-          src: ['./addon/icons', './rules/rules.json'],
+          src: [
+            './addon/icons', 
+            './rules/rules.json'
+          ],
           dest: ['./dist/addon-firefox/', './dist/addon-mv3/']
         },
         {
-          src: ['./addon/popup.html'],
+          src: ['./addon/popup.html', './addon/devtools'],
           dest: ['./dist/addon-mv3/']
         },
         {
@@ -61,6 +63,10 @@ export default [{
           dest: './dist/addon-firefox',
           rename: 'manifest.json',
         },
+        {
+          src: './node_modules/bulma/css/bulma.min.css',
+          dest: './dist/addon-mv3/devtools/'
+        }
       ]
     })
   ]
@@ -75,7 +81,6 @@ export default [{
   }],
   plugins: [
     typescript(),
-    terser(),
   ],
 }, {
   input: './addon/popup.ts',
@@ -85,6 +90,14 @@ export default [{
   }],
   plugins: [
     typescript(),
-    terser(),
+  ],
+}, {
+  input: './addon/devtools/panel.ts',
+  output: [{
+    file: './dist/addon-mv3/devtools/panel.js',
+    format: 'iife',
+  }],
+  plugins: [
+    typescript(),
   ],
 }];

package/rules/autoconsent/affinity-serif-com.json

@@ -2,10 +2,7 @@
   "name": "affinity.serif.com",
   "detectCmp": [
     {
-      "exists": ".c-cookie-banner"
-    },
-    {
-      "exists": ".c-cookie-banner button"
+      "exists": ".c-cookie-banner button[data-qa='allow-all-cookies']"
     }
   ],
   "detectPopup": [

package/rules/autoconsent/ausopen.json

@@ -1,8 +1,8 @@
 {
   "name": "ausopen.com",
-  "isHidingRule": true,
+  "cosmetic": true,
   "detectCmp": [{ "exists": ".gdpr-popup__message" }],
   "detectPopup": [{ "visible": ".gdpr-popup__message" }],
   "optOut": [{ "hide": [".gdpr-popup__message"]}],
-  "optIn": [{ "click": [".gdpr-popup__message button"]}]
+  "optIn": [{ "click": ".gdpr-popup__message button"}]
 }

package/rules/autoconsent/baden-wuerttemberg-de.json

@@ -1,6 +1,7 @@
 {
   "name": "baden-wuerttemberg.de",
   "prehideSelectors": [".cookie-alert.t-dark"],
+  "cosmetic": true,
   "detectCmp": [{ "exists": ".cookie-alert.t-dark" }],
   "detectPopup": [{ "visible": ".cookie-alert.t-dark" }],
   "optIn": [

package/rules/autoconsent/cc-banner.json

@@ -1,5 +1,6 @@
 {
   "name": "cc_banner",
+  "cosmetic": true,
   "prehideSelectors": [".cc_banner-wrapper"],
   "detectCmp": [{ "exists": ".cc_banner-wrapper" }],
   "detectPopup": [{ "visible": ".cc_banner" }],

package/rules/autoconsent/complianz-notice.json

@@ -1,6 +1,7 @@
 {
     "name": "Complianz notice",
     "prehideSelectors": [".cc-type-info[aria-describedby=\"cookieconsent:desc\"]"],
+    "cosmetic": true,
     "detectCmp": [{ "exists": ".cc-type-info[aria-describedby=\"cookieconsent:desc\"]" }],
     "detectPopup": [{ "visible": ".cc-type-info[aria-describedby=\"cookieconsent:desc\"]" }],
     "optIn": [

package/rules/autoconsent/cookie-notice.json

@@ -1,10 +1,11 @@
 {
   "name": "cookie-notice",
   "prehideSelectors": ["#cookie-notice"],
+  "cosmetic": true,
   "detectCmp": [
     { "visible": "#cookie-notice .cookie-notice-container" }
   ],
   "detectPopup": [{ "visible": "#cookie-notice" }],
-  "optIn": [{ "click": ["#cn-accept-cookie"] }],
+  "optIn": [{ "click": "#cn-accept-cookie" }],
   "optOut": [{ "hide": ["#cookie-notice"] }]
 }

package/rules/autoconsent/cookiealert.json

@@ -0,0 +1,48 @@
+{
+  "name": "cookiealert",
+  "intermediate": false,
+  "prehideSelectors": [],
+  "runContext": {
+    "frame": true,
+    "main": true
+  },
+  "detectCmp": [
+    {
+      "exists": ".cookie-alert-extended"
+    }
+  ],
+  "detectPopup": [
+    {
+      "visible": ".cookie-alert-extended-modal"
+    }
+  ],
+  "optIn": [
+    {
+      "click": "button[data-controller='cookie-alert/extended/button/accept']"
+    },
+    {
+      "eval": "document.querySelector('body').removeAttribute('style') || true"
+    }
+  ],
+  "optOut": [
+    {
+      "click": "a[data-controller='cookie-alert/extended/detail-link']"
+    },
+    {
+      "click": ".cookie-alert-configuration-input:checked",
+      "all": true,
+      "optional": true
+    },
+    {
+      "click": "button[data-controller='cookie-alert/extended/button/configuration']"
+    },
+    {
+      "eval": "document.querySelector('body').removeAttribute('style') || true"
+    }
+  ],
+  "test": [
+    {
+      "eval": "window.CookieConsent.declined === true"
+    }
+  ]
+}

package/rules/autoconsent/dsgvo.json

@@ -2,6 +2,7 @@
   "name": "WP DSGVO Tools",
   "link": "https://wordpress.org/plugins/shapepress-dsgvo/",
   "prehideSelectors": [".sp-dsgvo"],
+  "cosmetic": true,
   "detectCmp": [{ "exists": ".sp-dsgvo.sp-dsgvo-popup-overlay" }],
   "detectPopup": [{ "visible": ".sp-dsgvo.sp-dsgvo-popup-overlay", "check": "any" }],
   "optIn": [

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

@@ -1,7 +1,7 @@
 {
   "name": "eu-cookie-compliance-banner",
   "detectCmp": [{ "exists": ".eu-cookie-compliance-banner-info" }],
-  "detectPopup": [{ "visible": ".eu-cookie-compliance-banner-info" }],
+  "detectPopup": [{ "exists": ".eu-cookie-compliance-popup-open" }],
   "optIn": [{ "click": ".agree-button" }],
   "optOut": [
     { "click": ".decline-button,.eu-cookie-compliance-save-preferences-button", "optional": true },

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

@@ -1,6 +1,7 @@
 {
   "name": "EU Cookie Law",
   "prehideSelectors": [".pea_cook_wrapper,.pea_cook_more_info_popover"],
+  "cosmetic": true,
   "detectCmp": [{ "exists": ".pea_cook_wrapper" }],
   "detectPopup": [
     { "wait": 500 },

package/rules/autoconsent/ezoic.json

@@ -8,6 +8,7 @@
     { "eval": "ezCMP.handleAcceptAllClick()", "optional": true }
   ],
   "optOut": [
+    { "wait": 500 },
     { "click": "#ez-manage-settings" },
     { "waitFor": "#ez-cookie-dialog input[type=checkbox]" },
     { "click": "#ez-cookie-dialog input[type=checkbox][checked]", "all": true },

package/rules/autoconsent/generic-cosmetic.json

@@ -0,0 +1,9 @@
+{
+  "name": "generic-cosmetic",
+  "cosmetic": true,
+  "prehideSelectors": ["#js-cookie-banner,.js-cookie-banner,.cookie-banner,#cookie-banner"],
+  "detectCmp": [{ "exists": "#js-cookie-banner,.js-cookie-banner,.cookie-banner,#cookie-banner" }],
+  "detectPopup": [{ "visible": "#js-cookie-banner,.js-cookie-banner,.cookie-banner,#cookie-banner" }],
+  "optIn": [],
+  "optOut": [{ "hide": ["#js-cookie-banner,.js-cookie-banner,.cookie-banner,#cookie-banner"] }]
+}

package/rules/autoconsent/indeed-com.json

@@ -0,0 +1,9 @@
+{
+  "name": "indeed.com",
+  "cosmetic": true,
+  "prehideSelectors": ["#CookiePrivacyNotice"],
+  "detectCmp": [{ "exists": "#CookiePrivacyNotice" }],
+  "detectPopup": [{ "visible": "#CookiePrivacyNotice" }],
+  "optIn": [{ "click": "#CookiePrivacyNotice button[data-gnav-element-name=CookiePrivacyNoticeOk]" }],
+  "optOut": [{ "hide": ["#CookiePrivacyNotice"] }]
+}

package/rules/autoconsent/jquery-cookiebar.json

@@ -2,6 +2,7 @@
   "name": "jquery.cookieBar",
   "comment": "https://github.com/kovarp/jquery.cookieBar",
   "prehideSelectors": [".cookie-bar"],
+  "cosmetic": true,
   "detectCmp": [{ "exists": ".cookie-bar .cookie-bar__message,.cookie-bar .cookie-bar__buttons" }],
   "detectPopup": [{
     "visible": ".cookie-bar .cookie-bar__message,.cookie-bar .cookie-bar__buttons",

package/rules/autoconsent/marksandspencer.json

@@ -1,8 +1,8 @@
 {
   "name": "marksandspencer.com",
-  "isHidingRule": true,
+  "cosmetic": true,
   "detectCmp": [{ "exists": ".navigation-cookiebbanner" }],
   "detectPopup": [{ "visible": ".navigation-cookiebbanner" }],
   "optOut": [{ "hide": [".navigation-cookiebbanner"]}],
-  "optIn": [{ "click": [".navigation-cookiebbanner__submit"]}]
+  "optIn": [{ "click": ".navigation-cookiebbanner__submit"}]
 }

package/rules/autoconsent/notice-cookie.json

@@ -1,6 +1,7 @@
 {
   "name": "notice-cookie",
   "prehideSelectors": [".button--notice"],
+  "cosmetic": true,
   "detectCmp": [{ "exists": ".notice--cookie" }],
   "detectPopup": [{ "visible": ".notice--cookie" }],
   "optIn": [{ "click": ".button--notice" }],