Stap 1: Maak en voer een Chrome-app uit

In deze stap leer je:

  • De basisbouwstenen van een Chrome-app, inclusief het manifestbestand en achtergrondscripts.
  • Een Chrome-app installeren, uitvoeren en fouten opsporen.

Geschatte tijd om deze stap te voltooien: 10 minuten.
Om een ​​voorbeeld te zien van wat u in deze stap gaat voltooien, springt u naar de onderkant van deze pagina ↓ .

Maak kennis met Chrome-apps

Een Chrome-app bevat deze componenten:

  • Het manifest specificeert de meta-informatie van uw app. Het manifest vertelt Chrome over uw app, hoe u deze kunt starten en eventuele extra rechten die hiervoor nodig zijn.
  • De evenementenpagina , ook wel achtergrondscript genoemd, is verantwoordelijk voor het beheer van de app-levenscyclus. In het achtergrondscript registreert u luisteraars voor specifieke app-gebeurtenissen, zoals het starten en sluiten van het app-venster.
  • Alle codebestanden moeten in de Chrome-app zijn verpakt. Dit omvat HTML-, CSS-, JS- en Native Client-modules.
  • Activa , inclusief app-pictogrammen, moeten ook in de Chrome-app worden verpakt.

Maak een manifest

Open uw favoriete code-/teksteditor en maak het volgende bestand met de naam manifest.json :

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

Merk op hoe dit manifest een achtergrondscript beschrijft met de naam background.js . U gaat dat bestand vervolgens maken.

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

We zullen u later in deze stap een app-pictogram geven: 

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

Maak een achtergrondscript

Maak het volgende bestand en sla het op 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 }
  });
});

Dit achtergrondscript wacht eenvoudigweg op de chrome.app.runtime.onLaunched lanceringsgebeurtenis voor de applicatie en voert de callback-functie uit:

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

Wanneer de Chrome-app wordt gestart, maakt chrome.app.window.create() een nieuw venster met een eenvoudige HTML-pagina ( index.html ) als bron. In de volgende stap maakt u de HTML-weergave.

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

Achtergrondscripts kunnen extra luisteraars, vensters, postberichten en startgegevens bevatten, die allemaal door de gebeurtenispagina worden gebruikt om de app te beheren.

Maak een HTML-weergave

Maak een eenvoudige webpagina om een ​​"Hallo Wereld"-bericht op het scherm weer te geven en sla deze op als index.html :

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

Net als elke andere webpagina kunt u in dit HTML-bestand aanvullende verpakte JavaScript-, CSS- of assets opnemen.

Voeg een app-pictogram toe

Klik met de rechtermuisknop en sla deze afbeelding van 128x128 op in uw projectmap als _icon 128.png :

Chrome App-pictogram voor dit codelab

U gebruikt deze PNG als het pictogram van onze applicatie dat gebruikers in het startmenu zullen zien.

Bevestig dat u al uw bestanden hebt aangemaakt

U zou nu deze 4 bestanden in uw projectmap moeten hebben:

Schermafbeelding van bestandsmap

Installeer een Chrome-app in ontwikkelaarsmodus

Gebruik de ontwikkelaarsmodus om uw app snel te laden en te starten zonder dat u uw app als distributiepakket hoeft af te ronden.

  1. Toegang tot chrome://extensions vanuit de Chrome-omnibox.
  2. Vink het selectievakje Ontwikkelaarsmodus aan.

Schakel ontwikkelaarsmodus in

  1. Klik op Uitgepakte extensie laden .
  2. Navigeer met behulp van het dialoogvenster voor de bestandskiezer naar de projectmap van uw app en selecteer deze om uw app te laden.

Laad uitgepakte extensies

Start uw voltooide Hello World-app

Nadat u uw project als uitgepakte extensie hebt geladen, klikt u op Starten naast uw geïnstalleerde app. Er zou een nieuw zelfstandig venster moeten openen:

De voltooide Hello World-app na stap 1

Gefeliciteerd, je hebt zojuist een nieuwe Chrome-app gemaakt!

Debug een Chrome-app met Chrome DevTools

U kunt de Chrome Developer Tools gebruiken om uw app te inspecteren, fouten op te sporen, te controleren en te testen, net zoals u dat op een gewone webpagina doet.

Nadat u uw code hebt gewijzigd en uw app opnieuw hebt geladen ( klik met de rechtermuisknop > App opnieuw laden ), controleert u de DevTools-console op eventuele fouten ( klik met de rechtermuisknop > Element inspecteren ).

Dialoogvenster Element inspecteren

(We bespreken de optie Achtergrondpagina inspecteren in stap 3 met alarmen.)

De DevTools JavaScript-console heeft toegang tot dezelfde API's die beschikbaar zijn voor uw app. U kunt een API-aanroep eenvoudig testen voordat u deze aan uw code toevoegt:

DevTools-consolelogboek

Voor meer informatie

Voor meer gedetailleerde informatie over enkele van de API's die in deze stap zijn geïntroduceerd, raadpleegt u:

Klaar om door te gaan naar de volgende stap? Ga naar Stap 2 - Een bestaande webapp importeren »