Add hard-coded circumvention logic (+ IL defuser)

* Simplify 'example' extension
* Add circumvention module and entry-point in cosmetics injection
* Clean-up cjs and esm bundles
* Remove obsolete logic to override user-agent in content-script
* Simplify travis config (using new pre* hooks)
* Consolidate 'fetch' module (with metadata about lists)

.travis.yml

@@ -21,12 +21,6 @@ install:
 script:
   - npm test
 
-before_deploy:
-  - npm run clean
-  - npm run build
-  - npm run bundle
-  - npm run minify
-
 deploy:
   provider: npm
   email: remi@cliqz.com

example/Makefile

@@ -1,22 +1,13 @@
 
-.PHONY: content-script.bunble.js background.bundle.js build/example watch clean
+.PHONY: all watch
 
-ROLLUP="../node_modules/.bin/rollup"
-
-all: content-script.bundle.js background.bundle.js
-
-build/example:
-	tsc -p tsconfig.json --module ES6 --outDir build
-
-content-script.bundle.js: build/example
-	${ROLLUP} -c rollup.content.js
-
-background.bundle.js: build/example
-	${ROLLUP} -c rollup.background.js
+all:
+	npx tsc -p .
+	npx rollup -c rollup.config.js
 
 watch:
-	concurrently 'tsc -p tsconfig.json --module ES6 --outDir build --watch' 'rollup -c rollup.content.js --watch' 'rollup -c rollup.background.js --watch'
+	npx concurrently 'tsc -p . --watch' 'rollup -c rollup.config.js --watch'
 
 clean:
-	rm -frv *.bundle.js
+	rm -frv *.iife.js
 	rm -frv build/

example/README.md

@@ -1,10 +1,12 @@
 # Minimal Content Blocker
 
