Skip to content

Einfach eigene Themes für Google Chrome online erstellen

Im Januar hatte ich einen Artikel veröffentlicht, in dem ich euch das Erstellen von Themes für Google Chrome etwas näher bringen wollte. Den Kommentaren dort ist zu entnehmen, dass einige mit der manuellen Themeerstellung so ihre Probleme haben. Meistens hängt an es an der manifest Datei oder beim endgültigen Packen des Themes.

Für diejenigen die einen einfacheren Weg wählen möchten, gibt es inzwischen ein praktisches Online Tool. Sozusagen ein Chrome Theme Creator mit dem ihr einfach euer eigenes Theme zusammen klicken könnt und keine Programmierkenntnisse benötigt. Ich möchte euch heute zeigen wie das Schritt für Schritt funktioniert.

Eigenes Chrome Theme online erstellen

  • Chrome Theme Creator aufrufen und einen Theme Namen vergebene. Wir nennen es "ITrig"
  • Bei Bedarf kann noch eine Beschreibung vergeben werden "ITrig zeigt wies geht"

chrome-theme-creator

  • Der erste Reiter ist nun schon erfolgreich ausgefüllt und wir können auf "Images" wechseln
  • Hier gibt es nun verschiedene Frames, d.h. einzelne Bereiche der Browser Oberfläche, die ihr individuell anpassen könnt. Sobald ihr mit der Maus über einen Framebereich fahrt, wird dieser auf der rechten Seite mit einem roten Rahmen hervorgehoben und ihr wisst was gemeint ist.
    • theme_frame: Bereich hinter den Tabs
    • theme_toolbar: Aktueller Tab samt Toolbar (sollte mindestens 119 Pixel hoch sein)
    • theme_tab_background: Inaktive Tabs
    • theme_ntp_background: Haupthintergrund
    • theme_frame_overlay: Bild das links oben im Eck erscheint
    • theme_button_background: Toolbar Schaltflächen
    • theme_ntp_attribution: Bild das unten "erstellt von" anzeigt
    • theme_window_control_background: Hintergrund für Kontrollschaltflächen wie "vergrößern" oder "schließen"
  • In unserem Fall möchten wir den Hintergrund anpassen, sowie das Bild für "Design von" einbinden
  • Passt ein hochgeladenes Bild nicht, könnt ihr es per Klick wieder löschen. Sollte es von der Größe nicht passen, können diese in meinem alten Artikel nachgelesen werden.

chrome-theme-creator-bilder

  • Nachdem wir nun ein Logo und ein Hintergrundbild eingefügt haben, können wir zum nächsten Reiter "Color" wechseln. Hier können einzelnen Farben weiter angepasst werden.
  • Sobald man einen Bereich ändern möchte, klickt man auf die jeweilige Farbe und kann einen neuen Farbton aus einer Farbauswahl wählen. Zusätzlich werden kleine Infos zum jeweiligen Bereich eingeblendet

chrome-theme-creator-farben

  • Sind alle Farben angepasst kann in den "Tint" Bereich gewechselt werden. Hier handelt es sich um einzelne Farbtöne die in den Bereichen Buttons, Frames, inaktive Frames oder Hintergrund Tab angepasst werden können.

chrome-theme-creator-farbtoene

  • Im letzten Schritt muss das Theme noch gepackt werden. Das kann im Reiter "Pack" erledigt werden. Dort gibt es folgende Optionen
    • Packen und installieren
    • Packen und Theme downloaden
    • Packen und Zip downloaden
    • Zip hochladen

chrome-theme-creator-packen

  • Abschließend kann nun das neue Theme bewundert oder bei Bedarf als ZIP Datei direkt bearbeitet werden. Diese beinhaltet die manifest.json und alle verwendeten Bilder. Der Chrome Theme Creator kann natürlich ebenfalls verwendet werden auch den Upload von Dateien unterstützt.
  • Wer das eben erstellte Theme verwenden möchte, der kann es gerne downloaden

chrome-theme-ITrig

via

Eigene App für Google Chrome erstellen

Der Chrome Web Store ist ein buntes Sammelbecken für alle Arten von Apps, darunter finden sich Extensions, Spiele oder Webseiten. Mit wenigen Schritten kann jeder seine eigene App erstellen. In diesem Artikel dreht es sich um sogenannte "Hosted Apps", das sind Anwendungen, die der Nutzer nicht lokal abspeichern kann und die im Bedarfsfall einen eigenen Server benötigen. Die andere Variante, weclhe hier nicht behandelt wird, sind die sogenannten "Packaged Apps", diese bestehen in Normalfall aus HTML und CSS.

