Skip to content

Eigene Themes für Google Chrome erstellen

Der 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

foto

Nachher

chrome_theme

Schritt 1

Ihr erstellt einen Ordner, ich habe den Ordner "Cossi" genannt. In diesem Ordner erstellt ihr zusätzlich einen Ordner "Images"

chrome_dateien

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

chrome_bilder

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.

chrome_manifest

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.

chrome_fehler

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

ITrig on : Blogstatistik für Januar 2011

Show preview
Schon wieder ist ein Monat vergangen, darum wie jeden Monat ein paar Statistiken, dieses Mal für den Januar 201. Besucher Die Seitenzugriffe konnten sich knapp über der 6000 Marke halten, genauso wie die Besucheranzahl die 2500 halten konnte. Im Verg

ITrig on : Voll auf die 12 - Die Chrome Party geht weiter

Show preview
Gestern hat Google dann das Dutzend voll gemacht und den hauseigenen Browser Chrome auf Version 12 angehoben. Mit im Gepäck hat der neue Browser die üblichen Verbesserungen im Bereich Sicherheit, Datenschutz und Darstellung. So wurde Safe Browsing in

Comments

Display comments as Linear | Threaded

Anonymous on :

wie erstellt man den so ein manifest.json ???

Guenny on :

Es reicht eine einfaceh Textdatei zu erstellen. Diese kannst du dann in manifest.json umbenennen

Amman 7 on :

Muss ich jetzt alles ändern bei der manifest.json, aber ich habe auch Cossi und gleich benennt wie du. Aber bei mir kommt dann eine meldung: Manifest datei fehlt oder kann nicht geleesen werden... was soll ich jetzt machen??? und du hast zum beispiel geschrieben: mindestens 30 pixel höhe und wenn es mehr ist ist es dann egal oder muss es genau 30 sein?

Amman 7 on :

bei mir kommt eine meldung: manifest datei kann nicht gelesen werden oder ist nicht erhalten.. was soll ich jetzt machen??

gordon on :

i hab genau das selbe problem aber oben ist beschrieben worden, dass der fehler gemeldet wird(also wo der fehler ist) aber bei mir kommt das nicht. liegt es daran, dass du dass mit windows7 gemacht hast? denn i hab nur windows XP mfg gordon !need help!

Anonymous on :

bei mir klappts auch nich steht auch dort ins nich forhanden oder lesbar aber steht nich wo der fehler in editor is:( is das mit windows7 und windowsXP unterschiedlich? wie i sehe hast du nämlich mit windows7 gearbeitet i hab nur XP need help

Guenny on :

Schick mir doch einfach kurz deine Datei oder veröffentliche sie hier, dann kann ich dir bei der Fehlersuche helfen. Soweit ich weiß ist es egal ob XP oder 7, sollte auf beiden Systemen funktionieren. Oft fehlt nur ein Komma oder eine schließende Klammer, das wird leicht übersehen. Gruß Guenny

LuzifaHeart on :

Hallo Guenny :) Ich hab jetzt das ganze Internet durchforstet und keine Antwort auf mein Problem gefunden :( Also, ich hab alle Bilder so erstellt, wie es hier bei dir steht und auch die Manifest-Datei erstellt. Dazu habe ich deinen Text kopiert und lediglich den Namen verändert, da der Rest ja von den Bildnamen beibehalten worden ist, damit ich nicht durcheinander komme :) Nur wenn ich es dann hochladen möchte, zeigt mir mein Browser sofort an, dass die Manifest-Datei nicht vorhanden oder nicht lesbar sei. Hab sie mehrmals gelöscht und neu erstellt und es geht nicht :( Ob jetzt gezippt oder ungezippt, macht da keinen Unterschied und einen Fehler kann er ja auch nich anzeigen, da die Datei nich mal gelesen wird. Weißt du vielleicht weiter? Wäre super, wenn du mir da helfen könntest, im Internet hab ich bis jetzt nichts gefunden :( Liebe Grüße und dickes Lob an deine Page :) Luzifa

Yannik L. on :

hey guenny, ich habe jetzt das problem, das bei mir die fehlermeldung kommt, dass die .txt Datei fehlt oder nicht lesbar ist. was kann man da machen? Danke schonmal im voraus, Yannik

LJ on :

Danke! Das ist echt hilfreich!

cb on :

also bei mir fnzd es. aber leider nur das background.png die anderen leider nicht :( warum? und zu den anderen kann es sein das ihr ne manifest.txt Datei habt und keine manifest.jsno?? wenn dann bitte die endung auf jsno umbenennen^^ mfg

Yannik L. on :

??? wieso jetz auf einmal jsno?!?! oben steht aber die ganze zeit json... was ist denn jetz richtig?

Guenny on :

Richtig ist natürlich JSON. Das steht für JavaScript Object Notation, siehe http://de.wikipedia.org/wiki/JavaScript_Object_Notation PS. Falls was nicht klappt nutzt doch den neuen Theme Generator :) Gruß Guenny und viel Erfolg

Chris on :

RICHTIG TOLLE ANLEITUNG! Hab es gleich hinbekommen, nur beim hintergrundbild musste ich etwas wegschneiden damit es gut aussieht.

Ben on :

Also bei mir hat es gut geklappt, hatte soweit keine Fehler drin :D Ich finde es macht Spaß so ein Design Selber zu machen.. Gruß Ben ;)

Add Comment

Enclosing asterisks marks text as bold (*word*), underscore are made via _word_.
E-Mail addresses will not be displayed and will only be used for E-Mail notifications.
Form options