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.

    1. Ordner außerhalb Vivaldis anlegen, beliebiger Name.
    2. 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).
    3. Vivaldi starten und die interne Seite vivaldi://experiments öffnen. Einen Haken neben dem Eintrag »Allow for using CSS Modifications« setzen.
    4. 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.
    5. 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.

    1. Seite vivaldi://about öffnen und den Programm‐Pfad vormerken (»Ausführbarer Pfad«).
    2. Externen Dateimanager öffnen, Pfad ansteuern und nach dem resources Ordner suchen.
    3. Javascript Datei erstellen (z.B. uimod.js) und im Ordner speichern. Immer auch eine Kopie der Datei extern speichern (Backup!).
    4. 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.
    5. 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 zwei verschiedene Varianten:

    • Permanent: Seite vivaldi://flags/ öffnen und die Chromium‐Flag »Debugging for packed apps« suchen und aktivieren. Vivaldi neu starten. Nach Rechtsklick auf ein Element in der Benutzeroberfläche öffnet sich ein Menü; den Befehl »Untersuchen« anklicken. Die Entwicklerwerkzeuge erscheinen in einem neuen Fenster.
    • Ohne Chromium‐Flag: Seite vivaldi://inspect/#apps öffnen und unterhalb der ersten Zeile (Vivaldi chrome-extension://mpognobbkildjkofajifpdfhcoklimli/browser.html) »Inspect« anklicken.

    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


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.