-This is a minimal webextension doing adblocking/antitracking using most popular
-block-lists. It is meant as a very thin wrapper around the [adblocker](https://github.com/cliqz-oss/adblocker)
-library.
+This is a minimal webextension doing adblocking/antitracking using most
+popular block-lists. It is meant as a very thin wrapper around the
+[adblocker](https://github.com/cliqz-oss/adblocker) library. You can use it to
+debut the adblocker, or test new features.
 
-## Building
+## Workflow
 
-1. Build the extension: `make all`
-2. Load it in Firefox or Chromium by using the "Load unpacked extension" feature
+1. `make watch` will build and monitor for changes
+2. Open your browser and load "unpacked extension" from the `example` folder
+3. On re-build, reload the extension in browser

example/background.ts

@@ -28,7 +28,7 @@ function loadAdblocker() {
       }
 
       engine.onUpdateResource([{ filters: resources, checksum: '' }]);
-      engine.onUpdateFilters(lists, new Set());
+      engine.onUpdateFilters(lists, new Set(), true);
 
       return engine;
     },
@@ -68,12 +68,14 @@ chrome.tabs.onCreated.addListener((tab) => {
 });
 
 chrome.tabs.onUpdated.addListener((_0, _1, tab) => {
-  if (tabs.has(tab.id)) {
-    const { source } = tabs.get(tab.id);
-    if (source !== tab.url) {
-      resetState(tab.id, tab.url);
-      updateBadgeCount(tab.id);
-    }
+  if (!tabs.has(tab.id)) {
+    resetState(tab.id, tab.url);
+    updateBadgeCount(tab.id);
+  }
+  const { source } = tabs.get(tab.id);
+  if (source !== tab.url) {
+    resetState(tab.id, tab.url);
+    updateBadgeCount(tab.id);
   }
 });
 

example/content-script.ts

@@ -17,15 +17,18 @@ import { CosmeticsInjection } from '../index-cosmetics';
  */
 const backgroundAction = (action, ...args): Promise<void> => {
   return new Promise((resolve) => {
-    chrome.runtime.sendMessage({
-      action,
-      args,
-    }, (response) => {
-      if (response !== undefined) {
-        injection.handleResponseFromBackground(response);
-      }
-      resolve();
-    });
+    chrome.runtime.sendMessage(
+      {
+        action,
+        args,
+      },
+      (response) => {
+        if (response !== undefined) {
+          injection.handleResponseFromBackground(response);
+        }
+        resolve();
+      },
+    );
   });
 };
 
@@ -39,10 +42,9 @@ const backgroundAction = (action, ...args): Promise<void> => {
  * - Observe mutations in the page (using MutationObserver) and inject relevant
  * filters for new nodes of the DOM.
  */
-const injection = new CosmeticsInjection(
-  window,
-  backgroundAction,
-);
+const injection = new CosmeticsInjection(window, backgroundAction);
+
+injection.injectCircumvention();
 
 /**
  * Make sure we clean-up all resources and event listeners when this content

example/manifest.json

@@ -16,7 +16,7 @@
   ],
   "background": {
     "scripts": [
-      "background.bundle.js"
+      "background.iife.js"
     ]
   },
   "browser_action": {
@@ -27,7 +27,7 @@
       "match_about_blank": true,
       "all_frames": true,
       "js": [
-        "content-script.bundle.js"
+        "content-script.iife.js"
       ],
       "matches": [
         "http://*/*",

example/rollup.config.js

@@ -0,0 +1,27 @@
+import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+
+
+const plugins = [
+  resolve(),
+  commonjs(),
+];
+
+export default [
+  {
+    input: './build/example/background.js',
+    output: {
+      file: 'background.iife.js',
+      format: 'iife',
+    },
+    plugins,
+  },
+  {
+    input: './build/example/content-script.js',
+    output: {
+      file: 'content-script.iife.js',
+      format: 'iife',
+    },
+    plugins,
+  },
+];

example/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
+    "outDir": "build",
     "noImplicitAny": false
   },
   "files": [

index-cosmetics.ts

@@ -1,2 +1 @@
 export { default as CosmeticsInjection } from './src/cosmetics-injection';
-export { overrideUserAgent } from './src/cosmetics-injection';

index.ts

@@ -1,15 +1,14 @@
 // Cosmetic injection
 export { default as CosmeticsInjection } from './src/cosmetics-injection';
-export { overrideUserAgent } from './src/cosmetics-injection';
 
 // Blocking
 export { default as FiltersEngine } from './src/engine/engine';
 export { default as ReverseIndex } from './src/engine/reverse-index';
 export { default as Request } from './src/request';
 export { deserializeEngine } from './src/serialization';
 
-export {default as matchCosmeticFilter } from './src/matching/cosmetics';
-export {default as matchNetworkFilter } from './src/matching/network';
+export { default as matchCosmeticFilter } from './src/matching/cosmetics';
+export { default as matchNetworkFilter } from './src/matching/network';
 
 export { parseCosmeticFilter } from './src/parsing/cosmetic-filter';
 export { parseNetworkFilter } from './src/parsing/network-filter';

package.json

@@ -8,9 +8,9 @@
   },
   "author": "Cliqz",
   "license": "MPL-2.0",
-  "main": "dist/cjs/index.js",
-  "module": "dist/es6/index.js",
-  "jsnext:main": "dist/es6/index.js",
+  "browser": "dist/adblocker.umd.js",
+  "main": "dist/adblocker.cjs.js",
+  "module": "dist/adblocker.esm.js",
   "types": "dist/types/index.d.ts",
   "files": [
     "dist",
@@ -20,11 +20,13 @@
   "scripts": {
     "clean": "rm -rfv dist",
     "lint": "tslint -c tslint.json 'src/**/*.ts'",
-    "build-es6": "tsc -p tsconfig.json --module ES6 --outDir dist/es6",
-    "build-cjs": "tsc -p tsconfig.json --module commonjs --outDir dist/cjs",
-    "build": "npm run build-es6 && npm run build-cjs",
+    "build": "tsc -p tsconfig.json",
     "bundle": "rollup -c rollup.config.js",
-    "minify": "google-closure-compiler --js=./dist/adblocker.umd.js --js_output_file=./dist/adblocker.umd.min.js",
+    "minify": "google-closure-compiler --js=./dist/adblocker.umd.js --js_output_file=./dist/adblocker.umd.min.js && google-closure-compiler --js=./dist/adblocker-cosmetics.umd.js --js_output_file=./dist/adblocker-cosmetics.umd.min.js",
+    "prebuild": "npm run clean",
+    "prebundle": "npm run build",
+    "preminify": "npm run bundle",
+    "prepack": "npm run minify",
     "pretest": "npm run lint",
     "test": "jest --coverage --no-cache ./test/",
     "dev": "jest --watch ./test/"
@@ -47,6 +49,7 @@
     "jest": "^23.6.0",
     "jsdom": "^11.12.0",
     "rollup": "^0.67.0",
+    "rollup-plugin-commonjs": "^9.2.0",
     "rollup-plugin-node-resolve": "^3.4.0",
     "ts-jest": "^23.10.4",
     "tslint": "^5.11.0",

rollup.config.js

@@ -1,32 +1,40 @@
 import resolve from 'rollup-plugin-node-resolve';
+import commonjs from 'rollup-plugin-commonjs';
+import pkg from './package.json';
 
 const plugins = [
-  resolve({
-    module: true,
-    jsnext: true,
-    main: false,
-    preferBuiltins: false,
-    modulesOnly: true,
-  }),
+  resolve(),
+  commonjs(),
 ];
 
 export default [
+  // Custom bundle for content-script, contains only a small subset
   {
-    input: './dist/es6/index-cosmetics.js',
+    input: './build/index-cosmetics.js',
     output: {
       file: './dist/adblocker-cosmetics.umd.js',
       name: 'adblocker',
       format: 'umd',
     },
     plugins,
   },
+  // Browser-friendly bundle
   {
-    input: './dist/es6/index.js',
+    input: './build/index.js',
     output: {
-      file: './dist/adblocker.umd.js',
+      file: pkg.browser,
       name: 'adblocker',
       format: 'umd',
     },
     plugins,
   },
+  // Commonjs and ES module bundles (without third-party deps)
+  {
+    input: './build/index.js',
+    external: ['tldts', 'tslib'],
+    output: [
+      { file: pkg.module, format: 'es' },
+      { file: pkg.main, format: 'cjs' },
+    ],
+  },
 ];