Wie man Webseiten von überflüssigem Müll befreit

Vermutlich hat jeder so seine Lieblings-Webseiten, die er täglich aufruft. Oft sind diese überladen mit Werbung, Popups, Social Media Plugins, Partnerangeboten und so weiter.
Natürlich verwenden viele Leute inzwischen einen Werbeblocker, aber die wenigsten wissen, dass man damit mehr als nur Werbung entfernen kann, und das völlig ohne Programmierkenntnisse.

Beispielsweise kann die Startseite von Youtube so aussehen, wenn man es schlicht und einfach mag:

Ein solcher Minimalismus ist Geschmackssache, das soll lediglich als Beispiel dienen, um was es in diesem Blogbeitrag geht, nämlich um das Entfernen von überflüssigen Elementen auf Webseiten. Mich persönlich haben die Videovorschläge von Youtube noch nie interessiert, warum sollte ich sie dann jedesmal mitladen?

Andere Webseiten warten dagegen mit Einblendungen oder fragwürdigen Inhalten auf, die auf Dauer ziemlich nervig sein können. So schiebt sich mir beispielsweise bei focus.de immer eine Messagebox von rechts ins Bild, wenn ich in einem Artikel nach unten scrolle:

Natürlich kann man diese Box mit einem Werbeblocker und einem entsprechenden Filter entfernen. Für gewöhnlich muss man dafür im Quelltext der Webseite nachsehen, wie das Element heisst und dann eine Regel dafür schreiben. In Adblock sähe diese Regel so aus: „focus.de###flying_mbox“. Damit wird das DIV Element „flying_mbox“ auf der Domain focus.de blockiert.

Der Nachteil ist, dass man sich dafür ein etwas mit HTML und der Scriptsprache des Werbeblockers beschäftigen muss. Einige Werbeblocker wie uBlock oder Adguard besitzen jedoch ein Hilfswerkzeug, mit dem man sich ganz ohne jegliche Programmierkenntnisse mit der Maus ein Objekt auswählen und einen Filter dafür erstellen lassen kann.

Ausgerechnet der bekannteste Werbeblocker Adblock bietet diese Möglichkeit aber von Haus aus nicht (jedenfalls nicht zum Zeitpunkt dieses Blogbeitrags). Dafür kann man sich aber ein Add-On namens Element Hiding Helper herunterladen.
Nach der Installation erscheint ein weiterer Menüpunkt, sobald man auf das Adblock  Symbol klickt, nämlich „Select an element to hide“:

Dadurch öffnet sich im Browser der „Element Hiding Helper“, hier auf der linken Seite. Rechts unten befindet sich die „fliegende Messagebox“ von Focus.de:

Fährt man nun mit der Maus über ein Objekt auf der Webseite, wird dieses rot umrandet. Mit den Tasten W oder N kann man die Auswahl erweitern oder einengen. Mit „H“ kann man die Textbox verstecken, falls sie im Weg ist.

In diesem Fall fahre ich mit der Maus über die eingeblendete Messagebox und drücke die Taste W so oft, bis möglichst das grösste DIV Element des Objekts angezeigt bzw. rot umrandet wird. Dabei wird unten in Gelb der Name des DIV Elements eingeblendet, das im Quelltext der Webseite für die Messagebox zuständig ist, nämlich „flying_mbox“.
Wenn man sich sicher ist, mit W und N das richtige Element gefunden zu haben, drückt man „S“ für Select, damit öffnet sich ein Dialog mit dem entsprechenden Filtervorschlag:

Hier kann man den Filter noch einmal anpassen, aber mit der Domain „focus.de“ und dem Namen des DIV Elements (flying_mbox) sind alle Voraussetzungen erfüllt. Nun die Regel einfach mit „Add element hiding rule“ hinzufügen und die dämliche „fliegende Messagebox“ ist Geschichte.

Die soeben erstellte Regel findet man anschliessend in der Filterliste von Adblock Plus wieder, unter „Custom Filters“ oder wie das eben bei euch eben heisst, falls ihr die deutsche Version habt. Wenn ihr beim Erstellen nicht das richtige DIV Element erwischt habt, könnt ihr die Regel dort wieder löschen oder bearbeiten.

