feat: emit cosmetic rules on match

seia-soto · Jun 9, 2024 · ba99f8a · ba99f8a
1 parent 2c93101
commit ba99f8a
Show file tree

Hide file tree

Showing 11 changed files with 406 additions and 50 deletions.
diff --git a/packages/adblocker-electron-example/index.ts b/packages/adblocker-electron-example/index.ts
@@ -1,8 +1,15 @@
-import { app, BrowserWindow } from 'electron';
 import fetch from 'cross-fetch';
+import { app, BrowserWindow } from 'electron';
 import { readFileSync, writeFileSync } from 'fs';
 
-import { ElectronBlocker, fullLists, Request } from '@cliqz/adblocker-electron';
+import {
+  CosmeticFilter,
+  ElectronBlocker,
+  fullLists,
+  NetworkFilter,
+  Request,
+} from '@cliqz/adblocker-electron';
+import { MatchingContext } from '@cliqz/adblocker';
 
 function getUrlToLoad(): string {
   let url = 'https://google.com';
@@ -41,6 +48,10 @@ async function createWindow() {
 
   blocker.enableBlockingInSession(mainWindow.webContents.session);
 
+  blocker.on('request-allowed', (request: Request) => {
+    console.log('allow', request.tabId, request.url);
+  });
+
   blocker.on('request-blocked', (request: Request) => {
     console.log('blocked', request.tabId, request.url);
   });
@@ -53,8 +64,8 @@ async function createWindow() {
     console.log('whitelisted', request.tabId, request.url);
   });
 
-  blocker.on('csp-injected', (request: Request) => {
-    console.log('csp', request.url);
+  blocker.on('csp-injected', (csps: string, request: Request) => {
+    console.log('csp', csps, request.url);
   });
 
   blocker.on('script-injected', (script: string, url: string) => {
@@ -65,6 +76,13 @@ async function createWindow() {
     console.log('style', style.length, url);
   });
 
+  blocker.on(
+    'filter-matched',
+    (filter: CosmeticFilter | NetworkFilter, context: MatchingContext) => {
+      console.log('filter-matched', filter, context);
+    },
+  );
+
   mainWindow.loadURL(getUrlToLoad());
   mainWindow.webContents.openDevTools();
 

diff --git a/packages/adblocker-electron/adblocker.ts b/packages/adblocker-electron/adblocker.ts
@@ -186,6 +186,11 @@ export class ElectronBlocker extends FiltersEngine {
       getExtendedRules: true,
       getRulesFromHostname: true,
       getRulesFromDOM: false, // Only done on updates (see `onGetCosmeticFiltersUpdated`)
+
+      reference: {
+        frameId: event.frameId,
+        processId: event.processId,
+      },
     });
 
     if (active === false) {
@@ -233,6 +238,13 @@ export class ElectronBlocker extends FiltersEngine {
 
       // This will be done every time we get information about DOM mutation
       getRulesFromDOM: true,
+
+      reference: {
+        frameId: event.frameId,
+        processId: event.processId,
+
+        lifecycle: msg.lifecycle,
+      },
     });
 
     if (active === false) {

diff --git a/packages/adblocker-playwright-example/index.ts b/packages/adblocker-playwright-example/index.ts
@@ -17,6 +17,10 @@ import * as pw from 'playwright';
 
   await blocker.enableBlockingInPage(page);
 
+  blocker.on('request-allowed', (request: Request) => {
+    console.log('allow', request.url);
+  });
+
   blocker.on('request-blocked', (request: Request) => {
     console.log('blocked', request.url);
   });
@@ -29,19 +33,26 @@ import * as pw from 'playwright';
     console.log('whitelisted', request.url);
   });
 
-  blocker.on('csp-injected', (request: Request) => {
-    console.log('csp', request.url);
+  blocker.on('csp-injected', (csps: string, request: Request) => {
+    console.log('csp', request.url, csps);
   });
 
   blocker.on('script-injected', (script: string, url: string) => {
-    console.log('script', script.length, url);
+    console.log('script', url, script.length);
   });
 
   blocker.on('style-injected', (style: string, url: string) => {
-    console.log('style', style.length, url);
+    console.log('style', url, style.length);
   });
 
-  await page.goto('https://www.mangareader.to/');
+  blocker.on(
+    'filter-matched',
+    (filter: CosmeticFilter | NetworkFilter, context: MatchingContext) => {
+      console.log('filter-matched', filter, context);
+    },
+  );
+
+  await page.goto('https://www.mangareader.net/');
   await page.screenshot({ path: 'output.png' });
   await blocker.disableBlockingInPage(page);
   await browser.close();

diff --git a/packages/adblocker-puppeteer-example/index.ts b/packages/adblocker-puppeteer-example/index.ts
@@ -1,7 +1,6 @@
 import { fullLists, PuppeteerBlocker, Request } from '@cliqz/adblocker-puppeteer';
 import fetch from 'cross-fetch';
 import * as puppeteer from 'puppeteer';
-import { promises as fs } from 'fs';
 
 function getUrlToLoad(): string {
   let url = 'https://www.mangareader.to/';
@@ -35,6 +34,10 @@ function getUrlToLoad(): string {
   const page = await browser.newPage();
   await blocker.enableBlockingInPage(page);
 
+  blocker.on('request-allowed', (request: Request) => {
+    console.log('allow', request.url);
+  });
+
   blocker.on('request-blocked', (request: Request) => {
     console.log('blocked', request.url);
   });
@@ -47,17 +50,24 @@ function getUrlToLoad(): string {
     console.log('whitelisted', request.url);
   });
 
-  blocker.on('csp-injected', (request: Request) => {
-    console.log('csp', request.url);
+  blocker.on('csp-injected', (csps: string, request: Request) => {
+    console.log('csp', request.url, csps.length);
   });
 
   blocker.on('script-injected', (script: string, url: string) => {
-    console.log('script', script.length, url);
+    console.log('script', url, script.length);
   });
 
   blocker.on('style-injected', (style: string, url: string) => {
-    console.log('style', style.length, url);
+    console.log('style', url, style.length);
   });
 
+  blocker.on(
+    'filter-matched',
+    (filter: CosmeticFilter | NetworkFilter, context: MatchingContext) => {
+      console.log('filter-matched', filter, context);
+    },
+  );
+
   await page.goto(getUrlToLoad());
 })();
diff --git a/packages/adblocker-webextension-example/background.ts b/packages/adblocker-webextension-example/background.ts
@@ -10,11 +10,14 @@ import { browser } from 'webextension-polyfill-ts';
 
 import {
   BlockingResponse,
+  CosmeticFilter,
   fullLists,
   HTMLSelector,
+  NetworkFilter,
   Request,
   WebExtensionBlocker,
 } from '@cliqz/adblocker-webextension';
+import { MatchingContext } from '@cliqz/adblocker';
 
 /**
  * Keep track of number of network requests altered for each tab
@@ -62,6 +65,11 @@ WebExtensionBlocker.fromLists(fetch, fullLists, {
 }).then((blocker: WebExtensionBlocker) => {
   blocker.enableBlockingInBrowser(browser);
 
+  blocker.on('request-allowed', (request: Request, result: BlockingResponse) => {
+    incrementBlockedCounter(request, result);
+    console.log('allow', request.url);
+  });
+
   blocker.on('request-blocked', (request: Request, result: BlockingResponse) => {
     incrementBlockedCounter(request, result);
     console.log('block', request.url);
@@ -72,21 +80,33 @@ WebExtensionBlocker.fromLists(fetch, fullLists, {
     console.log('redirect', request.url, result);
   });
 
-  blocker.on('csp-injected', (request: Request) => {
-    console.log('csp', request.url);
+  blocker.on('request-whitelisted', (request: Request, result: BlockingResponse) => {
+    incrementBlockedCounter(request, result);
+    console.log('whitelist', request.url, result);
+  });
+
+  blocker.on('html-filtered', (htmlSelectors: HTMLSelector[], url: string) => {
+    console.log('html selectors', url, htmlSelectors);
+  });
+
+  blocker.on('csp-injected', (csps: string, request: Request) => {
+    console.log('csp', request.url, csps.length);
   });
 
   blocker.on('script-injected', (script: string, url: string) => {
-    console.log('script', script.length, url);
+    console.log('script', url, script.length);
   });
 
   blocker.on('style-injected', (style: string, url: string) => {
     console.log('style', url, style.length);
   });
 
-  blocker.on('html-filtered', (htmlSelectors: HTMLSelector[]) => {
-    console.log('html selectors', htmlSelectors);
-  });
+  blocker.on(
+    'filter-matched',
+    (filter: CosmeticFilter | NetworkFilter, context: MatchingContext) => {
+      console.log('filter-matched', filter, context);
+    },
+  );
 
   console.log('Ready to roll!');
 });
diff --git a/packages/adblocker-webextension/adblocker.ts b/packages/adblocker-webextension/adblocker.ts
@@ -347,6 +347,11 @@ export class WebExtensionBlocker extends FiltersEngine {
       getExtendedRules: false,
       getRulesFromDOM: false,
       getRulesFromHostname: true,
+
+      reference: {
+        tabId: details.tabId,
+        frameId: details.frameId,
+      },
     });
     if (active === false) {
       return;
@@ -460,6 +465,11 @@ export class WebExtensionBlocker extends FiltersEngine {
         getExtendedRules: false,
         getRulesFromDOM: false,
         getRulesFromHostname: false,
+
+        reference: {
+          tabId: sender.tab?.id,
+          frameId: sender.frameId,
+        },
       });
 
       if (active === false) {
@@ -497,6 +507,11 @@ export class WebExtensionBlocker extends FiltersEngine {
 
         // This will be done every time we get information about DOM mutation
         getRulesFromDOM: msg.lifecycle === 'dom-update',
+
+        reference: {
+          tabId: sender.tab?.id,
+          frameId: sender.frameId,
+        },
       });
 
       if (active === false) {

diff --git a/packages/adblocker/adblocker.ts b/packages/adblocker/adblocker.ts
@@ -6,7 +6,12 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-export { default as FiltersEngine, ENGINE_VERSION, BlockingResponse } from './src/engine/engine';
+export {
+  default as FiltersEngine,
+  ENGINE_VERSION,
+  BlockingResponse,
+  MatchingContext,
+} from './src/engine/engine';
 export { default as ReverseIndex } from './src/engine/reverse-index';
 export {
   default as Request,

diff --git a/packages/adblocker/src/engine/bucket/cosmetic.ts b/packages/adblocker/src/engine/bucket/cosmetic.ts
@@ -352,7 +352,11 @@ export default class CosmeticFilterBucket {
     hostname: string;
 
     isFilterExcluded?: (filter: CosmeticFilter) => boolean;
-  }): CosmeticFilter[] {
+  }): {
+    rules: CosmeticFilter[];
+    matches: CosmeticFilter[];
+    exceptions: Map<CosmeticFilter, CosmeticFilter>;
+  } {
     // Tokens from `hostname` and `domain` which will be used to lookup filters
     // from the reverse index. The same tokens are re-used for multiple indices.
     const hostnameTokens = createLookupTokens(hostname, domain);
@@ -364,21 +368,34 @@ export default class CosmeticFilterBucket {
       return true;
     });
 
+    const exceptions: Map<CosmeticFilter, CosmeticFilter> = new Map();
+
     // If we found at least one candidate, check if we have unhidden rules.
-    const disabledRules: Set<string> = new Set();
+    const disabledRules: Map<string, CosmeticFilter> = new Map();
     if (rules.length !== 0) {
       this.unhideIndex.iterMatchingFilters(hostnameTokens, (rule: CosmeticFilter) => {
         if (rule.match(hostname, domain) && !isFilterExcluded?.(rule)) {
-          disabledRules.add(rule.getSelector());
+          disabledRules.set(rule.getSelector(), rule);
         }
 
         return true;
       });
     }
 
-    return rules.filter(
-      (rule) => disabledRules.size === 0 || disabledRules.has(rule.getSelector()) === false,
-    );
+    const modifications: CosmeticFilter[] = [];
+    for (const rule of rules) {
+      if (disabledRules.size !== 0 && disabledRules.has(rule.getSelector())) {
+        exceptions.set(rule, disabledRules.get(rule.getSelector())!);
+      } else {
+        modifications.push(rule);
+      }
+    }
+
+    return {
+      rules: modifications,
+      matches: rules,
+      exceptions,
+    };
   }
 
   /**
@@ -425,6 +442,8 @@ export default class CosmeticFilterBucket {
     injections: CosmeticFilter[];
     extended: IMessageFromBackground['extended'];
     stylesheet: string;
+    matches: CosmeticFilter[];
+    exceptions: Map<CosmeticFilter, CosmeticFilter>;
   } {
     // Tokens from `hostname` and `domain` which will be used to lookup filters
     // from the reverse index. The same tokens are re-used for multiple indices.
@@ -505,6 +524,10 @@ export default class CosmeticFilterBucket {
       );
     }
 
+    // Additional data for engine events
+    const matches: CosmeticFilter[] = [...rules];
+    const exceptions: Map<CosmeticFilter, CosmeticFilter> = new Map();
+
     const extended: CosmeticFilter[] = [];
     const injections: CosmeticFilter[] = [];
     const styles: CosmeticFilter[] = [];
@@ -519,10 +542,12 @@ export default class CosmeticFilterBucket {
       // Collect unhidden selectors. They will be used to filter-out canceled
       // rules from other indices.
       let injectionsDisabled = false;
-      const disabledRules: Set<string> = new Set();
+      // Create a binding from here to provide a map of rules with exception rules
+      // with minimal performance impact
+      const disabledRules: Map<string, CosmeticFilter> = new Map();
       this.unhideIndex.iterMatchingFilters(hostnameTokens, (rule: CosmeticFilter) => {
         if (rule.match(hostname, domain) && !isFilterExcluded?.(rule)) {
-          disabledRules.add(rule.getSelector());
+          disabledRules.set(rule.getSelector(), rule);
 
           // Detect special +js() rules to disable scriptlet injections
           if (
@@ -541,6 +566,8 @@ export default class CosmeticFilterBucket {
       for (const rule of rules) {
         // Make sure `rule` is not un-hidden by a #@# filter
         if (disabledRules.size !== 0 && disabledRules.has(rule.getSelector())) {
+          exceptions.set(rule, disabledRules.get(rule.getSelector())!);
+
           continue;
         }
 
@@ -606,6 +633,8 @@ export default class CosmeticFilterBucket {
       extended: extendedProcessed,
       injections,
       stylesheet,
+      matches,
+      exceptions,
     };
   }