Vivaldi

  • Browser
  • Mail
  • News
  • Community
  • About

Navigation

    • Browser
    • Mail
    • News
    • Community
    • About
    • Register
    • Login
    • Search
    HomeBlogsForumHelpThemes
    • Home
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    1. Home
    2. Local Forum
    3. Deutsch (German)
    4. Vivaldi Browser Modifizierungen

    Vivaldi Browser Modifizierungen

    Deutsch (German)
    1
    2
    1008
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • luetage
      luetage last edited by 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.

      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 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

      github ◊ vfm

      1 Reply Last reply Reply Quote 4
      • luetage
        luetage last edited by

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

        github ◊ vfm

        1 Reply Last reply Reply Quote 1
        Loading More Posts
        • Oldest to Newest
        • Newest to Oldest
        • Most Votes
        • Reply as topic
        Log in to reply
        • 1 / 1
        • First post
          Last post

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

        Copyright © Vivaldi Technologies™ — All rights reserved. Privacy Policy | Code of conduct | Terms of use | Vivaldi Status