Take Back The Web

Take Back the Web

Warum ich mir das Web zurückhole

Das Web ist nicht für mich gemacht — es ist für Advertiser, Plattformen und manchmal für Developer gedacht, die nie über Usability nachgedacht haben. Ich nutze Userscripts (via Tampermonkey) und UserCSS (via Stylus), um:

  • Seiten für bessere Lesbarkeit umzufärben.
  • Nervige Elemente zu entfernen, die vom Content ablenken.
  • Fehlende Funktionalität nachzurüsten, wenn mir an Websites was fehlt.

Mit ein paar Zeilen eigenem Code kann ich das Web an meine Bedürfnisse anpassen.


Beispiele

Userscripts können extrem mächtig sein, müssen es aber nicht. Das liegt ganz bei dir – hier ein paar Beispiele aus meinem Repo:

// ==UserScript==
// @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 && (/[0-9]+/).test(pg.innerHTML))
                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: Noch nicht veröffentlicht.

Ein paar Custom Styles (keine öffentlichen Quellen):

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 einem scrollbaren Bereich

#aab-overlay {
    display: none;
}

body {
    overflow: auto;
}

.tile__wrapper,
.nalashalanalinaka {
    display: none;
}

Das war für duden.de, die Seite war kaum benutzbar. Der letzte Selector ist fragil und vermutlich inzwischen schon kaputt. Aber die Seite wurde gefixt und der Style ist obsolet.

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

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

medium.com ist berüchtigt für Nagscreens und Paywalls.

Oft genutzt (und geforkt) ist mein Mod-Script für phpbb: https://git.aero2k.de/?p=dfde/quickmods.git;a=summary ist eine „One‑Click“‑Lösung, um Spam in unserem Forum zu entsorgen; ein anderes Script markiert sehr alte Threads. Schau dich gern in meinen Repos um.

Addons

Ich verwende Tampermonkey und Stylus für userscripts und usercss. Beide sind Free and Open Source Software, und verfügbar für alle üblichen browser (chrome basiert und Firefox), inklusive Firefox Mobile.

Synchronisation über mehrere Geräte

Als ich gemerkt habe, dass ich meine Scripts auch auf Firefox Mobile haben kann, habe ich mir das ermöglicht. Das braucht etwas Infrastruktur:

  • Tampermonkey kann via Cloud‑Storage syncen (z. B. GitHub, Gist, Google Drive). Im Prinzip reicht jeder Webzugriff. Da ich versioniere, benutze ich gitweb und dessen Raw-URLs als updateURL. Wenn ich pushe, dauert es ein paar Minuten (oder ein manueller Pull), bis Tampermonkey es zieht.
  • Stylus kann per DAV Web‑Share synchronisieren; dafür habe ich nginx konfiguriert.

Es ist kein Plug‑and‑Play, aber mit etwas Aufwand halte ich die Browser-Erfahrung auf allen Devices konsistent.


Wo es mehr gibt

  • Userscripts: Greasy Fork und OpenUserJS.
  • UserCSS: userstyles.world.

Diese Communities sind voll mit fertigen Tweaks. Außerdem super zum Lernen: Script installieren, Code lesen, anpassen.


Warum?

Weil das Web für dich arbeiten sollte. Statt 30 zufällige Addons zu installieren (jedes ein potenzielles Security‑Risiko), kannst du:

  • kontrollieren, was in deinem Browser läuft.
  • Scripts klein, gezielt und transparent halten.
  • genau das bauen, was du brauchst – ohne darauf zu warten, dass es jemand anderes tut.
  • etwas JS/CSS lernen.

Es geht dabei darum, die Kontrolle über dein Browser-Erlebnis zu behalten.


Baustellen

  • Management: Manchmal wünsche ich mir ein serverseitiges Management‑UI, in dem ich Scripts und CSS editiere und deploye. Ich meide Software wie gitea, wenn es gitweb + gitolite auch tun – mit Nachteilen, die ich dann eben akzeptieren muss. Oder ich schreibe mir etwas im CGI‑Stil.
  • Synchronisation: Stylus‑Sync ist hakelig und braucht besseres Tooling. Es sync’t irgendwann, aber „Sync“ klicken bewirkt fast nichts. Trennen und neu verbinden zwingt Stylus, neue Styles aus dem DAV‑Repo zu ziehen. Evtl. geht’s mit Google Drive/Dropbox/Onedrive besser – kombinieren kann man sie aber nicht.
  • Collaboration: Verbesserungen teilen ist leicht, die Discovery könnte besser sein. Es gibt keinen einfachen Weg außer einem „Export“ von allem, um ein weiteres Device hinzuzufügen. Hier wäre mein Management‑UI vielleicht hilfreich.

Und klar: Code kann immer besser werden. Aus den forks zu dfde‑quickmods (wie man vernünftig auf Site‑Änderungen reagiert) habe ich viel gelernt – performanter, weniger Bugs.

Wenn dich etwas an einer Website nervt, kannst du manchmal sogar den Betreiber anschreiben und den Fix upstream bringen – zumindest bei kleineren Seiten stehen die Chancen gut.


Fazit: Mit Userscripts und UserCSS bist du nicht nur Konsument – du gestaltest. Das ist keine vergeudete Zeit; du investierst sie, um das Web zu deinem zu machen.