Vivaldi Browser Modifizierungen

luetage

Die Vivaldi Benutzeroberfläche ist webbasiert, also vornehmlich in HTML, CSS und Javascript programmiert. Das Rendering übernimmt dabei Chromium. Diese Technik gleicht dem von Github entwickelten Electron Framework und ermöglicht es Nutzern sowohl auf die Oberfläche zuzugreifen, als sie auch zu modifizieren. Wie das genau funktioniert wollen wir uns nun ansehen.

CSS Modifikationen

Der Vivaldi Browser unterstützt CSS Mods nativ. In der Vergangenheit mussten die CSS Dateien direkt in das Programm kopiert werden; heutzutage greift Vivaldi auf einen benutzerdefinierten externen Ordner zu, in dem eine beliebige Anzahl von CSS Dateien abgelegt werden kann. Die Dateien werden während des Ladevorgangs (dem Öffnen eines neuen Fensters) eingespeist und von Vivaldi verarbeitet. Folgend eine Anleitung dazu nebst passendem CSS Code, um zu testen ob das Setup auch funktioniert.

Ordner außerhalb Vivaldis anlegen, beliebiger Name.
Textverarbeitungsprogramm öffnen. Niemals Word verwenden, auf Windows ist Notepad ein passendes Programm. Code kopieren und einfügen: .toolbar-mainbar {color: red !important;}. Die Datei in den Ordner speichern. Die Datei muss die Endung .css haben (z.B. uimod.css).
Vivaldi starten und die interne Seite vivaldi://experiments öffnen. Einen Haken neben dem Eintrag »Allow for using CSS Modifications« setzen.
Die Einstellungen öffnen (⇒ vivaldi://settings/appearance) und unter »Benutzerdefinierte Änderungen der Benutzeroberfläche« die Schaltfläche »Ordner auswählen...« klicken. Im neuen Fenster zum zuvor erstellten Ordner navigieren und bestätigen.
Vivaldi neu starten. Die Adressleiste sollte nun, so alles geklappt hat, rote Elemente zeigen.

Javascript Modifikationen

Während CSS Mods harmlos sind, können Javascript Mods den Browser unbenutzbar machen. In extremen Fällen könnte das zum Datenverlust führen. Von der Gemeinschaft verfasste Modifikationen gehen meist nicht so weit und waren bisher immer zuverlässig. Wenn doch einmal ein Browser Fenster nicht laden sollte, lässt sich das beheben indem man entweder den Mod entfernt, oder den Fehler korrigiert. Das Vivaldi Team unterstützt Modifikationen nicht offiziell und übernimmt keinerlei Verantwortung. Auch sollten etwaige Bugs, die im Browser auftreten, immer ohne laufende Modifikationen jedweder Art gegengeprüft werden. Soviel zu Warnungen.

Im Gegensatz zu CSS müssen Javascript Mods direkt in das Vivaldi Programm kopiert werden. Im Zuge von Vivaldi Updates wird jedesmal das gesamte Programm ausgetauscht, wodurch Modifikationen neuerlich durchgeführt werden müssen.

Seite vivaldi://about öffnen und den Programm‐Pfad vormerken (»Ausführbarer Pfad«).
Externen Dateimanager öffnen, Pfad ansteuern und nach dem resources Ordner suchen.
Javascript Datei erstellen (z.B. uimod.js) und im Ordner speichern. Immer auch eine Kopie der Datei extern speichern (Backup!).
Die Datei browser.html befindet sich im selben Ordner. In einem Textverarbeitungsprogramm öffnen und gegen Ende direkt vor dem schließenden </body> Tag diese Zeile einfügen: <script src="uimod.js"></script>. Das lädt unsere Datei. Der Name der Datei kann auch hier frei gewählt werden, muss aber übereinstimmen. Es können beliebig viele Dateien geladen werden.
Vivaldi neu starten.

Dieser Vorgang kann mit einem geeigneten Bash‐Skript auch automatisiert werden.

Entwicklerwerkzeuge

Mit Entwicklerwerkzeugen ist es uns möglich die Benutzeroberfläche zu untersuchen und Fehler in der Konsole zu prüfen. Allerdings müssen wir die Werkzeuge erst extra laden. Hier drei verschiedene Varianten:

Seite vivaldi://inspect/#apps/ öffnen und “inspect” unterhalb der ersten Zeile klicken.
Seite vivaldi://settings/ in einem Tab öffnen und Entwicklerwerkzeuge laden.
Als Befehlskette (Schnellbefehl, Tastaturkürzel, Mausgeste, oder Menüeintrag):
1. Link in neuem Tab öffnen
  Befehlsparameter: vivaldi://experiments/
2. Verzögerung
  Befehlsparameter: 100
3. Entwicklerwerkzeuge
4. Tab schließen

Links

https://forum.vivaldi.net/category/52/modifications
https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/CSS_basics
https://developer.mozilla.org/de/docs/Learn/Getting_started_with_the_web/JavaScript_basis

luetage

Hab die Befehlskette um die Entwicklerwerkzeuge für die Benutzeroberfläche zu öffnen jetzt nachgetragen.