Eigene Themes für Google Chrome erstellen
Posted by Guenny onDer Chrome Browser aus dem Hause Google wird ja immer beliebter. Wie vom Konkurrent Firefox unter dem Namen "Personas" bekannt, kann man bei Google Chrome ebenfalls die Oberfläche nach dem eigenen Geschmack einrichten. Wem die vorhandenen Chrome Themes nicht genügen, der kann mit einfachen Mitteln sein eigenes Theme erstellen. Alles was dazu benötigt wird, ist ein Foto und ein Bild Editor (IrfanView reicht hier völlig aus)
Anfangen wollen wir mit dem Ergebnis, damit ihr eine Vorstellung habt, was am Ende dabei heraus kommen soll
Vorher
Nachher
Schritt 1
Ihr erstellt einen Ordner, ich habe den Ordner "Cossi" genannt. In diesem Ordner erstellt ihr zusätzlich einen Ordner "Images"
Schritt 2
Nun müsst ihr die einzelnen Elemente für eure Oberfläche erstellen. Dazu reicht ein einfaches Bildbearbeitungsprogramm, wie IrfanView. Damit könnt ihr einzelne Bilder aus dem Hauptbild ausschneiden. Insgesamt werden 4 Elemente benötigt. Wobei immer nur auf die Höhe der Bilder geachtet werden muss, die Breite ist nicht so wichtig.
- Frame: Dieses Bild wird später den Hintergrund in der oberen Leiste darstellen. Man wählt also am besten einen etwas dunkleren Ton, damit sich die die Tabs später davon abheben. Dieser Frame solle mindestens 30 Pixel hoch sein, die Breite ist egal, das Format muss *png sein. Am Ende solltet ihr ein Bild "frame.png" mit in eurem Image Ordner liegen haben
- Toolbar: Dieses Bild stellt später die Farbe für die aktiven Tabs samt Tableiste bereit. Das Bild sollte mindestens 120 Pixel hoch sein und als "toolbar.png" im Ordner "Images" abgespeichert werden.
- Tab Background: Wie der Name schon sagt ist dieses Bild für den inaktiven Tab zuständig. Es sollte mindestens 65 Pixel hoch sein und wird als "tab.png" im Ordner "Images" abgelegt.
- Page Background: Zu guter Letzt fehlt noch das Hintergrundbild. Dieses sollte Minimum 800x600 Pixel haben. In meinem Fall habe ich es auf meine Bildschirmauflösung 1280x024 angepasst und als "backgroung.png" unter "Images" abgespeichert
Schritt 3
Nun wird noch eine sogenannte Manifest Datei benötigt (manifest.json). Diese stellt die nötigen Informationen für das Browser Theme bereit.
In dieser Datei sind die Pfade zu den Bildern, sowie der Name des Ordners hinterlegt. Zusätzlich können noch Informationen zu Farbe, Größe, etc. abgespeichert werden. Um so eine Datei zu bauen, erstellt ihr eine neue Textdatei und kopiert folgende Befehle einfach hinein (Den Pfad und die Namen müsst ihr bei Bedarf natürlich anpassen). Das ganze speichert ihr dann in eurem Theme Ordner unter "manifest.json" ab.
{
"version": "1.0",
"name": "Cossi",
"theme": {
"images" : {
"theme_frame" : "images/frame.png",
"theme_toolbar" : "images/toolbar.png",
"theme_ntp_background" : "images/background.png",
"theme_tab_background" : "images/tab.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]
},
"properties" : {
"ntp_background_alignment" : "bottom",
"ntp_background_repeat": "no-repeat"
}
}
}
Sollten Fehler in der Steuerdatei vorhanden sein, so werden diese beim ersten Test des Themes samt Zeilennummer angezeigt und können einfach behoben werden.
Schritt 4
Nachdem alle Schritte erfolgreich abgeschlossen worden sind, kann es nun ans Testen des erstellen Themes gehen. Dazu öffnet man den Chrome Browser und tippt in der Adressleiste "chrome://extensions" ein. Danach gelangt man auf eine Seite wo rechts oben "Entwicklermodus" steht. Diesen aktiviert man per Klick auf "+". Nun kann man über "Entpackte Erweiterung laden" sein Theme, in unserem Fall den Ordner "Cossi" öffnen und bekommt sein eigenes Chrome Theme angezeigt.
Sollte die Manifest Datei fehlerhaft sein, bekommt ihr spätestens jetzt eine Meldung angezeigt, aus der ihr entnehmen könnt wo genau sich der Fehlerteufel eingeschlichen hat.
Wenn ihr alle Fehler behoben habt und mit dem Aussehen eures Themes zufrieden seid, könnt ihr im gleichen Menü die "Erweiterung packen" und als offizielles Theme Format abspeichern. Viel Spaß beim ausprobieren. Quelle lifehacker
[Update]
Der Chrome Theme Generator könnte für alle hilfreich sein, die mit der manifest Datei oder anderem Probleme haben.
[Update 2]
Hier findet ihr weitere Möglichkeiten (Theme Creator App) für das eigene Chrome Design.
Trackbacks
Trackback specific URI for this entryThis link is not meant to be clicked. It contains the trackback URI for this entry. You can use this URI to send ping- & trackbacks from your own blog to this entry. To copy the link, right click and select "Copy Shortcut" in Internet Explorer or "Copy Link Location" in Mozilla.
Comments
Display comments as Linear | ThreadedAnonymous on :
Guenny on :
Amman 7 on :
Amman 7 on :
gordon on :
Anonymous on :
Guenny on :
LuzifaHeart on :
Yannik L. on :
LJ on :
cb on :
Yannik L. on :
Guenny on :
Chris on :
Ben on :