Au cours de cette étape, vous allez découvrir:
- Éléments de base d'une application Chrome, y compris le fichier manifeste et les scripts d'arrière-plan
- Installer, exécuter et déboguer une application Chrome
Temps estimé pour terminer cette étape: 10 minutes.
Pour prévisualiser ce que vous allez réaliser au cours de cette étape, accédez au bas de cette page ↓.
Se familiariser avec les applications Chrome
Les applications Chrome contiennent les composants suivants:
- Le fichier manifeste contient les méta-informations de votre application. Il fournit à Chrome des informations sur votre application, sur la manière de la lancer et sur les autorisations supplémentaires dont il a besoin.
- La page d'événement, également appelée script d'arrière-plan, est chargée de gérer le cycle de vie de l'application. Le script d'arrière-plan vous permet d'enregistrer des écouteurs pour des événements d'application spécifiques, tels que le lancement et la fermeture de la fenêtre de l'application.
- Tous les fichiers de code doivent être empaquetés dans l'application Chrome. Cela inclut les modules HTML, CSS, JS et Native Client.
- Les éléments, y compris les icônes d'application, doivent également être empaquetés dans l'application Chrome.
Créer un fichier manifeste
Ouvrez l'éditeur de code ou de texte de votre choix, puis créez le fichier manifest.json:
{
"manifest_version": 2,
"name": "Codelab",
"version": "1",
"icons": {
"128": "icon_128.png"
},
"permissions": [],
"app": {
"background": {
"scripts": ["background.js"]
}
},
"minimum_chrome_version": "28"
}
Notez que ce fichier manifeste décrit un script d'arrière-plan nommé background.js. Vous allez maintenant créer ce fichier.
"background": {
"scripts": ["background.js"]
}
Nous vous fournirons une icône d'application plus tard dans cette étape:
"icons": {
"128": "icon_128.png"
},
Créer un script d'arrière-plan
Créez le fichier suivant et enregistrez-le sous le nom 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 }
});
});
Ce script d'arrière-plan attend simplement l'événement de lancement chrome.app.runtime.onLaunched de l'application et exécute la fonction de rappel:
chrome.app.runtime.onLaunched.addListener(function() {
//...
});
Lorsque l'application Chrome est lancée, chrome.app.window.create() crée une nouvelle fenêtre en utilisant une page HTML de base (index.html) comme source. Vous allez créer l'affichage HTML à l'étape suivante.
chrome.app.window.create('index.html', {
id: 'main',
bounds: { width: 620, height: 500 }
});
Les scripts d'arrière-plan peuvent contenir des écouteurs, des fenêtres, des messages de publication et des données de lancement supplémentaires, qui sont tous utilisés par la page d'événement pour gérer l'application.
Créer un affichage HTML
Créez une page Web simple pour afficher le message "Hello World" à l'écran, puis enregistrez-la sous le nom index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Hello, let's code!</h1>
</body>
</html>
Comme pour n'importe quelle autre page Web, ce fichier HTML vous permet d'inclure d'autres éléments JavaScript, CSS ou autres éléments empaquetés.
Ajouter une icône d'application
Effectuez un clic droit sur cette image de 128 x 128 pixels et enregistrez-la sous le nom _icon128.png dans le dossier de votre projet:
Vous utiliserez ce fichier PNG comme icône de notre application que les utilisateurs verront dans le menu de lancement.
Confirmez que vous avez créé tous vos fichiers
Le dossier de votre projet devrait maintenant contenir les quatre fichiers suivants:
Installer une application Chrome en mode développeur
Utilisez le mode développeur pour charger et lancer rapidement votre application sans avoir à la finaliser en tant que package de distribution.
- Accédez à chrome://extensions depuis l'omnibox Chrome.
- Cochez la case Mode développeur.
- Cliquez sur Charger l'extension non empaquetée.
- Dans la boîte de dialogue du sélecteur de fichier, accédez au dossier de projet de votre application et sélectionnez-le pour charger votre application.
Lancer votre application Hello World terminée
Après avoir chargé votre projet en tant qu'extension non empaquetée, cliquez sur Launch (Lancer) à côté de votre application installée. Une nouvelle fenêtre autonome doit s'ouvrir:
Félicitations, vous venez de créer une application Chrome !
Déboguer une application Chrome à l'aide des Outils pour les développeurs Chrome
Vous pouvez utiliser les outils pour les développeurs Chrome pour inspecter, déboguer, auditer et tester votre application comme sur une page Web standard.
Après avoir modifié votre code et actualisé votre application (clic droit > Actualiser l'application), recherchez d'éventuelles erreurs dans la console DevTools (clic droit > Inspecter l'élément).
(Nous aborderons l'option Inspecter la page en arrière-plan à l'étape 3 avec les alarmes.)
La console JavaScript des outils de développement a accès aux mêmes API que celles disponibles pour votre application. Vous pouvez facilement tester un appel d'API avant de l'ajouter à votre code:
Pour en savoir plus
Pour plus d'informations sur certaines des API présentées à cette étape, reportez-vous à:
- Format du fichier manifeste ↑
- Fichier manifeste – Icônes ↑
- Cycle de vie des applications Chrome ↑
- chrome.app.runtime.onLaunched ↑
- chrome.app.window.create() ↑
Prêt à passer à l'étape suivante ? Passez à l'Étape 2 : Importez une application Web existante »