In dieser Anleitung erfahren Sie, wie Sie Ihre erste Chrome-App erstellen. Chrome-Apps sind ähnlich strukturiert wie Erweiterungen, sodass aktuelle Entwickler die Manifest- und Paketmethoden erkennen können. Wenn Sie fertig sind, müssen Sie nur eine ZIP-Datei mit Ihrem Code und Ihren Assets erstellen, um Ihre App publish.
Eine Chrome-App besteht aus folgenden Komponenten:
- Das Manifest teilt Chrome mit, um welche App es sich handelt, wie sie gestartet wird und welche zusätzlichen Berechtigungen dafür erforderlich sind.
- Das Hintergrundskript wird verwendet, um die Ereignisseite zu erstellen, die für die Verwaltung des App-Lebenszyklus verantwortlich ist.
- Der gesamte Code muss im Chrome App-Paket enthalten sein. Dazu gehören HTML-, JS-, CSS- und Native Client-Module.
- Auch alle Symbole und sonstigen Assets müssen im Paket enthalten sein.
Schritt 1: Manifest erstellen
Erstellen Sie zuerst die Datei manifest.json
(mit Format: Manifestdateien wird dieses Manifest ausführlich beschrieben):
{
"name": "Hello World!",
"description": "My first Chrome App.",
"version": "0.1",
"manifest_version": 2,
"app": {
"background": {
"scripts": ["background.js"]
}
},
"icons": { "16": "calculator-16.png", "128": "calculator-128.png" }
}
Schritt 2: Hintergrundskript erstellen
Erstellen Sie als Nächstes eine neue Datei mit dem Namen background.js
und folgendem Inhalt:
chrome.app.runtime.onLaunched.addListener(function() {
chrome.app.window.create('window.html', {
'outerBounds': {
'width': 400,
'height': 500
}
});
});
Im Beispielcode oben wird das onLaunched-Ereignis ausgelöst, wenn der Nutzer die App startet. Anschließend wird sofort ein Fenster für die App mit der angegebenen Breite und Höhe geöffnet. Ihr Hintergrundskript kann zusätzliche Listener, Fenster, Beitragsnachrichten und Startdaten enthalten, die alle von der Ereignisseite zur Verwaltung der Anwendung verwendet werden.
Schritt 3: Fensterseite erstellen
Erstellen Sie die Datei window.html
:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div>Hello, world!</div>
</body>
</html>
Schritt 4: Symbole erstellen
Kopieren Sie diese Symbole in Ihren App-Ordner:
Schritt 5: App starten
Flags aktivieren
Viele Chrome Apps APIs befinden sich noch in der Testphase. Aktivieren Sie daher experimentelle APIs, damit Sie sie ausprobieren können:
- Rufen Sie chrome://flags auf.
- Suchen Sie nach „Experimental Extension APIs“ (Experimentelle Erweiterungs-APIs) und klicken Sie auf den Link „Aktivieren“.
- Starten Sie Chrome neu.
Anwendung laden
Rufen Sie zum Laden Ihrer App die Verwaltungsseite für Apps und Erweiterungen auf. Klicken Sie dazu auf das Chrome-Einstellungssymbol und wählen Sie Tools > Erweiterungen aus.
Achten Sie darauf, dass das Kästchen Entwicklermodus angeklickt ist.
Klicken Sie auf die Schaltfläche Entpackte Erweiterung laden, gehen Sie zum Ordner Ihrer App und klicken Sie auf OK.
Neuen Tab öffnen und starten
Öffnen Sie nach dem Laden Ihrer App eine „Neuer Tab“-Seite und klicken Sie auf das Symbol für die neue App.
Oder über die Befehlszeile laden und starten
Die folgenden Befehlszeilenoptionen für Chrome können bei der Iteration helfen:
--load-and-launch-app=/path/to/app/
installiert die entpackte Anwendung über den angegebenen Pfad und startet sie. Wenn die Anwendung bereits ausgeführt wird, wird sie mit dem aktualisierten Inhalt neu geladen.--app-id=ajjhbohkjpincjgiieeomimlgnll
startet eine App, die bereits in Chrome geladen ist. Dabei wird eine zuvor ausgeführte App nicht neu gestartet, sondern die neue App mit aktualisierten Inhalten gestartet.