LanguageVerwandte Erweiterungen:
Eigene Chrome Themes erstellen
Google Chrome Themes sind bei den Nutzern sehr beliebt, und man findet Tausende davon im Internet, wobei die größte Quelle der Chrome Web Store ist.
Aber viele neugierige Nutzer möchten gerne ihre eigenen persönlichen Themes erstellen oder sie sogar mit Freunden und der Außenwelt teilen.
Dieses kleine Tutorial zeigt Ihnen die innere Struktur von Google Themes und wie Sie Ihre eigenen aus beliebigen Bildern erstellen können.
Struktur von Chrome Themes
Ein Chrome Theme ist nichts anderes als ein Add-on, das keinen umfangreichen Quellcode oder Skripte enthält und im Grunde aus zwei Teilen besteht:
- Bilder, die für das Theme selbst verwendet werden
- eine einzelne manifest.json-Datei, die Parameter und Einstellungen zur Gestaltung des Themes enthält
Diese zwei Teile werden dann in eine einzelne Datei mit der CRX-Dateiendung verpackt.
Wie man ein Google Theme manuell vorbereitet
Sie benötigen sicherlich ein geeignetes Hintergrundbild, das Sie für Ihr Theme verwenden möchten, sowie eine Grundidee für Ihr gesamtes Theme. Außerdem brauchen Sie mehrere Softwaretools, um dies zu realisieren:
- Einen Bildeditor. Benutzen Sie any Programm Ihrer Wahl, es gibt zahlreiche Softwaretools für Sie zur Verfügung. Selbst das einfache Microsoft Paint ist ausreichend, aber selbstverständlich können Sie auch professionelle Tools wie Adobe Photoshop oder CorelDraw verwenden.
- Einen Texteditor. Der einfache Editor Notepad genügt, ebenso wie jedes andere ähnliche Programm.
Sobald Sie alles haben, folgen Sie einfach den untenstehenden Schritten, um Ihr eigenes Google Chrome Theme zu erstellen.
Schritt 1: Erstellen Sie ein Verzeichnis mit dem Namen des Themes
Eines der ersten Dinge ist, ein neues Verzeichnis für Ihr Theme anzulegen und es nach Ihrem Theme zu benennen. Zum Beispiel „my_new_theme“. Erstellen Sie in diesem Ordner einen weiteren mit dem Namen „images“, der alle Bilder Ihres neuen Themes enthalten wird.
Schritt 2: Erstellen Sie die Bilder für Ihr Theme
Um ein funktionierendes Theme zu erstellen, benötigen Sie vier grundlegende Bildelemente oder fünf, wenn Sie ein eigenes persönliches Logo zum Theme hinzufügen möchten, was jedoch optional ist. Alle in Google Chrome Themes verwendeten Bilder müssen im PNG-Dateiformat vorliegen.
Wenn Ihre Bilder in einem anderen Format vorliegen, müssen Sie diese zuerst mit beliebiger Software oder Online-Konvertierungstools in PNG umwandeln.
Hier ist die Liste der einzelnen Bildelemente mit den entsprechenden Anforderungen:
Theme Rahmen (frame.png)
Dieses Bild wird für den Rahmen Ihres neuen Google Chrome Themes verwendet und als Hintergrundbild der Buttons „Close“, „Minimize“ und „Maximize“. Wenn Sie dieses Bild nicht verwenden, verhält sich Ihr erstelltes Chrome Theme wie das Standard-Chrome Theme und zeigt die native Titelzeile des Betriebssystems an.
Das Theme Rahmen-Bild benötigt eine Mindesthöhe von 30px ohne Beschränkung der Breite. Dieses Element wird üblicherweise mit den dunkelsten Farben gestaltet.
Theme Toolbar (toolbar.png)
Dieses Themeelement wird als Hintergrund der Buttons „Forward“, „Back“ und „Refresh“ sowie der Erweiterungsleiste angezeigt. Es repräsentiert sowohl den aktuellen Tab als auch die Toolbar.
Es benötigt eine Mindesthöhe von 120px ohne Beschränkung der Breite.
Theme Tab Hintergrund (tab.png)
Wird für inaktive Tabs angezeigt, wenn mehrere Tabs gleichzeitig geöffnet sind. Die Mindesthöhe beträgt 65px, die Breite ist unbegrenzt.
Neuer Tab Seitenhintergrund (background.png)
Dies ist das Hauptbild, das beim Öffnen eines neuen Tabs angezeigt wird. Die empfohlene Mindestbildgröße beträgt 800x600, aber für das beste Aussehen verwenden Sie Wallpaper, die der Bildschirmauflösung des Displays entsprechen, auf dem das Theme verwendet wird. Dieses Bild sollte die hellsten Farben für die beste visuelle Präsentation verwenden.
Theme Attribution (theme_ntp_attribution.png)
Das Erstellerlogo, das unten rechts im Google Chrome Theme angezeigt wird. Es ist rein optional.
Sobald Sie alle Bildelemente vorbereitet haben, verschieben Sie sie in das Verzeichnis „images“, das Sie in Schritt 1 erstellt haben. Der Ordner sollte somit 4-5 Bilder enthalten.
Schritt 3: Erstellen Sie die Manifest-Datei
Jedes Google Chrome Add-on, das als Webanwendung oder Theme installiert werden kann, besitzt eine eigene „manifest.json“-Datei. Diese Datei liefert dem Browser Informationen über das Theme.
Mehr Informationen zum JSON-Dateiformat finden Sie in unserer Datenbank.
Das Manifest enthält Code für 4 verschiedene Bereiche: Name, Bilder, Farben, Tönungen und Eigenschaften. Ein Beispielcode für die manifest.json-Datei sehen Sie unten.
|
{ "version": "1.0", "name": "my_new_theme", "theme": { "images" : { "theme_frame" : "images/frame.png", "theme_toolbar" : "images/toolbar.png", "theme_ntp_background" : "images/background.png", "theme_tab_background" : "images/tab.png", "theme_ntp_attribution" : "images/theme_ntp_attribution.png" }, "colors" : { "ntp_link": [255,255,255], "ntp_text": [255,255,255], "ntp_section_link": [255,255,255], "ntp_section_text": [10 , 17 , 27], "ntp_background": [10 , 17 , 27], "frame": [10 , 17 , 27], "toolbar": [10 , 17 , 27], "tab_text": [255,255,255], "tab_background_text": [10 , 17 , 27], "bookmark_text": [255,255,255] }, "tints" : { "buttons" : [0.33, 0.5, 0.47], "frame_inactive": [0.50, 0.50, 0.50], "frame_incognito_inactive": [0.50, 0.50, 0.50] }, "properties" : { "ntp_background_alignment" : "bottom", "ntp_background_repeat": "no-repeat" } } } |
Öffnen Sie eine neue Datei im Notepad, kopieren Sie den Code hinein und speichern Sie diese unter dem Namen manifest. Danach ändern Sie die Dateiendung von txt auf json.
Nachdem Sie Ihre eigene manifest.json-Datei erstellt haben, sehen wir uns an, was jeder Abschnitt bedeutet, bewirkt und was Sie bearbeiten können.
Name
Das ist der Name Ihres neuen Google Chrome Themes. Der Name in der manifest.json-Datei sollte mit dem in Schritt 1 verwendeten Namen übereinstimmen.
Bilder
Die Bilder aus Schritt 2 unseres Leitfadens sind in diesem Teil der manifest.json-Datei definiert. Wenn Sie den Dateinamen oder Ordner Ihrer Bilder ändern, müssen Sie dies auch in der manifest.json-Datei anpassen.
Farben
Jedes Element in diesem Abschnitt definiert die im Theme verwendeten Farben. Dabei gibt es nur ein paar Dinge zu beachten:
- Die Textfarbe des Download-Toolbar-Buttons ist dieselbe wie die Textfarbe der Lesezeichen.
- Die Hintergrundfarbe der Statusleiste ist dieselbe wie die Farbe der Toolbar, die Sie wählen.
- Die Textfarbe der Statusleiste ist dieselbe wie die der Tab-Textfarbe, die Sie wählen.
Tönungen
Das Tönungs-Element gibt die Farbnuance für alle Icons in allen Buttons der Toolbar an (Vorwärts, Zurück, Aktualisieren usw.). Jede Tönung hat einen Fließkommawert zwischen 0 und 1 oder -1. Der Wert -1 bedeutet, dass keine Änderung der Farbe dieses Elements erfolgt. Die Tönungswerte sind als [Farbton, Sättigung, Helligkeit] angeordnet, und Sie können Werte wie beispielsweise 0.256, 0.2, -0.4 verwenden, um die Farbe zu definieren. Sie können die Werte anpassen, damit die Buttons sich anpassen oder hervorstechen.
Eigenschaften
Der Abschnitt Eigenschaften in der manifest.json-Datei wird verwendet, um die Einstellungen für das Haupt-Hintergrundbild festzulegen. Das Hintergrundbild kann oben, unten oder in der Mitte des Browsers ausgerichtet werden, und Sie können wählen, ob es entlang der x- oder y-Achse wiederholt wird oder überhaupt nicht.
Schritt 4: Verpackung und Vorschau Ihres Themes
Jetzt sollten Ihre Bilder im Verzeichnis "my_new_theme/images" und eine manifest.json-Datei im Verzeichnis "my_new_theme" vorliegen.
Um Ihr neues Theme zu testen, öffnen Sie Ihren Google Chrome Internetbrowser, geben Sie "chrome://extensions" in die Adresszeile ein und drücken Sie die Eingabetaste.
Sobald Sie sich dort befinden, klicken Sie rechts neben dem Link "Developer mode" auf das "+". Nun sollten einige Optionen auf der Seite erscheinen. Klicken Sie auf "Load unpacked extension" und navigieren Sie auf Ihrem Computer zum Verzeichnis "my_new_theme". Wählen Sie diesen Ordner aus und bestätigen Sie mit OK. Wenn sich eine korrekte manifest.json-Datei in diesem Ordner befindet, lädt Chrome Ihr neues Theme. Prüfen Sie nun Ihren Browser, ob alles in Ordnung ist.
Sie können diesen Vorgang solange wiederholen, bis Sie Ihr eigenes Google Theme perfekt angepasst haben. Sobald Sie mit Ihrem angepassten Google Chrome Theme zufrieden sind, drücken Sie den Button "Pack extension", und Chrome erstellt das Theme und speichert es im Verzeichnis "my_new_theme" mit der CRX-Dateiendung. Es wird auch eine Datei mit der PEM-Dateiendung erstellt, die ein privater Schlüssel für Ihr Google Theme ist und es Ihnen ermöglicht, diese Erweiterung später zu aktualisieren, wenn Sie Ihr Theme in die Chrome Extensions Gallery hochladen.
Wenn alles richtig funktioniert, zeigt Ihnen Google Chrome an, dass die .crx- und .pem-Dateien erstellt wurden und zeigt auch den Speicherort dieser neuen Dateien an. Nachdem Sie ein paar Google Chrome Themes erstellt haben, werden Sie sehen, dass es wirklich nicht so schwer ist.
Wie man Chrome Themes leichter erstellen kann
Sie können natürlich schneller vorgehen, wenn Sie einige der dedizierten Tools für Chrome Themes verwenden. Eines dieser Tools war das mittlerweile eingestellte Theme Creator. Sie können es noch aus dem Web Store herunterladen und verwenden, aber es wird nicht mehr von Google unterstützt und es kann zu Fehlern kommen. Trotzdem ist es eine der bequemsten Methoden, um schnell neue Chrome Themes zu erstellen.