Ghostery 10: Selective blocking (#1512)

Author: smalluban

extension-manifest-v2/app/panel-android/index.jsx

@@ -17,9 +17,10 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import '@ghostery/ui/pages';
 
 import PanelAndroid from './components/PanelAndroid';
+import '../panel/elements/onboarding-state';
+
 import '../scss/panel_android.scss';
 
 ReactDOM.render(

extension-manifest-v2/app/panel/components/Summary.jsx

@@ -14,8 +14,8 @@
 import React from 'react';
 import { ReactSVG } from 'react-svg';
 import ClassNames from 'classnames';
-import '@ghostery/ui/pages';
 
+import '../elements/onboarding-state';
 import Tooltip from '../../shared-components/Tooltip';
 import DynamicUIPortContext from '../contexts/DynamicUIPortContext';
 import { sendMessage } from '../utils/msg';

packages/ui/src/modules/global/components/onboarding-state.js extension-manifest-v2/app/panel/elements/onboarding-state.js

@@ -9,12 +9,13 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0
  */
 
-import { html } from 'hybrids';
+import { define, html } from 'hybrids';
 
-export default {
-  disabled: false,
-  href: '',
-  render: ({ disabled, href }) => html`
+export default define({
+	tag: 'ui-onboarding-state',
+	disabled: false,
+	href: '',
+	render: ({ disabled, href }) => html`
     <template
       layout="column content:center relative"
       layout[disabled]="height::120px"
@@ -25,22 +26,21 @@ export default {
           id="disabled"
           layout="column center gap:2 margin absolute inset layer:1"
         >
-          <ui-text type="label-m" color="error-500" layout="block:center">
+          <span layout="block:center">
             <ui-icon name="warning" layout="block inline"></ui-icon><br />
             Additional Permissions Required
-          </ui-text>
-          <ui-text class="button" type="label-m" color="white">
+          </span>
+          <span class="button">
             Enable Ghostery
-          </ui-text>
+          </span>
           <a layout="absolute inset layer:3" href="${href}" target="_blank"></a>
         </section>
       `}
       <div id="content"><slot></slot></div>
     </template>
   `.css`
-
     :host([disabled]) {
-      border: 1px dashed var(--ui-color-error-500);
+      border: 1px dashed #ff4500;
       border-radius: 4px;
     }
 
@@ -57,7 +57,13 @@ export default {
       background: rgba(255, 243, 238, 0.8);
     }
 
-    ui-text.button {
+		span {
+			font:  500 14px / 18px Roboto, sans-serif;
+			color: #ff4500;
+		}
+
+    span.button {
+			color: white;
       background: #00AEF0;
       border-radius: 2px;
       padding: 8px 12px;
@@ -67,4 +73,4 @@ export default {
       z-index: 0;
     }
   `,
-};
+});

extension-manifest-v2/app/scss/panel.scss

@@ -23,9 +23,6 @@
 // Import shared helpers
 @import 'shared_helper_classes';
 
-// ghostery-ui
-// @import "@ghostery/ui/src/styles/pages.css";
-
 html body {
 	margin: 0px;
 	font-size: 75%;

extension-manifest-v2/package.json

@@ -51,7 +51,7 @@
     "foundation-sites": "^6.6.2",
     "ghostery-common": "^1.3.12",
     "history": "^4.10.1",
-    "hybrids": "^8.2.14",
+    "hybrids": "^8.2.22",
     "linkedom": "^0.16.11",
     "moment": "^2.29.1",
     "prop-types": "^15.6.2",

extension-manifest-v3/package.json

@@ -6,13 +6,11 @@
   "scripts": {
     "download-engines": "node scripts/download-engines/index.js",
     "download-whotracksme-bloomfilter": "node scripts/download-whotracksme-bloomfilter.js",
-    "download": "npm run download-engines && npm run download-whotracksme-bloomfilter",
-    "download.staging": "npm run download-engines -- --staging && npm run download-whotracksme-bloomfilter",
     "build": "node scripts/build.js",
     "start": "npm run build -- --watch",
     "licenses": "license-report --config=../.license-report-config.json > dist/licenses.html",
     "lint": "eslint src/",
-    "test": "npm run lint",
+    "test": "node --test && npm run lint",
     "locales.ui": "hybrids extract -c --format=chrome.i18n ../node_modules/@ghostery/ui ./src/_locales/en/messages.json",
     "locales.src": "hybrids extract -c --format=chrome.i18n ./src ./src/_locales/en/messages.json",
     "locales": "npm run locales.ui && npm run locales.src",
@@ -28,8 +26,10 @@
   "license": "MPL-2.0",
   "devDependencies": {
     "shelljs": "^0.8.5",
+    "sinon-chrome": "^3.0.1",
     "vite": "^4.5.2",
-    "web-ext": "^7.11.0"
+    "web-ext": "^7.11.0",
+    "webextension-polyfill": "^0.11.0"
   },
   "dependencies": {
     "@cliqz/adblocker": "^1.27.1",
@@ -40,7 +40,7 @@
     "@ghostery/ui": "^1.0.0",
     "@github/relative-time-element": "^4.3.0",
     "@whotracksme/webextension-packages": "^5.0.11",
-    "hybrids": "^8.2.14",
+    "hybrids": "^8.2.22",
     "idb": "^7.1.1",
     "jwt-decode": "^4.0.0",
     "tldts-experimental": "^6.0.19"

extension-manifest-v3/scripts/build.js

@@ -1,5 +1,5 @@
-import { resolve, dirname } from 'path';
-import { readFileSync, writeFileSync } from 'fs';
+import { resolve, dirname, join } from 'path';
+import { readFileSync, writeFileSync, readdirSync } from 'fs';
 import { exec, execSync } from 'child_process';
 import { build } from 'vite';
 import shelljs from 'shelljs';
@@ -67,14 +67,16 @@ if (argv.target === 'safari') {
   options.assets.push('background/safari');
 }
 
+// Download adblocker engines
 if (argv.staging) {
-  execSync('npm run download.staging', { stdio: 'inherit' });
-
+  execSync('npm run download-engines -- --staging', { stdio: 'inherit' });
   manifest.debug = true;
 } else {
-  execSync('npm run download', { stdio: 'inherit' });
+  execSync('npm run download-engines', { stdio: 'inherit' });
 }
 
+execSync('npm run download-whotracksme-bloomfilter', { stdio: 'inherit' });
+
 const config = {
   logLevel: argv.silent ? 'silent' : undefined,
   configFile: false,
@@ -114,7 +116,7 @@ options.assets.forEach((path) => {
 // copy adblocker engines
 shelljs.mkdir('-p', resolve(options.outDir, 'rule_resources'));
 
-const engines = ['ads', 'tracking', 'annoyances'];
+const engines = ['ads', 'tracking', 'annoyances', 'fixes'];
 const engineType = argv.target === 'firefox' ? '' : '-cosmetics';
 
 engines.forEach((engine) => {
@@ -173,6 +175,10 @@ execSync('npm run licenses', { stdio: 'inherit' });
 // set manifest version from package.json
 manifest.version = pkg.version;
 
+if (manifest.permissions.includes('declarativeNetRequest') && argv.watch) {
+  manifest.permissions.push('declarativeNetRequestFeedback');
+}
+
 writeFileSync(
   resolve(options.outDir, 'manifest.json'),
   JSON.stringify(manifest, null, 2),
@@ -191,6 +197,20 @@ if (manifest.browser_action?.default_popup) {
   source.push(manifest.browser_action.default_popup);
 }
 
+// offscreen documents
+if (
+  manifest.permissions.includes('offscreen') ||
+  manifest.optional_permissions?.includes('offscreen')
+) {
+  readdirSync(join(options.srcDir, 'pages', 'offscreen'), {
+    withFileTypes: true,
+  })
+    .filter((dirent) => dirent.isDirectory() && !dirent.name.startsWith('.'))
+    .forEach((dirent) =>
+      source.push(join('pages', 'offscreen', dirent.name, 'index.html')),
+    );
+}
+
 // options page
 if (manifest.options_ui?.page) {
   source.push(manifest.options_ui?.page);

extension-manifest-v3/scripts/download-engines/index.js

@@ -27,6 +27,8 @@ const ENGINES = {
   'dnr-cosmetics-ads': 'ads-cosmetics',
   'dnr-cosmetics-tracking': 'tracking-cosmetics',
   'dnr-cosmetics-annoyances': 'annoyances-cosmetics',
+  'dnr-fixes': 'fixes',
+  'dnr-cosmetics-fixes': 'fixes-cosmetics',
   'trackerdbMv3': 'trackerdb',
 };
 
@@ -86,17 +88,14 @@ for (const [name, target] of Object.entries(ENGINES)) {
   writeFileSync(outputPath, new Uint8Array(rules));
 }
 
-const DNR = staging
-  ? {
-      'dnr-ads': 'ads',
-      'dnr-tracking': 'tracking',
-      'dnr-annoyances': 'annoyances',
-    }
-  : {
-      'dnr-ads-2': 'ads',
-      'dnr-tracking-2': 'tracking',
-      'dnr-annoyances-2': 'annoyances',
-    };
+const DNR = {
+  'dnr-ads': 'ads',
+  'dnr-tracking': 'tracking',
+  'dnr-annoyances': 'annoyances',
+  'dnr-fixes': 'fixes',
+  'dnr-ios': 'safari',
+  'dnr-trackerdb': 'trackerdb',
+};
 
 for (const [name, target] of Object.entries(DNR)) {
   console.log(`Downloading "${name}"...`);
@@ -119,7 +118,6 @@ for (const [name, target] of Object.entries(DNR)) {
     const outputPath = `${TARGET_PATH}/dnr-${target}.json`;
 
     if (
-      staging &&
       existsSync(outputPath) &&
       checksum(readFileSync(outputPath)) === list.dnr.checksum
     ) {
@@ -140,39 +138,3 @@ for (const [name, target] of Object.entries(DNR)) {
     writeFileSync(outputPath, dnr);
   }
 }
-
-/* DNR for Safari */
-
-console.log(`Downloading "dnr-ios"...`);
-const outputPath = `${TARGET_PATH}/dnr-safari.json`;
-
-const list = await fetch(
-  `https://staging-cdn.ghostery.com/adblocker/configs/dnr-ios/allowed-lists.json`,
-).then((res) => {
-  if (!res.ok) {
-    throw new Error(
-      `Failed to download allowed list for dnr-ios": ${res.status}: ${res.statusText}`,
-    );
-  }
-
-  return res.json();
-});
-
-if (
-  !existsSync(outputPath) ||
-  checksum(readFileSync(outputPath)) !== list.dnr.checksum
-) {
-  const dnr = await fetch(list.dnr.url || list.dnr.network).then((res) => {
-    if (!res.ok) {
-      throw new Error(
-        `Failed to fetch DNR rules for "${name}": ${res.status}: ${res.statusText}`,
-      );
-    }
-
-    return res.text();
-  });
-
-  writeFileSync(outputPath, dnr);
-} else {
-  console.log('Checksum match - skipping download');
-}