Vivaldi Browser Modifizierungen
-
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
window.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 zweiten Zeile (window.html) klicken. - Seite
vivaldi://settings/
in einem Tab öffnen und Entwicklerwerkzeuge laden. - Als Befehlskette (Schnellbefehl, Tastaturkürzel, Mausgeste, oder Menüeintrag):
- Link in neuem Tab öffnen
Befehlsparameter:vivaldi://experiments/
- Verzögerung
Befehlsparameter:100
- Entwicklerwerkzeuge
- Tab schließen
- Link in neuem Tab öffnen
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_basics -
Hab die Befehlskette um die Entwicklerwerkzeuge für die Benutzeroberfläche zu öffnen jetzt nachgetragen.