Dies war nur ein Beispiel und möglicherweise hat sich Focus in 5 Jahren vielleicht was Neues ausgedacht oder nennt das Dingens anders, aber das soll ja nur demonstrieren, wie man ein Objekt auf einer Webseite entfernt.

uBlock

Mit Adblock Plus war ich jahrelang zufrieden, bis in der letzten Zeit immer mehr Werbung durchkam, und damit meine ich nicht nur „akzeptable Werbung“, sondern auch bezahlte.

Die Webseitenbetreiber lassen sich ausserdem immer neue Methoden einfallen, um Werbeblocker zu umgehen. Wie bereits gesagt handelt es sich bei Adblock und seine Varianten um den bekanntesten Werbeblocker und steht daher besonders im Focus. So kann ich mit Adblock Plus beispielsweise bild.de nicht besuchen, während das mit anderen Werbeblockern problemlos funktioniert (jedenfalls zum Zeitpunkt dieses Blogbeitrags).

Mittlerweile bin ich daher auf uBlock umgestiegen. Der funktioniert meiner persönlichen Meinung nach sogar besser als Adblock und ist schon von Haus aus mit einem „Element Picker“ zum Entfernen von Objekten ausgestattet. Es sind auch die gleichen Filterlisten wie bei Adblock verfügbar, uBlock bietet aber mehr Möglichkeiten als Adblock Plus, was beispielsweise die Rechte von Scripten angeht.

Klickt man nach der Installation von uBlock auf das Symbol im Browser, sieht man folgendes Menü:

Auf den ersten Blick etwas verwirrend, aber in der Mitte sieht man, für welche der verbundenen Domains Scripte erlaubt oder verboten sind. Dabei wird zwischen permanenten und temporären Rechten unterschieden, auf die ich in diesem Blogbeitrag aber nicht weiter eingehen werde. Auf der rechten Seite findet man einen dicken blauen Knopf zum aktivieren/deaktivieren von uBlock und darunter das Symbol einer Pipette, mit dem man den „Element Picker“ aufruft.

Beispielsweise stört mich auf Focus.de auch, dass mich auf der linken Seite ständig eine Leiste mit Knöpfen verfolgt. Ist nicht so, dass die jetzt ein Ärgernis wäre, aber ich finde sie halt einfach nervig.

Um sie zu entfernen, ruft man über das Pipetten-Symbol den „Element Picker“ auf und fährt mit der Maus über das gewünschte Objekt. Nach einem Mausklick öffnet sich die rechte untere Dialogbox. Hier kann man auswählen, welches DIV Element entfernt werden soll. In diesem Fall wird „article-social“ vorgeschlagen. „Das übergeordnete Element „article-social-holder“ ginge natürlich auch.

Per Vorschau kann man noch überprüfen, ob das Element wirklich das Gesuchte ist und dann mit „Create“ den Filter endgültig erstellen. Die nervige Social-Media-Leiste ist damit verschwunden.

Wenn man jetzt wieder auf das uBlock Symbol im Browser und danach auf die Titelzeile „ublock Origin 1.10.6“ klickt, kommt man ins Hauptmenü von uBlock. Euren soeben erstellten Filter findet ihr unter „My filters“.

Völlig egal, ob man nun uBlock oder Adblock mit dem „Element Hiding Helper“ benutzt, die Beispiele zeigen, wie man leicht Werbung oder sonstige Objekte auf Webseiten entfernen kann, ohne sich dafür mit der Scriptsprache beschäftigen zu müssen. Leider geht das nicht mit Elementen, deren Namen beispielsweise per Zufallsgenerator erzeugt werden oder anderen fiesen Scripten, aber für ein Grossteil der Objekte lässt sich so leicht ein Filter erstellen.

Falls eure regelmässig besuchten Webseiten ebenfalls überflüssige Sachen enthalten, wie Popups, Sidebars mit „Partnerangeboten“ oder bezahltes „Trending“, das euch nicht interessiert, dann greift einfach mal zum Element Picker und räumt dort ein wenig auf.