Maak uw eerste app

In deze zelfstudie leert u hoe u uw eerste Chrome-app maakt. Chrome-apps zijn op dezelfde manier gestructureerd als extensies, zodat huidige ontwikkelaars de manifest- en verpakkingsmethoden zullen herkennen. Als u klaar bent, hoeft u alleen maar een zipbestand met uw code en items te maken om uw app te publiceren .

Een Chrome-app bevat deze componenten:

  • Het manifest vertelt Chrome over uw app, wat het is, hoe u deze kunt starten en welke extra machtigingen daarvoor nodig zijn.
  • Het achtergrondscript wordt gebruikt om de gebeurtenispagina te maken die verantwoordelijk is voor het beheer van de app-levenscyclus.
  • Alle code moet zijn opgenomen in het Chrome App-pakket. Dit omvat HTML-, JS-, CSS- en Native Client-modules.
  • Alle pictogrammen en andere middelen moeten ook in het pakket worden opgenomen.

Stap 1: Maak het manifest

Maak eerst uw manifest.json -bestand ( Formaten: Manifest Files beschrijft dit manifest in detail):

{
  "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" }
}

Stap 2: Maak het achtergrondscript

Maak vervolgens een nieuw bestand met de naam background.js met de volgende inhoud:

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'outerBounds': {
      'width': 400,
      'height': 500
    }
  });
});

In de bovenstaande voorbeeldcode wordt de gebeurtenis onLaunched geactiveerd wanneer de gebruiker de app start. Er wordt dan onmiddellijk een venster voor de app geopend met de opgegeven breedte en hoogte. Uw achtergrondscript kan extra luisteraars, vensters, postberichten en startgegevens bevatten, die allemaal door de gebeurtenispagina worden gebruikt om de app te beheren.

Stap 3: Maak een vensterpagina

Maak uw window.html bestand:

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
    <div>Hello, world!</div>
  </body>
</html>

Stap 4: Maak de pictogrammen

Kopieer deze pictogrammen naar uw app-map:

Stap 5: Start uw app

Schakel vlaggen in

Veel van de Chrome Apps API's zijn nog experimenteel, dus u moet experimentele API's inschakelen zodat u ze kunt uitproberen:

  • Ga naar chrome://flags .
  • Zoek 'Experimentele extensie-API's' en klik op de link 'Inschakelen'.
  • Start Chrome opnieuw.

Laad uw app

Om uw app te laden, opent u de beheerpagina voor apps en extensies door op het Chrome-instellingenpictogram te klikken en Extra > Extensies te kiezen.

Zorg ervoor dat het selectievakje Ontwikkelaarsmodus is ingeschakeld.

Klik op de knop Uitgepakte extensie laden , navigeer naar de map van uw app en klik op OK .

Open een nieuw tabblad en start

Nadat u uw app heeft geladen, opent u een nieuw tabblad en klikt u op uw nieuwe app-pictogram.

Of laad en start vanaf de opdrachtregel

Deze opdrachtregelopties voor Chrome kunnen u helpen bij het herhalen:

  • --load-and-launch-app=/path/to/app/ installeert de uitgepakte applicatie vanaf het opgegeven pad en start deze. Als de applicatie al actief is, wordt deze opnieuw geladen met de bijgewerkte inhoud.
  • --app-id=ajjhbohkjpincjgiieeomimlgnll start een app die al in Chrome is geladen. Er wordt geen eerder actieve app opnieuw opgestart, maar de nieuwe app wordt wel gestart met bijgewerkte inhoud.