Maison > interface Web > js tutoriel > le corps du texte

RemoveCookieWall, une extension de Firefox

WBOY
Libérer: 2024-09-12 10:31:02
original
611 Les gens l'ont consulté

RemoveCookieWall, una extension de Firefox

Vous en avez marre de la bannière devenue à la mode sur les sites internet pour que vous acceptiez les cookies tiers ou que vous payiez ? Dans cet article j'explique comment j'ai créé (et publié) une extension Firefox pour l'éviter sur la plupart des sites

INFOS

Le code de cette extension est publié sur https://github.com/jagedn/removecookiewall-addon et vous pouvez l'installer dans Firefox (également sur mobile) depuis https://addons.mozilla.org/es/firefox/addon/removecookiewall/

Depuis quelques mois, et en raison d'une exigence européenne (je pense), la plupart des sites Web vous affichent une bannière lors du premier accès qui ne vous laisse pas continuer jusqu'à ce que vous choisissiez entre :

  • Je vais placer des milliers de cookies tiers dans votre navigateur qui espionneront ce que vous naviguez

  • passe à la caisse et paye-moi pour que je ne le fasse pas

La plupart de ces bibliothèques exécutent du javascript dès le chargement de la page qui lit vos cookies. S'ils voient que vous n'avez pas effectué le paiement, ils vous montrent une boîte de dialogue HTML et bloquent le corps en changeant le style en "bloquer" (ou similaire)

Cette boîte de dialogue ne vous permet pas de lire ce qu'il y a en dessous mais...​ c'est toujours un élément DOM du HTML, donc, puisque les navigateurs vous permettent d'ouvrir une console de développement et d'inspecter le HTML, j'ai eu l'idée de ​​en éliminant manuellement la boîte de dialogue (vous cliquez simplement sur inspecter, regardez dans le HTML où elle est définie et cliquez sur supprimer) et chimpanzé, la boîte de dialogue disparaît. Ensuite je cherche la déclaration "body" et en double-cliquant sur l'attribut style je supprime la propriété qui la bloque et je peux maintenant faire défiler.

Petite magie.

Que se passe-t-il alors ? Eh bien, le code javascript attend simplement qu'un événement utilisateur arrive lui indiquant sur quel bouton vous avez appuyé, mais ces boutons ne sont plus là, donc il n'arrivera jamais et il n'installera pas de cookies tiers.

Ok, mais et si j'actualise la page ? Eh bien, revenons au début...​ c'est donc parfait pour qu'une nouvelle extension de navigateur le fasse à ma place.

Supprimer l'extension CookieWall

Une extension Firefox, en bref, est un espace mémoire réservé du navigateur où est exécuté du code javascript qui peut dialoguer avec lui.

Il peut (si l'utilisateur accorde les autorisations) injecter du code dans les pages que vous visitez, ouvrir des onglets, les fermer, communiquer avec des services distants,...

RemoveCookieWall est une extension Firefox dont la "seule" chose dont il a besoin est que le navigateur injecte un petit code javascript dans toutes les pages visitées par l'utilisateur.

Ce javascript, au fur et à mesure du chargement de la page, inspectera s'il existe un élément DOM qui correspond à l'un de ceux que j'ai étudiés et qu'ils utilisent. S'il le détecte, il utilisera les fonctions Javascript standards pour le supprimer.

Comme la bannière peut parfois apparaître (milli)secondes après l'exécution de notre code, le script répète la recherche pendant quelques secondes. Passé ce délai, si la bannière n'est pas apparue, l'extension suppose que la page ne possède pas de CookieeWall et se termine

Et c'est tout. Il ne reste plus qu'à empaqueter le code, ajouter un fichier Manifest qui indique les autorisations requises par notre extension et le publier dans Firefox

Code

Le code JS est essentiellement :

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);
Copier après la connexion

Dès que le code est injecté dans la page, un intervalle démarre tous les 100 millilitres

Le script regarde si document.body.querySelectorAll trouve un élément comme #mrf-popup, #didomi-popup, etc. S'il le trouve, supprimez-le simplement avec element.remove()

Après quelques tentatives il finit par supprimer l'intervalle

Chaque extension doit avoir un fichier manifeste. Celui de cette extension est simplement :

{

    "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"
        }
    }
}
Copier après la connexion

Comme vous le voyez, content_scripts indique que nous voulons injecter le js dans toutes les pages. D'autres extensions peuvent indiquer uniquement un site, d'autres exécutent un javascript en arrière-plan, …

Construire et publier

Pour publier dans Firefox il suffit de fournir un zip contenant tous les fichiers requis par l'extension. Pour faciliter les choses, j'ai créé un build.sh qui exécute simplement le zip :

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

La publication d'une extension dans Firefox ne présente aucune complication et est gratuite. La seule chose que votre extension doit passer un premier examen qui peut prendre un (ou plusieurs) jours

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source:dev.to
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!