Schritt 1: Chrome-App erstellen und ausführen

In diesem Schritt lernen Sie:

  • Die grundlegenden Bausteine einer Chrome-App, einschließlich der Manifestdatei und Hintergrundskripts.
  • Chrome-Apps installieren, ausführen und debuggen

Geschätzte Zeit für diesen Schritt: 10 Minuten
Wenn Sie eine Vorschau der Schritte in diesem Schritt sehen möchten, springen Sie zum Ende der Seite ↓.

Chrome-Apps kennenlernen

Eine Chrome-App besteht aus folgenden Komponenten:

  • Das Manifest gibt die Metainformationen Ihrer App an. Darin wird Chrome über Ihre App und darüber, wie sie gestartet wird, sowie über zusätzliche erforderliche Berechtigungen informiert.
  • Die Ereignisseite, auch Hintergrundskript genannt, ist für die Verwaltung des Lebenszyklus der App verantwortlich. Im Hintergrundskript registrieren Sie Listener für bestimmte App-Ereignisse wie das Starten und Schließen des App-Fensters.
  • Alle Codedateien müssen in der Chrome-App gepackt sein. Dies schließt HTML-, CSS-, JS- und Native Client-Module ein.
  • Assets, einschließlich App-Symbole, sollten ebenfalls in der Chrome-App gepackt sein.

Manifest erstellen

Öffnen Sie Ihren bevorzugten Code-/Texteditor und erstellen Sie die folgende Datei mit dem Namen manifest.json:

{
  "manifest_version": 2,
  "name": "Codelab",
  "version": "1",
  "icons": {
    "128": "icon_128.png"
  },
  "permissions": [],
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "minimum_chrome_version": "28"
}

Wie Sie sehen, beschreibt dieses Manifest ein Hintergrundskript namens background.js. Diese Datei erstellen Sie als Nächstes.

"background": {
  "scripts": ["background.js"]
}

Sie erhalten später in diesem Schritt ein App-Symbol:

"icons": {
  "128": "icon_128.png"
},

Hintergrundskript erstellen

Erstellen Sie die folgende Datei und speichern Sie sie als background.js:

/**
 * Listens for the app launching then creates the window
 *
 * @see /apps/app.window.html
 */
chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('index.html', {
    id: 'main',
    bounds: { width: 620, height: 500 }
  });
});

Dieses Hintergrundskript wartet einfach auf das Startereignis chrome.app.runtime.onLaunched für die Anwendung und führt die Callback-Funktion aus:

chrome.app.runtime.onLaunched.addListener(function() {
  //...
});

Wenn die Chrome-App gestartet wird, erstellt chrome.app.window.create() ein neues Fenster mit einer einfachen HTML-Seite (index.html) als Quelle. Die HTML-Ansicht erstellen Sie im nächsten Schritt.

chrome.app.window.create('index.html', {
  id: 'main',
  bounds: { width: 620, height: 500 }
});

Hintergrundskripte können zusätzliche Listener, Fenster, Nachrichten zum Posten und Startdaten enthalten. Diese werden alle von der Ereignisseite zur Verwaltung der Anwendung verwendet.

HTML-Ansicht erstellen

Erstellen Sie eine einfache Webseite, auf der die Nachricht „Hello World“ angezeigt wird, und speichern Sie sie als index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
</head>
<body>
  <h1>Hello, let's code!</h1>
</body>
</html>

Wie bei jeder anderen Webseite können Sie in diese HTML-Datei zusätzliches JavaScript- oder CSS-Paket oder zusätzliche Assets einfügen.

App-Symbol hinzufügen

Klicken Sie mit der rechten Maustaste und speichern Sie dieses Bild im Format 128 x 128 in Ihrem Projektordner als _icon128.png:

Symbol der Chrome App für dieses Codelab

Sie werden diese PNG-Datei als Symbol unserer Anwendung verwenden, das die Nutzer im Startmenü sehen.

Prüfen, ob Sie alle Dateien erstellt haben

Sie sollten jetzt diese vier Dateien in Ihrem Projektordner haben:

Screenshot des Dateiordners

Chrome-App im Entwicklermodus installieren

Im Entwicklermodus können Sie Ihre Anwendung schnell laden und starten, ohne Ihre Anwendung als Distributionspaket fertigzustellen.

  1. Rufen Sie chrome://extensions über die Chrome-Omnibox auf.
  2. Klicken Sie das Kästchen Entwicklermodus an.

Entwicklermodus aktivieren

  1. Klicken Sie auf Entpackte Erweiterung laden.
  2. Rufen Sie über das Dialogfeld zur Dateiauswahl den Projektordner Ihrer Anwendung auf und wählen Sie ihn aus, um die Anwendung zu laden.

Entpackte Erweiterungen laden

Fertige Hello World App starten

Klicken Sie nach dem Laden des Projekts als entpackte Erweiterung neben der installierten App auf Starten. Ein neues eigenständiges Fenster sollte geöffnet werden:

Die fertige Hello World-Anwendung nach Schritt 1

Herzlichen Glückwunsch, Sie haben gerade eine neue Chrome-App erstellt!

Fehler in Chrome-Apps mit den Chrome-Entwicklertools beheben

Sie können die Chrome-Entwicklertools verwenden, um Ihre Anwendung wie auf einer normalen Webseite zu untersuchen, zu debuggen, zu prüfen und zu testen.

Nachdem Sie Änderungen am Code vorgenommen und die App neu geladen haben (mit der rechten Maustaste klicken > App neu laden) prüfen Sie die Entwicklertools-Konsole auf Fehler (mit der rechten Maustaste klicken > Element untersuchen).

Dialogfeld „Element untersuchen“

Die Option Hintergrundseite prüfen in Schritt 3 wird mit Weckern behandelt.

Die JavaScript-Konsole der Entwicklertools hat Zugriff auf dieselben APIs, die auch für deine App verfügbar sind. Du kannst einen API-Aufruf ganz einfach testen, bevor du ihn in deinen Code einfügst:

Entwicklertools-Konsolenprotokoll

Weitere Informationen

Detailliertere Informationen zu einigen der in diesem Schritt vorgestellten APIs finden Sie unter:

Sind Sie bereit, mit dem nächsten Schritt fortzufahren? Gehen Sie zu Schritt 2 – Vorhandene Web-App importieren ».