Erste Anwendung erstellen

In dieser Anleitung erfahren Sie, wie Sie Ihre erste Chrome-App erstellen. Chrome-Apps sind ähnlich strukturiert damit aktuelle Entwickler das Manifest und die Paketerstellungsmethoden erkennen. Wenn Sie Fertig, müssen Sie nur noch eine ZIP-Datei mit Ihrem Code und Ihren Assets erstellen, um Ihre Datei zu veröffentlichen

Eine Chrome-App enthält die folgenden Komponenten:

  • Das Manifest informiert Chrome über Ihre App, was sie ist, wie sie gestartet wird und welche zusätzlichen Funktionen es gibt. die erforderlichen Berechtigungen.
  • Mit dem Hintergrundskript wird die Ereignisseite für die Verwaltung der App erstellt. Zyklus.
  • Der gesamte Code muss im Chrome-App-Paket enthalten sein. Dazu gehören HTML, JS, CSS und Native Client. Module.
  • Alle Symbole und anderen Assets müssen ebenfalls im Paket enthalten sein.

Schritt 1: Manifest erstellen

Erstellen Sie zuerst die manifest.json-Datei (Formate: Manifestdateien, in der dieses Manifest beschrieben wird in Details):

{
  "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. Es öffnet sich dann sofort ein Fenster für die App mit der angegebenen Breite und Höhe. Ihr Hintergrund kann zusätzliche Listener, Fenster, Post-Nachrichten und Startdaten enthalten, die alle die von der Ereignisseite zur Verwaltung der App verwendet wird.

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 der APIs für Chrome-Apps befinden sich noch in der Testphase, daher sollten Sie diese aktivieren, damit können Sie diese ausprobieren:

  • Rufen Sie chrome://flags auf.
  • Suchen Sie nach „Experimental Extension APIs“ und klicken Sie auf „Aktivieren“ .
  • Starten Sie Chrome neu.

App laden

Um Ihre App zu laden, rufen Sie die Verwaltungsseite für Apps und Erweiterungen auf, indem Sie auf das Chrome-Einstellungssymbol klicken und wählen Sie Tools > Erweiterungen.

Das Kästchen Entwicklermodus muss angeklickt sein.

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

Nachdem Sie Ihre App geladen haben, öffnen Sie eine „Neuer Tab“-Seite und klicken Sie auf das Symbol für Ihre neue App.

Oder laden und über die Befehlszeile starten

Diese Befehlszeilenoptionen für Chrome können Ihnen bei der Iteration helfen:

  • --load-and-launch-app=/path/to/app/ installiert die entpackte Anwendung über den angegebenen Pfad und wird es gestartet. Wenn die Anwendung bereits ausgeführt wird, wird sie mit dem aktualisierten Inhalt neu geladen.
  • --app-id=ajjhbohkjpincjgiieeomimlgnll startet eine bereits in Chrome geladene App. Nicht Jede zuvor ausgeführte App wird neu gestartet, dabei wird jedoch die neue App mit aktualisierten Inhalten gestartet.