[WIP] [Experiment] Duck Player - Detect adblocker notice

injected/src/features/duck-player.js

@@ -110,6 +110,7 @@ export default class DuckPlayerFeature extends ContentFeature {
     }
 }
 
+
 /**
  * @typedef {Omit<import("@duckduckgo/privacy-configuration/schema/features/duckplayer").DuckPlayerSettings['overlays']['youtube'], "state">} OverlaysFeatureSettings
  */

injected/src/features/duckplayer/overlays.js

@@ -37,6 +37,11 @@ export async function initOverlays(settings, environment, messages) {
 
     let { userValues, ui } = initialSetup;
 
+    // ad block detection
+    let adBlockDestroy;
+    const adBlockSelector = 'Ad blockers violate YouTube';
+    const adBlockMessageName = 'didFindAdBlockNotice';
+
     /**
      * Create the instance - this might fail if settings or user preferences prevent it
      * @type {Thumbnails|ClickInterception|null}
@@ -64,12 +69,15 @@ export async function initOverlays(settings, environment, messages) {
                     prev = globalThis.location.href;
                 }, 500);
             }
+
+            adBlockDestroy = initAdBlockDetection(this.messaging, adBlockSelector, adBlockMessageName);
         });
     }
 
     function update() {
         thumbnails?.destroy();
         videoOverlays?.destroy();
+        adBlockDestroy?.();
 
         // re-create thumbs
         thumbnails = thumbnailsFeatureFromOptions({ userValues, settings, messages, environment, ui });
@@ -78,6 +86,9 @@ export async function initOverlays(settings, environment, messages) {
         // re-create video overlay
         videoOverlays = videoOverlaysFeatureFromSettings({ userValues, settings, messages, environment, ui });
         videoOverlays?.init('preferences-changed');
+
+        // re-init ad block detection
+        adBlockDestroy = initAdBlockDetection(this.messaging, adBlockSelector, adBlockMessageName);
     }
 
     /**
@@ -97,6 +108,93 @@ export async function initOverlays(settings, environment, messages) {
     });
 }
 
+/**
+ * Initializes ad block detection by monitoring for the presence of a selector or text
+ * @param {import('../../../../messaging/index.js').Messaging} messaging - The messaging backend to notify when adblock is found
+ * @param {string} adBlockSelector - The selector to watch for (starts with '.' or '#' for CSS selectors, otherwise treated as text)
+ * @param {string} messageName - The message to send when adblock is found
+ * @returns {() => void} - A function to disable detection
+ */
+const initAdBlockDetection = (messaging, adBlockSelector, messageName) => {
+    const isSelector = adBlockSelector.startsWith('.') || adBlockSelector.startsWith('#');
+
+    console.log('initAdBlockDetection', adBlockSelector, messageName, isSelector);
+    // Check if the element already exists
+    if (isSelector) {
+        const existingAdBlock = document?.querySelector(adBlockSelector);
+        if (existingAdBlock) {
+            messaging.notify(messageName);
+            return () => {};
+        }
+    } else {
+        // Check for text content
+        const existingText = document?.body?.textContent?.includes(adBlockSelector);
+        if (existingText) {
+            messaging.notify(messageName);
+            return () => {};
+        }
+    }
+
+    // Set up a MutationObserver to watch for when the element is created
+    const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+            if (mutation.type === 'childList') {
+                for (const node of mutation.addedNodes) {
+                    if (node.nodeType === Node.ELEMENT_NODE) {
+                        const element = /** @type {Element} */ (node);
+
+                        if (isSelector) {
+                            // Check if the added node is the adblock element
+                            if (element.matches(adBlockSelector) || element.querySelector(adBlockSelector)) {
+                                messaging.notify(messageName);
+                                observer.disconnect();
+                                return;
+                            }
+                        } else {
+                            // Check for text content in the added element
+                            if (element.textContent?.includes(adBlockSelector)) {
+                                messaging.notify(messageName);
+                                observer.disconnect();
+                                return;
+                            }
+                        }
+                    } else if (node.nodeType === Node.TEXT_NODE && !isSelector) {
+                        // Check for text content in text nodes
+                        const textContent = node.textContent;
+                        if (textContent && textContent.includes(adBlockSelector)) {
+                            messaging.notify(messageName);
+                            observer.disconnect();
+                            return;
+                        }
+                    }
+                }
+            } else if (mutation.type === 'characterData' && !isSelector) {
+                console.log('characterData');
+                // Check for text content changes
+                const textContent = document?.body?.textContent;
+
+                if (textContent && textContent.includes(adBlockSelector)) {
+                    messaging.notify(messageName);
+                    observer.disconnect();
+                    return;
+                }
+            }
+        }
+    });
+
+    // Start observing the document body for changes
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+        characterData: !isSelector // Only watch character data when monitoring for text
+    });
+
+    return () => {
+        console.log('disconnecting observer');
+        observer.disconnect();
+    };
+}
+
 /**
  * @param {OverlayOptions} options
  * @returns {Thumbnails | ClickInterception | null}

messaging/index.js

@@ -87,6 +87,7 @@ export class Messaging {
             method: name,
             params: data,
         });
+        console.log('notify', message);
         this.transport.notify(message);
     }