Schritt 1: Chrome-App erstellen und ausführen

In diesem Schritt erfahren Sie:

  • Die Grundbausteine einer Chrome-App, einschließlich Manifestdatei und Hintergrundskripts
  • Hier erfahren Sie, wie Sie eine Chrome-App installieren, ausführen und Fehler beheben.

Ungefähre Dauer: 10 Minuten.
Um eine Vorschau zu sehen, was Sie in diesem Schritt tun werden, springen Sie zum Ende dieser Seite ↓.

Chrome-Apps kennenlernen

Eine Chrome-App enthält die folgenden Komponenten:

  • Das Manifest gibt die Metainformationen deiner App an. Das Manifest informiert Chrome über Ihre App, wie sie gestartet wird und welche zusätzlichen Berechtigungen sie benötigt.
  • Die Ereignisseite, auch Hintergrundskript genannt, verwaltet die App-Nutzung. Zyklus. Über das Hintergrundskript registrieren Sie Listener für bestimmte App-Ereignisse wie den Starten und Schließen des App-Fensters.
  • Alle Codedateien müssen in der Chrome App gepackt sein. Dazu gehören HTML, CSS, JS und native Clientmodule.
  • Auch Assets, einschließlich App-Symbolen, sollten in die Chrome-App gepackt sein.

Manifest erstellen

Öffnen Sie Ihren bevorzugten Code bzw. Texteditor und erstellen Sie die folgende Datei namens manifest.json:

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

Beachten Sie, wie dieses Manifest ein Hintergrundskript mit dem Namen background.js beschreibt. Sie erstellen das 

"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 Launch-Ereignis chrome.app.runtime.onLaunched für die und führt die Callback-Funktion aus:

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

Beim Starten der Chrome-App wird mit chrome.app.window.create() mithilfe eines einfache HTML-Seite (index.html) als Quelle festlegen. 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, Post-Nachrichten und Startdaten enthalten – alles davon werden von der Ereignisseite zur Verwaltung der App verwendet.

HTML-Ansicht erstellen

Einfache Webseite für „Hello World“ erstellen auf dem Bildschirm und speichern Sie sie 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 gepacktes JavaScript, CSS oder Assets.

App-Symbol hinzufügen

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

Chrome App-Symbol für dieses Codelab

Sie verwenden diese PNG-Datei als Symbol unserer Anwendung, das den Nutzern im Startmenü angezeigt wird.

Bestätigen, dass Sie alle Dateien erstellt haben

In Ihrem Projektordner sollten sich jetzt diese vier Dateien befinden:

Screenshot des Dateiordners

Chrome-Apps im Entwicklermodus installieren

Mit dem Entwicklermodus können Sie Ihre App schnell laden und starten, ohne sie als Distributionspaket.

  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. Navigieren Sie im Dialogfeld für die Dateiauswahl zum Projektordner Ihrer App und wählen Sie ihn aus, um Ihre

Entpackte Erweiterungen laden

Fertige Hello World-App starten

Nachdem Sie Ihr Projekt als entpackte Erweiterung geladen haben, klicken Sie neben der installierten App auf Starten. A sollte sich ein neues eigenständiges Fenster öffnen:

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

Mit den Chrome-Entwicklertools können Sie Ihre App genau wie wie auf einer Webseite.

Nachdem Sie Änderungen am Code vorgenommen und Ihre App neu geladen haben (Rechtsklick > App neu laden), aktivieren Sie die in der Entwicklertools-Konsole auf Fehler prüfen (Rechtsklick > Element untersuchen).

Dialogfeld „Element untersuchen“

(Die Option Hintergrundseite prüfen wird in Schritt 3 mit Alarmen behandelt.)

Die JavaScript-Konsole der Entwicklertools hat Zugriff auf dieselben APIs, die auch für deine App verfügbar sind. Sie können ganz einfach Testen Sie einen API-Aufruf, bevor Sie ihn dem Code hinzufügen:

Entwicklertools-Konsolenprotokoll

Weitere Informationen

Ausführlichere Informationen zu einigen der in diesem Schritt vorgestellten APIs finden Sie hier:

Sind Sie bereit für den nächsten Schritt? Zu Schritt 2: Vorhandene Web-App importieren aufrufen