fix: youtube & iframe util from packages/ui to main source

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 = msg.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

@@ -9,10 +9,15 @@
  * 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 { store } from 'hybrids';
+
+import Options, { observe } from '/store/options.js';
+
+import { isSerpSupported } from '/utils/opera.js';
 import { isOpera } from '/utils/browser-info.js';
 
+import { openNotification } from './notifications.js';
+
 let done = false;
 
 observe('onboarding', (onboarding) => {
@@ -26,9 +31,28 @@ observe('onboarding', (onboarding) => {
 });
 
 if (__PLATFORM__ === 'chromium' && isOpera()) {
-  chrome.webNavigation.onCompleted.addListener((details) => {
+  const NOTIFICATION_DELAY = 7 * 24 * 60 * 60 * 1000; // 7 days in milliseconds
+  const NOTIFICATION_SHOW_LIMIT = 4;
+
+  chrome.webNavigation.onCompleted.addListener(async (details) => {
     if (done && details.frameId === 0) {
-      showOperaSerpNotification(details.tabId);
+      if (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');
     }
   });
 }

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,21 @@ observe('terms', async (terms) => {
   }
 });
 
+function isAccessBlocked(tabId) {
+  return chrome.scripting.insertCSS({ target: { tabId }, css: '' }).then(
+    () => false,
+    () => true,
+  );
+}
+
 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 && (await isAccessBlocked(tabId))) {
+        setBadgeColor('#f13436' /* danger-500 */);
+      }
     });
   }
 

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

@@ -0,0 +1,115 @@
+/**
+ * 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';
+
+const WRAPPER_ELEMENT = 'ghostery-notification-wrapper';
+
+function mount(url) {
+  // Prevent multiple iframes be shown at the same time
+  if (document.querySelector(WRAPPER_ELEMENT)) {
+    return;
+  }
+
+  const wrapper = document.createElement(WRAPPER_ELEMENT);
+  const shadowRoot = wrapper.attachShadow({ mode: 'closed' });
+  const template = document.createElement('template');
+
+  template.innerHTML = /*html*/ `
+    <iframe src="${url}" frameborder="0"></iframe>
+    <style>
+      :host {
+        all: initial;
+        display: flex !important;
+        align-items: flex-end;
+        position: fixed;
+        top: 10px;
+        right: 10px;
+        left: 10px;
+        bottom: 10px;
+        z-index: 2147483647;
+        pointer-events: none;
+      }
+
+      iframe {
+        display: block;
+        flex-grow: 1;
+        max-width: 100%;
+        max-height: 100%;
+        pointer-events: auto;
+        box-shadow: 30px 60px 160px rgba(0, 0, 0, 0.4);
+        border-radius: 16px;
+        background: linear-gradient(90deg, rgba(0, 0, 0, 0.13) 0%, rgba(0, 0, 0, 0.27) 100%);
+        opacity: 0;
+        transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+        transform: translateY(20px);
+      }
+
+      iframe.active {
+        opacity: 1;
+        transform: translateY(0);
+      }
+
+      @media screen and (min-width: 640px) {
+        :host {
+          justify-content: flex-end;
+          align-items: start;
+        }
+
+        iframe {
+          flex-grow: 0;
+          transform: translateY(-20px);
+        }
+      }
+    </style>
+  `;
+
+  shadowRoot.appendChild(template.content);
+  document.documentElement.appendChild(wrapper);
+
+  const iframe = shadowRoot.querySelector('iframe');
+
+  setTimeout(() => {
+    iframe.classList.add('active');
+  }, 100);
+
+  window.addEventListener('message', (e) => {
+    const type = e.data?.type;
+
+    if (type === notifications.RESIZE_WINDOW_EVENT) {
+      iframe.style.height = e.data.height + 'px';
+      iframe.style.width = e.data.width + 'px';
+      return;
+    }
+
+    if (type === notifications.CLOSE_WINDOW_EVENT) {
+      if (e.data.clear) {
+        // Send clearIframe message to other pages
+        chrome.runtime.sendMessage({ action: notifications.CLEAR_ACTION, url });
+      }
+
+      setTimeout(() => wrapper.remove(), 0);
+    }
+  });
+}
+
+chrome.runtime.onMessage.addListener((msg) => {
+  switch (msg.action) {
+    case notifications.MOUNT_ACTION: {
+      mount(msg.url);
+      break;
+    }
+    case notifications.UNMOUNT_ACTION: {
+      document.querySelector(WRAPPER_ELEMENT)?.remove();
+      break;
+    }
+  }
+});

