implement my own adblock cause npm modules are worthless

Author: sojs-coder

bun.lock

@@ -58,7 +58,6 @@
 		"@aws-sdk/client-s3": "^3.883.0",
 		"@aws-sdk/credential-provider-cognito-identity": "^3.883.0",
 		"@aws-sdk/util-dynamodb": "^3.883.0",
-		"@sveltejs/adapter-static": "^3.0.9",
-		"just-detect-adblock": "^1.1.0"
+		"@sveltejs/adapter-static": "^3.0.9"
 	}
 }

package.json

@@ -0,0 +1,22 @@
+import detectDomAdblocker from "./detectDomAdblock.js";
+import { createBaitRequest } from "./helpers.js";
+
+/**
+ * Detect if any known ad blocker mechanism is detected
+ * @return Promise
+ */
+export default async function detectAnyAdblocker(): Promise<boolean> {
+    // check dom adblockers first
+    if (detectDomAdblocker()) {
+        return true;
+    }
+    try {
+        const responseOk = await createBaitRequest();
+        if (!responseOk) {
+            return true;
+        }
+    } catch {
+        return true;
+    }
+    return false;
+}

src/lib/adblock/detectAnyAdblock.ts

@@ -0,0 +1,21 @@
+import { createBaitElement, doesElementIsBlocked } from "./helpers.js";
+
+/**
+ * Detect if an ad blocker is blocking ads in the DOM itself
+ * @return Boolean
+ */
+export default function detectDomAdblocker(){
+  // that's a legacy Ad Block Plus check I suppose ?
+  // I don't think this attribute is set anymore, but I am keeping it anyway
+  if(window.document.body.getAttribute('abp') !== null) {
+    return true;
+  }
+
+  // try to lure adblockers into a trap
+  var bait = createBaitElement();
+  window.document.body.appendChild(bait);
+  var detected = doesElementIsBlocked(bait);
+  window.document.body.removeChild(bait);
+
+  return detected;
+};

src/lib/adblock/detectDomAdblock.ts

@@ -0,0 +1,64 @@
+/**
+ * Check if Brave is the current browser
+ * @return Boolean
+ */
+export function isBraveBrowser() {
+    return typeof (navigator as any).brave !== 'undefined' && typeof (navigator as any).brave.isBrave !== 'undefined';
+};
+
+/**
+ * Check if Opera is the current browser
+ * @return Boolean
+ */
+export function isOperaBrowser() {
+    return typeof navigator.userAgent === 'string' && navigator.userAgent.match(/Opera|OPR\//);
+};
+
+/**
+ * Create a DOM element that should be seen as an ad by adblockers
+ * @return DOM element
+ */
+export function createBaitElement() {
+    var bait = document.createElement('div');
+
+    bait.setAttribute('class', 'pub_300x250 pub_300x250m pub_728x90 text-ad textAd text_ad text_ads text-ads text-ad-links ad-text adSense adBlock adContent adBanner');
+    bait.setAttribute('style', 'width: 1px !important; height: 1px !important; position: absolute !important; left: -10000px !important; top: -1000px !important;');
+
+    return bait;
+};
+
+/**
+ * Check if a DOM element seems to be blocked by an adblocker or not
+ * @return Boolean
+ */
+export function doesElementIsBlocked(elem: HTMLElement) {
+    if (elem.offsetParent === null
+        || elem.offsetHeight == 0
+        || elem.offsetLeft == 0
+        || elem.offsetTop == 0
+        || elem.offsetWidth == 0
+        || elem.clientHeight == 0
+        || elem.clientWidth == 0) {
+        return true;
+    } else if (window.getComputedStyle !== undefined) {
+        var elemCS = window.getComputedStyle(elem, null);
+        if (elemCS && (elemCS.getPropertyValue('display') == 'none' || elemCS.getPropertyValue('visibility') == 'hidden')) {
+            return true;
+        }
+    }
+
+    return false;
+};
+
+/**
+ * Create and execute an XMLHttpRequest that should be blocked by an adblocker
+ * @return Promise
+ */
+export async function createBaitRequest() {
+    try {
+        const response = await fetch('https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js', { method: 'GET' });
+        return response.ok;
+    } catch {
+        return false;
+    }
+}

src/lib/adblock/helpers.ts

@@ -169,7 +169,7 @@
     }
 
     const searchRegex = /[a-z0-9]/i;
