Remove annoying banners (Maurycy's blog)

2 min read Original article ↗
(Programming) (Software)

This is a small javascript snippet that removes most annoying website elements:

// For everything on the page...
(document.querySelectorAll('*').forEach((node) => {
        // Read style information
        var style = getComputedStyle(node);

        // Remove "dick bars" and the such
        var bad = (a)=>(["fixed","sticky","hidden","clip"].includes(a));
        if (bad(style.position))
                node.parentNode.removeChild(node);

        // Show hidden content
        if (bad(style.overflow))  node.style.overflow  = "visible";
        if (bad(style.overflowX)) node.style.overflowX = "visible";
        if (bad(style.overflowY)) node.style.overflowY = "visible";
}),null)

It's really simple: removing anything that doesn't scroll with the page, and enabling scrolling if it's been disabled. This gets rid of cookie popups/banners, recommend­ation sidebars, those annoying headers that follow you down the page, etc, etc.

If you don't want to mess around with the JS console, you can drag this link into your bookmark bar, and run it by clicking the bookmark:

Cleanup Site

If you need to manually create the bookmark, here's the URL:

javascript:(document.querySelectorAll(%27*%27).forEach((node)%3D%3E%7Bvar%20style%3DgetComputedStyle(node)%3Bvar%20bad%3D(a)%3D%3E(%5B%22fixed%22%2C%22sticky%22%2C%22hidden%22%2C%22clip%22%5D.includes(a))%3Bif(bad(style.position))node.parentNode.removeChild(node)%3Bif(bad(style.overflow))node.style.overflow%3D%22visible%22%3Bif%20(bad(style.overflowX))node.style.overflowX%3D%22visible%22%3Bif%20(bad(style.overflowY))node.style.overflowY%3D%22visible%22%3B%7D)%2Cnull)

(On mobile chrome, you will have to click the bookmark from the address bar instead of the menu.)

This is a typical website before the script:

... and after:

One click to get all your screen space back. It even works on very complex sites like social media — great for when you want to read a longer post without constant distractions.

As a bonus, I made these to fix bad color schemes:

Force dark mode

javascript:(document.querySelectorAll(%27*%27).forEach((a)%20%3D%3E%20%7Ba.style.color%3D%22white%22%3Ba.style.backgroundColor%3D%22black%22%3B%7D)%2Cnull)

... and ...

Force light mode

javascript:(document.querySelectorAll(%27*%27).forEach((a)%20%3D%3E%20%7Ba.style.color%3D%22black%22%3Ba.style.backgroundColor%3D%22white%22%3B%7D)%2Cnull)