Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 2 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions injected/src/features/duck-player.js
Original file line number Diff line number Diff line change
Expand Up @@ -110,6 +110,7 @@ export default class DuckPlayerFeature extends ContentFeature {
}
}


/**
* @typedef {Omit<import("@duckduckgo/privacy-configuration/schema/features/duckplayer").DuckPlayerSettings['overlays']['youtube'], "state">} OverlaysFeatureSettings
*/
Expand Down
98 changes: 98 additions & 0 deletions injected/src/features/duckplayer/overlays.js
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down Expand Up @@ -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 });
Expand All @@ -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);
}

/**
Expand All @@ -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}
Expand Down
1 change: 1 addition & 0 deletions messaging/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ export class Messaging {
method: name,
params: data,
});
console.log('notify', message);
this.transport.notify(message);
}

Expand Down
Loading