¿Harto del banner que se ha puesto de moda en las webs para que aceptes cookis de terceros o pases por caja? En este post explico cómo me hecho (y publicado) una extensión de Firefox para evitarlo en la mayoría de sites

INFO

El código de esta extensión está publicado en https://github.com/jagedn/removecookiewall-addon y lo puedes instalar en Firefox (también en móvil) desde https://addons.mozilla.org/es/firefox/addon/removecookiewall/

Desde hace unos meses, y por una exigencia de Europa (creo), la mayoría de las webs te muestran un banner la primera vez que accedes a ellas que no te dejan continuar hasta que no decides entre:

• te voy a colocar miles de cookies de terceros en tu navegador que van a espiar lo que navegas

• pasa por caja y págame para que no lo haga

La mayoría de estas librerias ejecutan un javascript nada más cargar la página que leen tus cookies. Si ven que no has pasado por caja te muestran un dialogo HTML y bloquean el body cambiando el style a "block" (o similar)

Este diálogo no te deja leer lo que hay debajo pero …​ no deja de ser un elemento DOM del HTML, así que, como los navegadores te permiten abrir una consola de desarrollo e inspeccionar el HTML, me surgió la idea de eliminar manualmente el díalogo (simplemente le das a inspeccionar, buscas en el HTML donde está definido y le das a suprimir) y chimpón, el diálogo desaparece. Luego busco la declaración del "body" y dando doble click en el atributo style le quito la propiedad que lo bloquea y ya puedo hacer scroll.

Poca magia.

Qué es lo que está pasando entonces? Pues simplemente el código javascript sigue esperando que le llegue un evento de usuario diciendole qué botón has pulsado, pero estos botones ya no están, así que nunca le llegará y no te instalará cookies de terceros.

Ok, pero ¿y si refresco la página?. Pues vuelta a empezar …​ así que esto es perfecto para una nueva extensión del navegador que lo haga por mí.

Extension RemoveCookieWall

Una extensión Firefox, de forma resumida, es un espacio de memoria del navegador reservado donde se ejecuta un código javascript que puede dialogar con él.

Puede (si le concede permisos el usuario) inyectar código en las páginas que visitas, abrir pestañas, cerrarlas, comunicarse con servicios remotos, …​

RemoveCookieWall es una extensión de Firefox que lo "único" que necesita es que el navegador inyecte en todas las páginas que el usuario visita un pequeño código javascript.

Este javascript según se ha cargado la página inspeccionará si existe un elemento DOM que coincida con alguno de los que he investigado que ese están usando. Si lo detecta usará funciones standard de Javascript para borrarlo.

Como el banner a veces puede aparecer (mili)segundos después de que nuestro código se ejecute lo que hace el script es repetir la búsqueda durante un par de segundos. Pasado este tiempo si el banner no ha aparecido la extensión asume que la página no tiene un CookieeWall y termina

Y esto es todo. Sólo queda empaquetar el código, añadir un fichero Manifest que indique los permisos que requiere nuestra extensión y publicarlo en Firefox

Código

El código JS básicamente es:

var readyStateCheckInterval;
var counter = 0;

function sanitizeBody() {
    document.body.style.overflow = "unset"
    document.body.classList.remove('sxnlzit')
    document.body.classList.remove('didomi-popup-open')
    document.body.parentNode.classList.remove('sp-message-open')
}

function removeMe(element) {
    element.remove();
    sanitizeBody();
}

readyStateCheckInterval = setInterval(function() {
    if (document.readyState === "complete") {
        counter++;
        const removeParent = ['div.pmConsentWall']; //elpais
        [...removeParent].forEach(s => {
            var divs = document.body.querySelectorAll(s);
            [...divs].forEach(element => {
                removeMe(element.parentNode);
            });
        });
        const removeThis = [
            'div[data-nosnippet="data-nosnippet"]',
            '#mrf-popup',
            '#didomi-popup',
            '[id^="sp_message_container_"]',
            '#cl-consent',
            'dialog.cookie-policy'
        ];
        [...removeThis].forEach(s => {
            var divs = document.body.querySelectorAll(s);
            [...divs].forEach(element => {
                removeMe(element);
            });
        });
        if (counter > 30) {
            clearInterval(readyStateCheckInterval);
        }
    }
}, 100);

Nada más ser inyectado el código en la página se inicia un interval cada 100 milis

El scrip busca si el document.body.querySelectorAll encuentra algún elmento tipo #mrf-popup, #didomi-popup, etc. Si lo encuentra simplemente lo elimina con element.remove()

Después de unos cuantos intentos termina borrando el interval

Toda extensión tiene que tener un fichero Manifest. El de esta extensión es simplemente:

{

    "description": "Remove CookieWall",
    "manifest_version": 2,
    "name": "RemoveCookieWall",
    "version": "0.11",
    "homepage_url": "https://github.com/jagedn/removecookiewall-addon",
    "icons": {
        "48": "icons/border-48.png"
    },
    "content_scripts": [{
        "matches": [
            "*://*/*"
        ],
        "js": ["removeCookieWall.js"]
    }],
    "browser_specific_settings": {
        "gecko": {
            "id": "remove-cookiewall@aguilera.soy"
        }
    }
}

Como ves, content_scripts indica que queremos inyectar el js en todas las páginas. Otras extensiones pueden indicar sólo un site, otras ejecutar un javascript en backuground, …​

Build and publish

Para publicar en Firefox simplemente tenemos que proveer un zip donde esten todos los ficheros que requiere la extension. Para hacerlo fácil me he hecho un build.sh que simplemente ejecuta el zip:

zip -r -FS ../remove-cookiewall.zip * --exclude '.git' --exclude 'build.sh'

Publicar una extension en Firefox no tiene ninguna complicación y es gratis. Lo único que tu extensión tiene que pasar una revisión inicial que puede tardar uno (o varios) días