In questo passaggio, imparerai:
- I componenti di base 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 ↓.
Impara a conoscere le app di Chrome
Un'app di Chrome contiene i seguenti componenti:
- Il file manifest specifica le metainformazioni dell'app, che indica a Chrome informazioni sull'app, su come avviarla e sulle eventuali autorizzazioni aggiuntive necessarie.
- La pagina dell'evento, chiamata anche script in background, è responsabile della gestione del ciclo di vita dell'app. Lo script in background consente di registrare i listener per eventi dell'app specifici, come l'avvio e la chiusura della finestra dell'app.
- Tutti i file di codice devono essere pacchettizzati nell'app di Chrome. Sono inclusi i moduli HTML, CSS, JS e Native Client.
- Nell'app Chrome devono essere impacchettati anche gli asset, incluse le icone delle app.
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"
}
Osserva come questo file manifest descrive uno script in background denominato background.js. Dovrai creare il file nel passaggio 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 seguente file e salvalo con il nome 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 }
});
});
Questo script in background attende semplicemente l'evento di avvio chrome.app.runtime.onLaunched per l'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 una 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 post e dati di avvio aggiuntivi, tutti utilizzati dalla pagina dell'evento per gestire l'app.
Creare una visualizzazione HTML
Crea una semplice pagina web per visualizzare il messaggio "Hello World" sullo schermo e salvalo come index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Hello, let's code!</h1>
</body>
</html>
Come qualsiasi altra pagina web, all'interno di questo file HTML puoi includere altri asset JavaScript, CSS o asset pacchetti.
Aggiungi un'icona dell'app
Fai clic con il pulsante destro del mouse e salva questa immagine 128 x 128 nella cartella del progetto con il nome _icon128.png:
Utilizzerai questo file PNG come icona dell'applicazione che gli utenti vedranno nel menu di avvio.
Conferma di aver creato tutti i tuoi file
Ora dovresti avere questi 4 file nella cartella del progetto:
Installare 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 pacchetto di distribuzione.
- Accedi a chrome://extensions dalla omnibox di Chrome.
- Deseleziona la casella di controllo Modalità sviluppatore.
- Fai clic su Carica estensione non pacchettizzata.
- Utilizzando la finestra di dialogo del selettore file, vai alla cartella del progetto dell'app e selezionala per caricare l'app.
Avvia l'app Hello World completata
Dopo aver caricato il progetto come estensione non pacchettizzata, fai clic su Avvia accanto all'app installata. Dovrebbe aprirsi una nuova finestra autonoma:
Congratulazioni, hai appena creato una nuova app di Chrome.
Eseguire 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 in una normale pagina web.
Dopo aver apportato le modifiche al codice e ricaricato l'app (fai clic con il tasto destro del mouse > Ricarica app), verifica la presenza di eventuali errori nella console di DevTools (fai clic con il tasto destro del mouse > Ispeziona elemento).
Parleremo dell'opzione Ispeziona la pagina in background nel Passaggio 3 con le sveglie.
La console JavaScript DevTools ha accesso alle stesse API disponibili per la tua app. Puoi testare facilmente una chiamata API prima di aggiungerla al codice:
Per maggiori informazioni
Per informazioni più dettagliate su alcune delle API introdotte in questo passaggio, fai riferimento a:
- Formato file manifest ↑
- Manifest - Icone ↑
- Ciclo di vita delle app di Chrome ↑
- chrome.app.runtime.onLaunched ↑
- chrome.app.window.create() ↑
Vuoi continuare con il passaggio successivo? Vai al Passaggio 2: importa un'app web esistente »