Crea la tua prima app

Questo tutorial ti guida nella creazione della tua prima app di Chrome. Le app di Chrome sono strutturate in modo simile alle estensioni, in modo che gli sviluppatori attuali possano riconoscere il file manifest e i metodi di pacchettizzazione. Al termine, non dovrai fare altro che generare un file ZIP con il codice e gli asset per publish la tua app.

Un'app di Chrome contiene i seguenti componenti:

  • Il file manifest indica a Chrome informazioni sulla tua app, informazioni su cosa è, come avviarla e sulle autorizzazioni aggiuntive richieste.
  • Lo script in background viene utilizzato per creare la pagina dell'evento responsabile della gestione del ciclo di vita dell'app.
  • Tutto il codice deve essere incluso nel pacchetto dell'app Chrome. Sono inclusi i moduli HTML, JS, CSS e Native Client.
  • Il pacchetto deve includere anche tutte le icone e gli altri asset.

Passaggio 1: crea il manifest

Innanzitutto, crea il tuo file manifest.json (Formats: Manifest Files descrive dettagliatamente questo file manifest):

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

Passaggio 2: crea lo script in background

A questo punto, crea un nuovo file denominato background.js con i seguenti contenuti:

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

Nel codice di esempio riportato sopra, l'evento onLaunched viene attivato all'avvio dell'app, dopodiché apre immediatamente una finestra per l'app con la larghezza e l'altezza specificate. Lo script in background può contenere listener, finestre, messaggi di post e dati di avvio aggiuntivi, tutti utilizzati dalla pagina dell'evento per gestire l'app.

Passaggio 3: crea una pagina nella finestra

Crea il tuo file window.html:

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

Passaggio 4: crea le icone

Copia queste icone nella cartella dell'app:

Passaggio 5: avvia l'app

Abilita flag

Molte delle API delle app di Chrome sono ancora sperimentali, quindi ti consigliamo di abilitare le API sperimentali in modo da poterle provare:

  • Vai a chrome://flags.
  • Individua "API di estensione sperimentale" e fai clic sul link "Abilita".
  • Riavvia Chrome.

Carica la tua app

Per caricare la tua app, apri la pagina di gestione di app ed estensioni facendo clic sull'icona delle impostazioni di Chrome e scegliendo Strumenti > Estensioni.

Assicurati che la casella di controllo Modalità sviluppatore sia stata selezionata.

Fai clic sul pulsante Carica estensione non pacchettizzata, vai alla cartella dell'app e fai clic su OK.

Apri una nuova scheda e avvia

Dopo aver caricato l'applicazione, apri una pagina Nuova scheda e fai clic sull'icona della nuova applicazione.

Oppure carica e avvia dalla riga di comando

Le seguenti opzioni della riga di comando di Chrome possono aiutarti a eseguire l'iterazione:

  • --load-and-launch-app=/path/to/app/ installa l'applicazione non pacchettizzata dal percorso specificato e la avvia. Se l'applicazione è già in esecuzione, viene ricaricata con i contenuti aggiornati.
  • --app-id=ajjhbohkjpincjgiieeomimlgnll avvia un'app già caricata in Chrome. Non riavvia app in esecuzione in precedenza, ma avvia la nuova app con i contenuti aggiornati.