Skip to content

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

Trackbacks

www.my-tag.de on : PingBack

Unfortunately, the contents of this trackback can not be displayed.

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

Andy on :

Hallo, bei mir kommt die Fehlermeldung wenn ich auf "Entpackte Erweiterung laden..." und danach auf meinen Ordner klicke: Manifest-Datei fehlt oder ist nicht lesbar. Was kann ich da tun? MFG

Stefan B. on :

Hast du bei Dateityp "Alle Dateien" und als Dokumentnamen manifest.json gespeichert?

Guenny on :

Der Dateityp ist JSON also manifest.json. Somit Name: manifest Typ: json Falls es bei dir diese Endung nicht anzeigt, musst du das im Explorer erst freischalten (Organisieren/Ordner und Suchoptionen) Gruß Guenny

Selim on :

Wie kann ich das icon neben der suchleiste veröffentlichen?

Doku Matthias on :

Danke für die Top-Anleitung. Leider erhalte ich beim Test "Entpackte Erweiterung laden..." folgende Alert-Fehlermeldung: Could not load extension from 'C:\WebApp'. Manifest is not valid JSON. Unsupported encoding. JSON must be UTF-8. (Google Chrome Version 17.xx)

Gappit on :

Im Editor kannst du bei "Speichern unter" die Codierung wählen. Also: Datei-> Speichern unter -> Codierung -> UTF-8 Bei dir ist da wahrscheinlich Unicode oder ähnliches eingestellt. Hatte das selbe Problem :) Das war zwar leicht zu beheben allerdings kam danach gleich ein weiteres Problem und zwar: Manifest ist not valid JSON. Line: 3 Column: 1 . Dictonary Keys must be quotet. Weiß da vielleicht jemand Rat?

Bitjunkie on :

Das ist leicht zu beheben, genau das Problem hatte ich auch: Wenn du per Drag&Drop den Inhalt übernimmst ist er noch falsch formatiert. Du musst das Dokument erst in eine .txt Datei ändern und dann eine .json draus machen. So hats auf jeden Fall bei mir geklappt.

nemesis on :

Übrigends, ab Chrome - Version 12 muss noch zusätzlich was in die manifest.json eingetragen werden, sonst streikt Chrome mit dem installieren. { //Unbedingt noetig "name": "ITrig", "version": "1.0", // ab Version 12 notwendig "manifest_version": 2, //Empfohlen

nixsss on :

Bei mir kommt immer: Line 17 column:3 Trailing comma is not allowed kann mit jemand helfen was das heißen soll und was ich falsch mache?? danke!

Anonymous on :

dann kontrolliere mal in der Datei im Editor die Zeile 17 , das 3. Zeichen,ob dort alles richtig ist.

Pit on :

Du hast das falsche Encoding gewählt. Nimm als Editor am Besten Notepad++ (Freeware)

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.

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.
CAPTCHA

Form options