fix: youtube & iframe util from packages/ui to main source (#1884)

extension-manifest-v3/package.json

@@ -10,6 +10,7 @@
     "build": "node scripts/build.js",
     "start": "npm run build -- --watch",
     "start:update": "./scripts/update.sh",
+    "debug": "npm run build -- --watch --debug",
     "licenses": "license-report --config=../.license-report-config.json > dist/licenses.html",
     "lint": "eslint src/",
     "test": "node --test && npm run lint",

extension-manifest-v3/scripts/build.js

@@ -57,13 +57,14 @@ if (argv.target.startsWith('safari')) {
   argv.target = 'safari';
 }
 
+// Add flags to manifest
+if (argv.debug) manifest.debug = true;
+if (argv.staging) manifest.staging = true;
+
 // Download adblocker engines
-if (argv.staging) {
-  execSync('npm run download-engines -- --staging', { stdio: 'inherit' });
-  manifest.debug = true;
-} else {
-  execSync('npm run download-engines', { stdio: 'inherit' });
-}
+execSync('npm run download-engines' + (argv.staging ? ' -- --staging' : ''), {
+  stdio: 'inherit',
+});
 
 execSync('npm run download-wtm-bloomfilter', { stdio: 'inherit' });
 execSync('npm run download-wtm-stats', { stdio: 'inherit' });

extension-manifest-v3/src/background/adblocker.js

@@ -22,6 +22,7 @@ import * as engines from '/utils/engines.js';
 import * as trackerdb from '/utils/trackerdb.js';
 import Request from '/utils/request.js';
 import asyncSetup from '/utils/setup.js';
+import { debugMode } from '/utils/debug.js';
 
 import { tabStats, updateTabStats } from './stats.js';
 import { getException } from './exceptions.js';
@@ -309,12 +310,11 @@ chrome.runtime.onMessage.addListener((msg, sender) => {
   return false;
 });
 
-const DEBUG_SCRIPLETS = false;
 async function executeScriptlets(tabId, frameId, scripts) {
   // Dynamically injected scripts can be difficult to find later in
   // the debugger. Console logs simplifies setting up breakpoints if needed.
   let debugMarker;
-  if (DEBUG_SCRIPLETS) {
+  if (debugMode) {
     debugMarker = (text) =>
       `console.log('[ADBLOCKER-DEBUG]:', ${JSON.stringify(text)});`;
   } else {

extension-manifest-v3/src/background/index.js

@@ -19,6 +19,7 @@ import './exceptions.js';
 import './paused.js';
 import './session.js';
 import './stats.js';
+import './notifications.js';
 import './serp.js';
 
 import './helpers.js';

extension-manifest-v3/src/background/notifications.js

@@ -0,0 +1,50 @@
+/**
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2017-present Ghostery GmbH. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import * as notifications from '/utils/notifications.js';
+
+export function openNotification(tabId, id, params) {
+  const url = chrome.runtime.getURL(
+    `/pages/notifications/${id}.html` +
+      (params
+        ? `?${Object.entries(params)
+            .map(([key, value]) => `${key}=${encodeURIComponent(value)}`)
+            .join('&')}`
+        : ''),
+  );
+
+  chrome.tabs.sendMessage(tabId, {
+    action: notifications.MOUNT_ACTION,
+    url,
+  });
+}
+
+export function closeNotification(tabId) {
+  chrome.tabs.sendMessage(tabId, {
+    action: notifications.UNMOUNT_ACTION,
+  });
+}
+
+chrome.runtime.onMessage.addListener((msg, sender) => {
+  const tabId = sender.tab?.id;
+  if (!tabId) return;
+
+  switch (msg.action) {
+    case notifications.OPEN_ACTION: {
+      openNotification(tabId, msg.id, msg.params);
+      break;
+    }
+    case notifications.CLOSE_ACTION: {
+      closeNotification(tabId);
+      break;
+    }
+  }
+});

extension-manifest-v3/src/background/onboarding.js

@@ -8,27 +8,12 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0
  */
-
 import { observe } from '/store/options.js';
-import { showOperaSerpNotification } from '/notifications/opera-serp.js';
-import { isOpera } from '/utils/browser-info.js';
-
-let done = false;
 
-observe('onboarding', (onboarding) => {
-  done = onboarding.done;
-
-  if (!done && !onboarding.shownAt) {
+observe('onboarding', ({ done, shownAt }) => {
+  if (!done && !shownAt) {
     chrome.tabs.create({
       url: chrome.runtime.getURL('/pages/onboarding/index.html'),
     });
   }
 });
-
-if (__PLATFORM__ === 'chromium' && isOpera()) {
-  chrome.webNavigation.onCompleted.addListener((details) => {
-    if (done && details.frameId === 0) {
-      showOperaSerpNotification(details.tabId);
-    }
-  });
-}

extension-manifest-v3/src/background/serp.js

@@ -12,10 +12,43 @@
 import { store } from 'hybrids';
 import { parse } from 'tldts-experimental';
 
-import Options, { isPaused } from '/store/options.js';
 import trackersPreviewCSS from '/content_scripts/trackers-preview.css?raw';
-import { getWTMStats } from '/utils/wtm-stats';
 
+import Options, { isPaused } from '/store/options.js';
+
+import { isSerpSupported } from '/utils/opera.js';
+import { getWTMStats } from '/utils/wtm-stats.js';
+import { isOpera } from '/utils/browser-info.js';
+
+import { openNotification } from './notifications.js';
+
+// Opera SERP notification
+if (__PLATFORM__ === 'chromium' && isOpera()) {
+  const NOTIFICATION_DELAY = 7 * 24 * 60 * 60 * 1000; // 7 days in milliseconds
+  const NOTIFICATION_SHOW_LIMIT = 4;
+
+  chrome.webNavigation.onCompleted.addListener(async (details) => {
+    if (details.frameId !== 0 || (await isSerpSupported())) return;
+
+    const { onboarding } = await store.resolve(Options);
+
+    if (
+      // Onboarding is not "done"
+      !onboarding.done ||
+      // The notification was already shown maximum times
+      onboarding.serpShown >= NOTIFICATION_SHOW_LIMIT ||
+      // The notification was already shown recently
+      (onboarding.serpShownAt &&
+        Date.now() - onboarding.serpShownAt < NOTIFICATION_DELAY)
+    ) {
+      return false;
+    }
+
+    openNotification(details.tabId, 'opera-serp');
+  });
+}
+
+// Trackers preview messages
 chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
   if (msg.action === 'getWTMReport') {
     sendResponse({
@@ -40,6 +73,7 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
 const SERP_URL_REGEXP =
   /^https:[/][/][^/]*[.]google[.][a-z]+([.][a-z]+)?[/]search/;
 
+// SERP tracking prevention and trackers preview content scripts
 chrome.webNavigation.onCommitted.addListener((details) => {
   if (details.url.match(SERP_URL_REGEXP)) {
     store.resolve(Options).then((options) => {

extension-manifest-v3/src/background/stats.js

@@ -17,7 +17,7 @@ import { order } from '@ghostery/ui/categories';
 import DailyStats from '/store/daily-stats.js';
 import Options, { isPaused, observe } from '/store/options.js';
 
-import { shouldSetDangerBadgeForTabId } from '/notifications/opera-serp.js';
+import { isSerpSupported } from '/utils/opera.js';
 
 import AutoSyncingMap from '/utils/map.js';
 import { getMetadata, getUnidentifiedTracker } from '/utils/trackerdb.js';
@@ -50,12 +50,27 @@ observe('terms', async (terms) => {
   }
 });
 
+async function hasAccessToPage(tabId) {
+  try {
+    await chrome.scripting.insertCSS({ target: { tabId }, css: '' });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
 async function refreshIcon(tabId) {
   const options = await store.resolve(Options);
 
   if (__PLATFORM__ === 'chromium' && isOpera() && options.terms) {
-    shouldSetDangerBadgeForTabId(tabId).then((danger) => {
-      setBadgeColor(danger ? '#f13436' /* danger-500 */ : undefined);
+    isSerpSupported().then(async (supported) => {
+      if (!supported) {
+        setBadgeColor(
+          (await hasAccessToPage(tabId))
+            ? undefined
+            : '#f13436' /* danger-500 */,
+        );
+      }
     });
   }
 
@@ -78,7 +93,7 @@ async function refreshIcon(tabId) {
   // Note: Even in MV3, this is not (yet) returning a promise.
   chromeAction.setIcon({ tabId, ...data }, () => {
     if (chrome.runtime.lastError) {
-      console.debug(
+      console.error(
         'setIcon failed for tabId',
         tabId,
         '(most likely the tab was closed)',
@@ -94,7 +109,7 @@ async function refreshIcon(tabId) {
         text: options.trackerCount ? String(stats.trackers.length) : '',
       });
     } catch (e) {
-      console.debug('Error while trying update the badge', e);
+      console.error('Error while trying update the badge', e);
     }
   }
 }

extension-manifest-v3/src/background/telemetry/index.js

@@ -12,6 +12,7 @@
 import { store } from 'hybrids';
 
 import Options, { observe } from '/store/options.js';
+import { debugMode } from '/utils/debug.js';
 
 import Telemetry from './metrics.js';
 
@@ -91,10 +92,10 @@ chrome.runtime.onMessage.addListener((msg) => {
 
 (async () => {
   const storage = await loadStorage();
-  const { version, debug } = chrome.runtime.getManifest();
+  const { version } = chrome.runtime.getManifest();
 
   telemetry = new Telemetry({
-    METRICS_BASE_URL: debug
+    METRICS_BASE_URL: debugMode
       ? 'https://staging-d.ghostery.com'
       : 'https://d.ghostery.com',
     EXTENSION_VERSION: version,