Erste Anwendung erstellen

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.