Take Back The Web

Source

Take Back the Web

Why I'm Taking Back the Web

The web is not designed for me — it’s designed for advertisers, platforms, and sometimes for developers who never thought about accessibility. I use userscripts (via Tampermonkey) and usercss (via Stylus) to:

  • Recolor pages for readability.

  • Remove obnoxious elements that distract from content.

  • Add missing functionality where websites fall short.

With a few lines of custom code, I can bend the web to my needs instead of the other way around.

Examples

Userscripts can be very powerful tools, but also be very simple. It's entirely up to you, here are some examples from my repository:

// ==UserScript== xy
// @name         dfde-singlepage
// @namespace    de.debianforum
// @version      0.5
// @description  View all pages of a thread on one page
// @author       You
// @match        https://debianforum.de/forum/viewtopic.php*t=*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=debianforum.de
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    const pages = [...document.querySelector(".pagination").querySelectorAll("li")]
    .map((p) => parseInt(p.innerText))
    .filter(n => !isNaN(n))
    .slice(-1)[0];

    const thread_id = window.location.search.match(/t=[0-9]+/);
    const unsuitable = window.location.search.match(/p=[0-9]+|start=/);

    const pageBody = document.querySelector("#page-body");
    const pageBar = pageBody.querySelector(".action-bar.bar-bottom");

    const myButton = document.createElement("li")
    const myButton_a = document.createElement("a")
    myButton_a.className = "button";
    myButton_a.innerText = "∞";

    myButton.appendChild(myButton_a)
    const pagination = document.querySelector(".pagination ul");
    if (pagination) {
        pagination.prepend(myButton);
    }

    function clickit() {
        if (unsuitable) { window.location.href= "https://debianforum.de/forum/viewtopic.php?" + thread_id; }
        let promises = []

        const postPerPage = parseInt(document.querySelector('input[name=page-number]').attributes["data-per-page"].value);

        // async wrapper to fix the order of requests/posts
        const fn = async() => {
            for (var p=1; p<pages; p++) {
                const url = "https://debianforum.de/forum/viewtopic.php?" + thread_id + "&start=" + p*postPerPage;

                promises.push(
                    fetch(url)
                    .then(xhr => xhr.text())
                    .then(htmlstring => {
                        const d = document.createElement('div');
                        d.innerHTML = htmlstring.trim();
                        return d
                    })
                    .then(d => d.querySelectorAll("#page-body .post"))
                );

            }
            await Promise.all(promises)
            .then(nodelist => nodelist.forEach(posts => posts.forEach(post => pageBody.insertBefore(post, pageBar))));
        }
        fn();

        document.querySelectorAll(".pagination li a").forEach((pg, idx) => {
            if(idx > 0 && pg.innerHTML.match(/[0-9]+/))
                pg.style.backgroundColor = "#d70751";
            pg.style.color = "#fff";
        })
    }
    myButton.addEventListener("click", clickit);
})();

source: https://git.aero2k.de/?p=dfde/dfde-singlepage.git;a=summary

// ==UserScript==
// @name           Comic Agile - Previous/Next Comic Hotkeys
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Click previous/next comic on Comic Agile with left/right arrow keys
// @author       you
// @match        https://www.comicagile.net/comic/*
// @grant        none
// ==/UserScript==

(function() {
  'use strict';

  document.addEventListener('keydown', function(event) {
    if (event.keyCode === 37) { // Left arrow key
      const previousComicLink = document.querySelector('.previous-comic');
      if (previousComicLink) {
        previousComicLink.click();
      }
    } else if (event.keyCode === 39) { // Right arrow key
      const nextComicLink = document.querySelector('.next-comic');
      if (nextComicLink) {
        nextComicLink.click();
      }
    }
  });
})();

source: Haven't uploaded that one yet.

Some custom styles (no public sources available):

body pre,
body div.markdown-body {
    Border-Radius: 0.7em;
    font-size: 1.1em;
    background-color: #f3eacb;
    color: #704214 !important;
    font-family: "Gentium Basic", Georgia, "Times New Roman", Times, serif;

    margin: 0 auto;
    padding: 2em 1em;


    line-height: 1.5em;

    @media (max-width: 1000px) {
        font-size: 2em;
    }

    @media (min-width: 1000px) {
        max-width: 800px;
    }
}

body h1 {
    line-height: 1.2em;
}

body {
    background-color: #e2d8ca;
    color: black;
}

Readability

.pastebin #content .mini-panel.navbar {
    overflow: hidden;
    height: 0;
    transition: height 0.3s ease;

    padding-top: 0;
    padding-bottom: 0;
}

.pastebin .codebox {
    min-height: 800px;
}

Pastebin in a scrollable area

#aab-overlay {
    display: none;
}

body {
    overflow: auto;
}

.tile__wrapper,
.nalashalanalinaka {
    display: none;
}

That one was for duden.de, which was barely usable. The last selector is fragile and would probably already be broken. But the site got fixed and the style became obsolete.

/* cookies */
[style="bottom: 0px;"] {
    display: none
}

/* privacy policy */
script[data-cf-beacon] + div {
    display: none;
}

medium.com is notorious for nag screens and paywalls.

Often used (and forked) is my mod script for phpbb: https://git.aero2k.de/?p=dfde/quickmods.git;a=summary is a "one-click" solution to dispose spam in our forum, another one highlights very old threads. Feel free to browse my repositories for other scripts.

3. Synchronization Across Devices

Once I figured I could have my scripts on firefox mobile as well, I enabled myself to do so. This requires some infrastructure:

  • Tampermonkey supports syncing through cloud storage (e.g., GitHub, Gist, Google Drive). So basically any web access will do. Since I'm versioning them, I use gitweb and its raw urls as update urls. So when I'm pushing new commits, it just takes a few minutes (or a manual pull) for tampermonkey to pick it up.

  • Stylus can sync using a DAV web share, which I set up with nginx.

It’s not plug-and-play, but with a little effort, I can keep my browser experience consistent across all devices.

4. Where to Find More

Both communities are full of ready-to-use tweaks. They’re also a great way to learn: install a script, read the code, and adapt it.

5. Why?

Because the web should work for you. Instead of installing 30 random addons (each a potential security risk), you can:

  • Audit and control what runs in your browser.

  • Keep scripts small, targeted, and transparent.

  • Build exactly what you need without waiting for someone else to care.

  • Learn some JS/CSS

This is about ownership of your browsing experience.

6. Stuff to Improve

  • Management: Sometimes I wish for a server side management UI where I can edit and deploy scripts and css. I avoid running software like gitea if a per-call solution like gitweb and gitolite also can do the job, so that's a drawback I might need to accept - or write my own thing in CGI style.

  • Synchronization: Stylus syncing is clumsy and needs better tooling. It will sync at some time, but pressing "sync" does barely anything. You have to disconnect and reconnect to make stylus download new styles in the DAV repo. It might work better with other storage providers like Google Drive/Dropbox/Onedrive. But you cannot combine them.

  • Collaboration: Sharing improvements is easy, but discovery could be better. There is no easy way but an "export" of everything to add another device. This is where my management UI came handy.

Also, and this goes without saying, code can always be improved. The stuff I learned from the dfde-quickmods (how to properly react to site changes) made it way more responsive and fixed bugs.

Sometimes, if you find something annoying on someone's web site, you might even contact the owner and get your fix upstream - at least for small sites, there's always a chance.

Conclusion: With userscripts and usercss, you’re not just a passive consumer of the web—you shape it. This isn’t wasted time; it’s investing in making the web yours.