Are you fed up with the banner that has become fashionable on websites asking you to accept third-party cookies or checkout? In this post I explain how I made (and published) a Firefox extension to avoid it on most sites

INFO

The code for this extension is published at https://github.com/jagedn/removecookiewall-addon and you can install it in Firefox (also on mobile) from https://addons.mozilla.org/es/firefox/addon/removecookiewall/

For a few months, and due to a European requirement (I think), most websites show you a banner the first time you access them that do not let you continue until you decide between:

• I am going to place thousands of third-party cookies in your browser that will spy on what you browse

• go to the checkout and pay me not to do it

Most of these libraries execute javascript as soon as the page is loaded that reads your cookies. If they see that you have not checked out, they show you an HTML dialog and block the body by changing the style to "block" (or similar)

This dialog doesn't let you read what's underneath but...​ it's still a DOM element of the HTML, so, since browsers allow you to open a development console and inspect the HTML, I came up with the idea of ​​eliminating manually the dialog (you simply click on inspect, look in the HTML where it is defined and click on delete) and chimpón, the dialog disappears. Then I look for the "body" declaration and by double clicking on the style attribute I remove the property that blocks it and I can now scroll.

Little magic.

What is happening then? Well, the javascript code simply keeps waiting for a user event to arrive telling it which button you have pressed, but these buttons are no longer there, so it will never arrive and it will not install third-party cookies.

Ok, but what if I refresh the page? Well, start again...​ so this is perfect for a new browser extension to do it for me.

RemoveCookieWall Extension

A Firefox extension, in short, is a reserved browser memory space where javascript code is executed that can dialogue with it.

It can (if the user grants permissions) inject code into the pages you visit, open tabs, close them, communicate with remote services, …​

RemoveCookieWall is a Firefox extension that the "only" thing it needs is for the browser to inject a small javascript code into all the pages that the user visits.

This javascript, as the page has loaded, will inspect if there is a DOM element that matches any of the ones I have investigated that they are using. If it detects it, it will use standard Javascript functions to delete it.

As the banner can sometimes appear (milli)seconds after our code is executed, what the script does is repeat the search for a couple of seconds. After this time, if the banner has not appeared, the extension assumes that the page does not have a CookieeWall and ends

And this is all. All that remains is to package the code, add a Manifest file that indicates the permissions our extension requires and publish it in Firefox

Code

The JS code is basically:

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);

As soon as the code is injected into the page, an interval starts every 100 millis

The script looks to see if the document.body.querySelectorAll finds any element like #mrf-popup, #didomi-popup, etc. If it finds it, simply remove it with element.remove()

After a few tries it ends up deleting the interval

Every extension must have a Manifest file. The one for this extension is simply:

{

    "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": "[email protected]"
        }
    }
}

As you see, content_scripts indicates that we want to inject the js into all pages. Other extensions can indicate only a site, others execute a javascript in the background, …​

Build and publish

To publish in Firefox we simply have to provide a zip containing all the files required by the extension. To make it easy I have made a build.sh that simply runs the zip:

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

Publishing an extension in Firefox has no complications and is free. The only thing that your extension has to pass an initial review that may take one (or several) days