Passaggio 1: crea ed esegui un'app di Chrome

In questo passaggio, scoprirai:

  • I componenti di base di un'app di Chrome, inclusi il file manifest e gli script in background.
  • Come installare, eseguire ed eseguire il debug di un'app di Chrome.

Tempo stimato per completare questo passaggio: 10 minuti.
Per visualizzare l'anteprima di ciò che completerai in questo passaggio, vai alla fine di questa pagina ↓.

Acquisisci familiarità con le app di Chrome

Un'app di Chrome contiene i seguenti componenti:

  • Il file manifest specifica le informazioni meta della tua app. Il file manifest comunica a Chrome le come avviarlo ed eventuali autorizzazioni aggiuntive necessarie.
  • La pagina dell'evento, chiamata anche script in background, è responsabile della gestione dell'attività dell'app. ciclo di lancio di Android. Lo script in background consente di registrare i listener per eventi di app specifici, come l'avvio e la chiusura della finestra dell'app.
  • Tutti i file di codice devono essere pacchettizzati nell'app Chrome. Sono inclusi HTML, CSS, JS e nativi Moduli client.
  • Gli asset, incluse le icone delle app, devono essere inclusi anche nell'app di Chrome.

Creare un manifest

Apri il tuo editor di codice/testo preferito e crea il seguente file denominato manifest.json:

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

Nota che questo file manifest descrive uno script in background denominato background.js. Lo creerai successivo.

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

Ti forniremo un'icona dell'app più avanti in questo passaggio:

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

Creare uno script in background

Crea il file seguente e salvalo come 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 }
  });
});

Lo script in background attende semplicemente l'evento di lancio chrome.app.runtime.onLaunched per il dell'applicazione ed esegue la funzione di callback:

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

All'avvio dell'app Chrome, chrome.app.window.create() crea una nuova finestra utilizzando un pagina HTML di base (index.html) come origine. Creerai la visualizzazione HTML nel passaggio successivo.

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

Gli script in background possono contenere listener, finestre, messaggi di pubblicazione e dati di avvio aggiuntivi. di cui la pagina dell'evento serve per gestire l'app.

Creare una visualizzazione HTML

Creare una semplice pagina web per visualizzare il testo "Hello World" messaggio sullo schermo e salvarlo come index.html:

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

Come per qualsiasi altra pagina web, all'interno di questo file HTML puoi includere CSS o asset.

Aggiungi l'icona di un'app

Fai clic con il pulsante destro del mouse e salva questa immagine 128x128 nella cartella del progetto come _icon128.png:

Icona dell&#39;app Chrome per questo codelab

Userai questo PNG come icona della nostra applicazione che gli utenti vedranno nel menu di avvio.

Conferma di aver creato tutti i file

Ora dovresti avere questi 4 file nella cartella del progetto:

Screenshot della cartella di file

Installa un'app di Chrome in modalità sviluppatore

Utilizza la modalità sviluppatore per caricare e avviare rapidamente la tua app senza dover finalizzare l'app come un pacchetto di distribuzione.

  1. Accedi a chrome://extensions dalla omnibox di Chrome.
  2. Deseleziona la casella di controllo Modalità sviluppatore.

Attiva modalità sviluppatore

  1. Fai clic su Carica estensione non pacchettizzata.
  2. Usando la finestra di dialogo del selettore file, vai alla cartella del progetto dell'app e selezionala per caricare dell'app.

Carica estensioni non pacchettizzate

Avvia l'app Hello World completa

Dopo aver caricato il progetto come estensione non pacchettizzata, fai clic su Avvia accanto all'app installata. R dovrebbe aprirsi una nuova finestra autonoma:

L&#39;app Hello World completata dopo il passaggio 1

Congratulazioni, hai appena creato una nuova app di Chrome.

Esegui il debug di un'app di Chrome con Chrome DevTools

Puoi utilizzare gli Strumenti per sviluppatori di Chrome per ispezionare, eseguire il debug, controllare e testare la tua app proprio come che svolgi in una normale pagina web.

Dopo aver apportato modifiche al codice e ricaricato l'app (fai clic con il tasto destro del mouse > Ricarica app), controlla la Console DevTools per eventuali errori (clic con il tasto destro del mouse > Ispeziona elemento).

Finestra di dialogo Ispeziona elemento

Tratteremo l'opzione Ispeziona pagina in background nel passaggio 3 con le sveglie.

La console JavaScript di DevTools ha accesso alle stesse API disponibili per la tua app. Puoi facilmente testa una chiamata API prima di aggiungerla al codice:

Log della console DevTools

Per maggiori informazioni

Per informazioni più dettagliate su alcune delle API introdotte in questo passaggio, fai riferimento a:

Vuoi andare al passaggio successivo? Vai al Passaggio 2: importa un'app web esistente »