extension-manifest-v3/src/content_scripts/youtube.js

@@ -9,8 +9,48 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0
  */
 
-import { showIframe, closeIframe } from '@ghostery/ui/iframe';
-import detectWall from '@ghostery/ui/youtube/wall';
+import * as notifications from '/utils/notifications.js';
+
+const SELECTORS = [
+  // Based on https://github.com/AdguardTeam/AdguardFilters/blob/e5ae8e3194f8d18bdcc660d4c42282e4a96ca5b9/AnnoyancesFilter/Popups/sections/antiadblock.txt#L2044
+  'ytd-watch-flexy:not([hidden]) ytd-enforcement-message-view-model > div.ytd-enforcement-message-view-model',
+
+  'yt-playability-error-supported-renderers#error-screen ytd-enforcement-message-view-model',
+  'tp-yt-paper-dialog .ytd-enforcement-message-view-model',
+];
+
+function detectWall(cb) {
+  let timeout = null;
+
+  const observer = new MutationObserver(() => {
+    if (timeout) return;
+
+    timeout = setTimeout(() => {
+      if (document.querySelector(SELECTORS)?.clientHeight > 0) {
+        try {
+          cb();
+        } catch (e) {
+          /* ignore */
+        }
+      } else {
+        timeout = null;
+      }
+    }, 1000 /* 1 second delay */);
+  });
+
+  document.addEventListener('yt-navigate-start', () => {
+    clearTimeout(timeout);
+    timeout = null;
+  });
+
+  document.addEventListener('DOMContentLoaded', () => {
+    observer.observe(document.body, {
+      childList: true,
+      subtree: true,
+      attributeFilter: ['src', 'style'],
+    });
+  });
+}
 
 async function isFeatureDisabled() {
   const { options, youtubeDontAsk } = await chrome.storage.local.get([
@@ -40,19 +80,21 @@ if (!chrome.extension.inIncognitoContext) {
   (async () => {
     if (await isFeatureDisabled()) return;
 
-    window.addEventListener('yt-navigate-start', () => closeIframe(), true);
-
     detectWall(async () => {
       if (await isFeatureDisabled()) return;
-
-      showIframe(
-        chrome.runtime.getURL(
-          `/pages/youtube/index.html?url=${encodeURIComponent(
-            window.location.href,
-          )}`,
-        ),
-        '460px',
-      );
+      chrome.runtime.sendMessage({
+        action: notifications.OPEN_ACTION,
+        id: 'youtube',
+        params: { url: window.location.href },
+      });
     });
+
+    window.addEventListener(
+      'yt-navigate-start',
+      () => {
+        chrome.runtime.sendMessage({ action: notifications.CLOSE_ACTION });
+      },
+      true,
+    );
   })();
 }

extension-manifest-v3/src/manifest.chromium.json

@@ -143,7 +143,7 @@
       "matches": ["http://*/*", "https://*/*"],
       "run_at": "document_start",
       "js": [
-        "content_scripts/iframe.js"
+        "content_scripts/notifications.js"
       ]
     },
     {
@@ -167,8 +167,8 @@
         "content_scripts/prevent-serp-tracking.js",
         "pages/trackers-preview/index.html",
         "pages/onboarding/index.html",
-        "pages/onboarding/opera-serp.html",
-        "pages/youtube/index.html"
+        "pages/notifications/opera-serp.html",
+        "pages/notifications/youtube.html"
       ],
       "all_frames": true,
       "matches": [