ranieri.dev

Mutation Observer

Mentre davo due martellate alla rete di casa ho notato che il pi-hole mi bloccava gli ads su IVG e faceva scattare un sistema di anti-adblock.

Con una rapida analisi ho visto che viene inserito una classe nel body della pagina dinamicamente da uno script che applica tutte le restrizioni.

Da vecchio utilizzatore di Greasemonkey ho provato ad eliminare la classe semplicemente

document.getElementByTagName(¨BODY¨)[0].classList.remove(¨blk-detected¨);

La cosa ovviamente non funziona visto che la classe viene aggiunta dopo qualche secondo.

Ho pensato alla possibilità di usare un observer esattamente un MutationObserver. Bello il 2024 che ha queste 'magie' funzionanti.

Trovata la documentazione su Mozilla:

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Ne è uscito fuori uno script:

// ==UserScript==
// @name     IVG ad-block unblock
// @version  1
// @match    https://*.ivg.it/*
// @grant    none
// ==/UserScript==
(function() {
  
    console.debug(`IVG AD-Block unblock loaded.`);
      
    const targetNode = document.getElementsByTagName("BODY")[0];
        
    const config = { attributes: true, childList: false, subtree: false };
    
    const callback = (mutationList, observer) => {
      for (const mutation of mutationList) {
            if (mutation.type === "attributes" 
            && mutation.attributeName == "class" 
            && targetNode.classList.contains('blk-detected')){
                  
          targetNode.classList.remove('blk-detected');
          //console.debug(`The 'blk-detected' class in ${mutation.attributeName} was removed.`);
        }
      }
    };
    
    const observer = new MutationObserver(callback);
       
    observer.observe(targetNode, config);
      
    //observer.disconnect();
    
    })()

Cosa fa: Quando viene modificato un attributo del BODY se l'attributo modificato è “class” e l'elenco delle classi applicate al BODY contiene la classe 'blk-detected' la rimuove dall'elenco.

M.d.c.