Add Youtube wall popup to v10

extension-manifest-v2/app/content-scripts/youtube.js

@@ -1,26 +1,40 @@
+/**
+ * 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 detectWall from '@ghostery/ui/youtube/wall';
 import { showIframe, closeIframe } from '@ghostery/ui/iframe';
 
-// Based on https://github.com/AdguardTeam/AdguardFilters/blob/e5ae8e3194f8d18bdcc660d4c42282e4a96ca5b9/AnnoyancesFilter/Popups/sections/antiadblock.txt#L2044
-const ADBLOCKER_WALL_SELECTORS = [
-	'ytd-watch-flexy:not([hidden]) ytd-enforcement-message-view-model > div.ytd-enforcement-message-view-model',
-];
+function isFeatureDisabled() {
+	return new Promise((resolve) => {
+		chrome.storage.local.get(['youtube_dont_show_again'], (storage) => {
+			resolve(storage.youtube_dont_show_again);
+		});
+	});
+}
 
-let isShown = false;
+if (!chrome.extension.inIncognitoContext) {
+	(async () => {
+		if (await isFeatureDisabled()) return;
 
-chrome.storage.local.get(['youtube_dont_show_again'], (storage) => {
-	if (storage.youtube_dont_show_again || chrome.extension.inIncognitoContext) {
-		return;
-	}
+		window.addEventListener('yt-navigate-start', () => {
+			closeIframe();
+		}, true);
 
-	window.addEventListener('yt-navigate-start', () => {
-		isShown = false;
-		closeIframe();
-	}, true);
+		detectWall(async () => {
+			if (await isFeatureDisabled()) return;
 
-	setInterval(() => {
-		if (!isShown && document.querySelectorAll(ADBLOCKER_WALL_SELECTORS).length > 0) {
-			showIframe(chrome.runtime.getURL(`app/templates/youtube.html?url=${encodeURIComponent(window.location.href)}`), '460px');
-			isShown = true;
-		}
-	}, 2000);
-});
+			showIframe(
+				chrome.runtime.getURL(`app/templates/youtube.html?url=${encodeURIComponent(window.location.href)}`),
+				'460px',
+			);
+		});
+	})();
+}

extension-manifest-v2/app/youtube/index.js

@@ -8,10 +8,10 @@
  * 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 { mount, html } from 'hybrids';
 
-import '@ghostery/ui/onboarding';
-import './components/message';
+import '@ghostery/ui/youtube';
 import { setupIframe, closeIframe } from '@ghostery/ui/iframe';
 
 setupIframe();
@@ -25,6 +25,7 @@ function openPrivateWindow() {
 			url,
 		},
 	});
+	closeIframe();
 }
 
 function openBlog(slug) {
@@ -46,12 +47,12 @@ function dontAsk() {
 
 mount(document.body, {
 	content: () => html`
-		<youtube-message
+		<ui-youtube-wall
 			onclose="${() => closeIframe()}"
 			ondontask="${() => dontAsk()}"
 			onopenblog1="${() => openBlog('enable-extensions-in-incognito')}"
 			onopenblog2="${() => openBlog('whats-happening-with-youtube-ads')}"
 			onopenprivatewindow="${() => openPrivateWindow()}"
-		></youtube-message>
+		></ui-youtube-wall>
 	`,
 });

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

@@ -16,6 +16,12 @@ chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
         sendResponse(tab);
       });
       return true;
+    case 'openTabWithUrl':
+      chrome.tabs.create({ url: msg.url });
+      break;
+    case 'openPrivateWindowWithUrl':
+      chrome.windows.create({ url: msg.url, incognito: true });
+      break;
   }
 
   return false;

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

@@ -0,0 +1,55 @@
+/**
+ * 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 { showIframe, closeIframe } from '@ghostery/ui/iframe';
+import detectWall from '@ghostery/ui/youtube/wall';
+
+async function isFeatureDisabled() {
+  const { options, youtubeDontAsk } = await chrome.storage.local.get([
+    'options',
+    'youtubeDontAsk',
+  ]);
+
+  if (
+    // User's choice to not show the wall
+    youtubeDontAsk ||
+    // Terms not accepted or paused domain
+    !options ||
+    !options.terms ||
+    options.paused.some(({ id }) => id.includes('youtube.com'))
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
+// INFO: Safari always returns false for `inIncognitoContext`
+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',
+      );
+    });
+  })();
+}

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

@@ -91,7 +91,12 @@
       "js": [
         "content_scripts/whotracksme/reporting.js"
       ]
-    }
+    },
+    {
+      "matches": ["*://www.youtube.com/*"],
+      "run_at": "document_start",
+			"js": ["content_scripts/youtube.js"]
+		}
   ],
   "web_accessible_resources": [
     {
@@ -103,7 +108,8 @@
         "pages/autoconsent/index.html",
         "pages/onboarding/index.html",
         "pages/onboarding/iframe.html",
-        "pages/onboarding/opera-serp.html"
+        "pages/onboarding/opera-serp.html",
+        "pages/youtube/index.html"
       ],
       "all_frames": true,
       "matches": [

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

@@ -73,15 +73,21 @@
       "js": [
         "content_scripts/whotracksme/reporting.js"
       ]
-    }
+    },
+    {
+      "matches": ["*://www.youtube.com/*"],
+      "run_at": "document_start",
+			"js": ["content_scripts/youtube.js"]
+		}
   ],
   "web_accessible_resources": [
     "content_scripts/trackers-preview.js",
     "content_scripts/prevent-serp-tracking.js",
     "pages/trackers-preview/index.html",
     "pages/autoconsent/index.html",
     "pages/onboarding/index.html",
-    "pages/onboarding/iframe.html"
+    "pages/onboarding/iframe.html",
+    "pages/youtube/index.html"
   ],
   "browser_specific_settings": {
 		"gecko": {

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

@@ -94,7 +94,12 @@
       "js": [
         "content_scripts/whotracksme/reporting.js"
       ]
-    }
+    },
+    {
+      "matches": ["*://www.youtube.com/*"],
+      "run_at": "document_start",
+			"js": ["content_scripts/youtube.js"]
+		}
   ],
   "web_accessible_resources": [
     "content_scripts/whotracksme/ghostery-whotracksme.js",
@@ -103,7 +108,8 @@
     "pages/trackers-preview/index.html",
     "pages/autoconsent/index.html",
     "pages/onboarding/index.html",
-    "pages/onboarding/iframe.html"
+    "pages/onboarding/iframe.html",
+    "pages/youtube/index.html"
   ],
   "content_security_policy" : {},
   "browser_specific_settings": {

extension-manifest-v3/src/pages/youtube/index.html

@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>Youtube Wall</title>
+    <script src="./index.js" type="module" async></script>
+  </head>
+  <body></body>
+</html>