Voraussetzung

Für eine eigene Hosted Applikation im Chrome Browser werden grundsätzlich zwei Dateien benötigt. Eine Manifest Datei und ein Icon. Wobei das Icon eure Anwendung im Browser präsentiert, die Manifest Datei ist im JSON Format gehalten und beinhaltet die Konfiguration für eure Anwendung.

Das Icon

Wir erstellen im ersten Schritt ein Icon für eine Anwendung. Dieses Icon wird später auf der Chrome Startseite oder im Chrome Web Store zu sehen sein. In unserem Fall machen wir einen Screenshot von ITrig und erstellen mit einem Bildeditor (Irfanview oder Aviary) ein Icon in der Größe 128 x 128 Pixel. Diese Größe ist zwingend notwendig. Soll die Anwendung ein Favicon anzeigen, wird zusätzlich ein Icon in der Größe 16 x 16 Pixel benötigt.

ITrig

Das Icon legen wir in einem zuvor erstellen Ordner "ITrig-App" im PNG Format auf der Festplatte ab.

Die Manifest Datei

Im nächsten Schritt erstellen wir die Manifest Datei. Dazu macht man im bereits erstellen Ordner "ITrig-App" einen Rechtsklick und erstellt ein neues Textdokument. Diese Datei öffnet man in einem Editor und füllt sie mit den unten stehenden Befehlen. Danach benennt man sie in manifest.json um.

{
//Unbedingt noetig
"name": "ITrig",
"version": "1.0",
//Empfohlen
"description": "ITrig - dein Blog rund um die IT Welt",
"icons": {
"128": "ITrig.png"
},
"app": {
"urls": [
"http://www.itrig.de/"
],
"launch": {
"web_url": "http://www.itrig.de"
}
}
}

Unter Namen trägt man den gewünschten Titel ein und hinterlegt zusätzlich eine Versionsnummer. Optional kann eine Beschreibung hinterlegt werden. Wichtig ist die richtige Einbindung des gewünschten Icons "Itrig.png". Weiter muss nun noch die URL zu eurem Blog hinterlegt werden. Achtet darauf, dass alle Klammern wieder schließen, sonst kommt es später zu Fehlermeldungen. Weitere Befehle findet ihr in der Dokumentation

App testen

Um den ersten Entwurf eures Chrome App zu testen, müsst ihr im Browser unter Werkzeug/Tools/Erweiterungen rechts oben den Entwicklermodus aufrufen. Dort könnt ihr unter dem Punkt "Entpackte Erweiterung laden" den zuvor angelegten Ordner "Itrig-App" aufrufen und erhaltet folgendes Ergebnis, falls keine Codefehler in der manifest.json Datei vorhanden sind.

ITrig-App

App im Web Store veröffentlichen

Der erste Entwurf unserer App ist nun lauffähig und kann theoretisch veröffentlicht werden. Die Applikation stellt zwar nur einen Link auf ITrig dar, ist aber laut Chrome Webstore als vollwertige Anwendung anzusehen.

Zuerst muss die Erweiterung gepackt werden. Dazu wählt man in den Erweiterungen den Button "Erweiterung packen" und Chrome erstellt eine .crx und eine .pem Datei. Die .crx Datei enthält die eigentliche Anwendung und kann nun von euch weitergegeben werden oder im eigenen Chrome Browser geöffnet werden. Die .pem Datei wird nur benötigt wenn die Applikation im Chrome Webstore veröffentlicht wurde und aktualisiert werden muss.

ITrig-App-Chrome

Um die Anwendung im Chrome Web Store zu veröffentlichen, muss jedoch einfach eine *.zip Datei aus dem Ordner "ITrig-App" erstellt werden.

Leider ist für die Veröffentlichung einer eigenen Applikation ein Developer Account notwendig, dieser muss per Google Checkout für 5 Dollar verifiziert werden. Googles Checkout unterstützt bisher leider nur Kreditkarten. Wer also keine Kreditkarte besitzt, schaut hier erst einmal in die Röhre und kann das Chrome App nur privat oder auf dem eigenen Blog anbieten.
Finde ich persönlich sehr schade, das nicht einmal Paypal unterstützt wird. Vielleicht ändert sich das in Zukunft ja noch.

Hier für alle Interessenten die fertige ITrig-App zum Download. Zum Installieren einfach in den Browser ziehen. Viel Erfolg