-    onMount(() => {
+    onMount(async () => {
         document.addEventListener("keydown", (e) => {
             if (!searchInput) return;
             // Ignore keyboard shortcuts, special keys, non a-z0-9, or backspace, enter, delete, etc.
@@ -216,47 +216,39 @@
 
         if (SessionState.ssr) return;
 
-        (async () => {
-            const enabled = !detectAdBlockEnabled() && State.isAHost();
-            if (enabled) {
-                const host = browser ? window.location.hostname : "<SSR_HOST>";
-                if (host in adSlotConfig) {
-                    adSlots = adSlotConfig[host as keyof typeof adSlotConfig];
-                }
+        await detectAdBlockEnabled();
+        console.log("AdBlock Enabled:", SessionState.adBlockEnabled);
+        adsEnabled = SessionState.adsEnabled;
+        if (adsEnabled) {
+            const host = browser ? window.location.hostname : "<SSR_HOST>";
+            if (host in adSlotConfig) {
+                adSlots = adSlotConfig[host as keyof typeof adSlotConfig];
+            }
+            (async () => {
                 const aHosts = await findAHosts();
                 if (!aHosts) {
                     adsEnabled = false;
+                    SessionState.adsEnabled = false;
                     return;
                 }
 
                 const aHostData = aHosts.find((h) => h.hostname === host);
                 if (aHostData && aHostData.acode) {
+                    const scriptId = `ad-script-${aHostData.acode}`;
+                    if (document.getElementById(scriptId)) return;
+
                     const script = document.createElement("script");
+                    script.id = scriptId;
                     script.src = `//monu.delivery/site/${aHostData.acode}`;
                     script.setAttribute("data-cfasync", "false");
                     script.defer = true;
                     document.head.appendChild(script);
-                    adsEnabled = true;
                 } else {
-                    if (!SessionState.devMode) {
-                        adsEnabled = false;
-                    } else {
-                        const script = document.createElement("script");
-                        script.src = `//monu.delivery/site/${aHosts[0].acode}`;
-                        script.setAttribute("data-cfasync", "false");
-                        script.defer = true;
-                        document.head.appendChild(script);
-                        adsEnabled = true;
-                        if (!adSlots) {
-                            adSlots =
-                                adSlotConfig[
-                                    aHosts[0].hostname as keyof typeof adSlotConfig
-                                ];
-                        }
-                    }
+                    adsEnabled = false;
+                    SessionState.adsEnabled = false;
                 }
-            }
-        })();
+            })();
+        }
     });
 
     $effect(() => {

src/lib/components/CardGrid.svelte

@@ -1,9 +1,8 @@
 import { ReturnValue, UpdateItemCommand } from "@aws-sdk/client-dynamodb";
 import type { Game } from "./types/game.js";
 import { SessionState, State } from "./state.js";
-import detection from 'just-detect-adblock'
+import detectAnyAdBlocker from "./adblock/detectAnyAdblock.js";
 import { browser } from "$app/environment";
-const { detectAnyAdblocker } = detection;
 export function decamelize(string: string): string {
     // HelloWorld -> Hello World
     return string.replace(/([a-z])([A-Z])/g, '$1 $2');
@@ -69,8 +68,15 @@ export async function importJSON(path: string): Promise<any> {
 
 export async function detectAdBlockEnabled() {
     if (!browser) return false; // Only run in browser
-    const detected = await detectAnyAdblocker();
-    return detected;
+    try {
+        const detected = await detectAnyAdBlocker();
+        SessionState.adBlockEnabled = detected;
+        SessionState.adsEnabled = !detected && State.isAHost();
+        return detected;
+    } catch (e) {
+        console.error("Adblock detection failed", e);
+        return true; // Assume adblock is enabled if detection fails
+    }
 }
 
 export function getTimeBetween(date1: Date, date2: Date): string {

src/lib/helpers.ts

@@ -11,17 +11,19 @@ export const SessionState = {
     awsReady: false,
     ssr: !browser,
     adBlockEnabled: false,
+    adsEnabled: false,
     credentials: null as CognitoIdentityCredentials | null,
     dynamoDBClient: null as DynamoDBClient | null,
     s3Client: null as S3Client | null,
     devMode: (browser && window.location.hostname === "localhost"),
-    plays: 0
+    plays: 0,
+    user: null as null | { name: string; email: string; tokens: any } | undefined,
+    loggedIn: false
 }
 
 
 type StateType = {
     version: string;
-    loggedIn: boolean;
     servers: typeof Servers;
     aHosts: typeof AHosts;
     currentServer: Server;
@@ -53,7 +55,6 @@ function createState(initial: StateType): StateType {
 
 export const State = createState({
     version: "1.0.0",
-    loggedIn: false,
     servers: Servers,
     aHosts: AHosts,
     currentServer: Servers[0],
@@ -76,6 +77,8 @@ export async function initializeTooling() {
     }
     const adBlock = await detectAdBlockEnabled();
     SessionState.adBlockEnabled = adBlock;
+    SessionState.adsEnabled = !adBlock && State.isAHost();
+
     const credentials = await initializeUnathenticated();
     const dynamoDBClient = new DynamoDBClient({
         region: "us-west-2",
@@ -130,3 +133,4 @@ async function initializeUnathenticated() {
     SessionState.awsReady = true;
     return credentials;
 }
+

src/lib/just-detect-adblock.d.ts

@@ -13,10 +13,14 @@
     const { games } = data;
     let isAHost = $state(State.isAHost());
     let devMode = $state(true);
+    let adblockEnabled = $state(SessionState.adBlockEnabled);
+    let adsEnabled = $state(SessionState.adsEnabled);
     onMount(async () => {
         await initializeTooling();
         isAHost = State.isAHost();
         devMode = SessionState.devMode;
+        adblockEnabled = SessionState.adBlockEnabled;
+        adsEnabled = SessionState.adsEnabled;
     });
 </script>
 
@@ -68,7 +72,8 @@
         Browser: {browser ? navigator.userAgent : "<SSR_HOST>"}<br />
         Host: {browser ? window.location.hostname : "<SSR_HOST>"}<br />
         DevMode: {SessionState.devMode}<br />
-        AdBlock: {SessionState.adBlockEnabled}<br />
+        AdBlock Enabled: {adblockEnabled}<br />
+        Ads Enabled: {adsEnabled}<br />
         Current Server: {State.currentServer.name} (Loaded {State.servers
             .length})<br />
         AHost: {State.isAHost()} (Loaded {State.aHosts.length})<br />
@@ -77,7 +82,7 @@
         Games Loaded: {games.length} ({State.pinnedGames.length} pinned) - rendered
         {State.homeView}<br />
         Version: {State.version}<br />
-        Logged In: {State.loggedIn}<br />
+        Logged In: {SessionState.loggedIn}<br />
         SSR: {SessionState.ssr}<br />
         AWS Ready: {SessionState.awsReady}<br />
         AWS Acting: {SessionState.credentials?.identityId} | {SessionState