Au cours de cette étape, vous allez apprendre à:
- Éléments de base d'une application Chrome, y compris le fichier manifeste et les scripts en arrière-plan.
- Installer, exécuter et déboguer une application Chrome
Temps estimé pour effectuer cette étape: 10 minutes
Pour afficher un aperçu de cette étape, accédez au bas de la page ↓.
Se familiariser avec les applications Chrome
Une application Chrome contient les composants suivants:
- Le fichier manifeste contient les méta-informations de votre application. Le fichier manifeste indique à Chrome application, comment la lancer et toutes les autorisations supplémentaires dont elle a besoin.
- La page de l'événement, également appelée script en arrière-plan, est chargée de gérer le cycle de vie de l'application. d'un cycle. 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 formats HTML, CSS, JS et natif. Modules clients.
- 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 comment ce fichier manifeste décrit un script en arrière-plan nommé background.js. Vous allez créer ce fichier le fichier suivant.
"background": {
"scripts": ["background.js"]
}
Nous vous fournirons une icône d'application ultérieurement au cours de cette étape:
"icons": {
"128": "icon_128.png"
},
Créer un script en 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 en arrière-plan attend simplement l'événement de lancement chrome.app.runtime.onLaunched pour que le paramètre 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 à l'aide d'un la page HTML simplifiée (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 posts de message et des données de lancement supplémentaires... utilisés par la page d'événement pour gérer l'application.
Créer une vue HTML
Créer une page Web simple pour afficher un message "Hello World" à l'écran et l'enregistrer sous index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>Hello, let's code!</h1>
</body>
</html>
Comme sur n'importe quelle autre page Web, ce fichier HTML vous permet d'inclure du code JavaScript empaqueté supplémentaire, CSS, ou composants.
Ajouter une icône d'application
Effectuez un clic droit sur cette image 128 x 128 et enregistrez-la dans le dossier de votre projet sous le nom _icon128.png:
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
Votre dossier de projet doit 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.
- À l'aide de la boîte de dialogue de l'outil de sélection de fichiers, accédez au dossier du projet de votre application et sélectionnez-le pour charger votre l'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 l'application installée. A une nouvelle fenêtre autonome doit s'ouvrir:
Félicitations, vous venez de créer une nouvelle application Chrome !
Déboguer une application Chrome avec les 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 suit : que sur une page Web classique.
Une fois que vous avez modifié votre code et actualisé l'application (clic droit > Actualiser l'application), cochez la case dans la console DevTools pour vérifier les erreurs éventuelles (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 Testez un appel d'API avant de l'ajouter à votre code:
Pour en savoir plus
Pour en savoir plus sur certaines des API présentées lors de cette étape, consultez les pages suivantes:
- 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 »