Découvrez les principes de base du développement d'extensions Chrome en créant votre première extension Hello World.
Présentation
Vous allez créer un exemple "Hello World", charger l'extension localement, localiser des journaux et explorer d'autres recommandations.
Hello World
Cette extension affiche "Hello Extensions" lorsque l'utilisateur clique sur l'icône de l'extension dans la barre d'outils.
Commencez par créer un répertoire pour stocker vos fichiers d'extension. Si vous préférez, vous pouvez télécharger le code source complet sur GitHub.
Ensuite, créez un fichier nommé manifest.json dans ce répertoire. Ce fichier JSON décrit les fonctionnalités et la configuration de l'extension. Par exemple, la plupart des fichiers manifestes contiennent une clé "action" qui déclare l'image que Chrome doit utiliser comme icône d'action de l'extension et la page HTML à afficher dans un pop-up lorsque l'utilisateur clique sur l'icône d'action de l'extension.
{
"manifest_version": 3,
"name": "Hello Extensions",
"description": "Base Level Extension",
"version": "1.0",
"action": {
"default_popup": "hello.html",
"default_icon": "hello_extensions.png"
}
}
Téléchargez l'icône dans votre répertoire et veillez à modifier son nom pour qu'il corresponde au contenu de la clé "default_icon".
Pour le pop-up, créez un fichier nommé hello.html et ajoutez le code suivant:
<html>
<body>
<h1>Hello Extensions</h1>
</body>
</html>
L'extension affiche désormais une fenêtre pop-up lorsque l'utilisateur clique sur son icône d'action (barre d'outils). Vous pouvez la tester dans Chrome en la chargeant localement. Assurez-vous que tous les fichiers sont enregistrés.
Charger une extension non empaquetée
Pour charger une extension non empaquetée en mode développeur:
- Accédez à la page "Extensions" en saisissant
chrome://extensionsdans un nouvel onglet. (Par nature, les URLchrome://ne peuvent pas contenir de liens.)- Vous pouvez également cliquer sur le bouton du menu "Extensions" et sélectionner Gérer les extensions au bas de celui-ci.
- Vous pouvez également cliquer sur le menu Chrome, pointer sur Plus d'outils, puis sélectionner Extensions.
- Activez le mode développeur en cliquant sur le bouton bascule situé à côté de Mode développeur.
- Cliquez sur le bouton Charger un package non empaqueté et sélectionnez le répertoire de l'extension.
Page des extensions (chrome://extensions)
Et voilà ! L'extension a bien été installée. Si aucune icône d'extension n'a été incluse dans le fichier manifeste, une icône générique sera créée pour l'extension.
Épingler l'extension
Par défaut, lorsque vous chargez votre extension localement, elle s'affiche dans le menu des extensions (
). Épinglez-la à la barre d'outils pour y accéder rapidement pendant le développement.
Cliquez sur l'icône d'action de l'extension (icône de la barre d'outils). Une fenêtre pop-up doit alors s'afficher.
Actualiser l'extension
Revenez au code et remplacez le nom de l'extension par "Hello Extensions of the world!" dans le fichier manifeste.
{
"manifest_version": 3,
"name": "Hello Extensions of the world!",
...
}
Une fois le fichier enregistré, vous devez actualiser l'extension pour que la modification s'affiche dans le navigateur. Accédez à la page "Extensions", puis cliquez sur l'icône d'actualisation située à côté du bouton activé/désactivé:
Quand actualiser l'extension ?
Le tableau suivant indique les composants qui doivent être actualisés pour voir les modifications:
| Composant d'extension | Nécessite l'actualisation de l'extension |
|---|---|
| Fichier manifeste | Oui |
| Service worker | Oui |
| Scripts de contenu | Oui (plus la page hôte) |
| Le pop-up | Non |
| Page d'options | Non |
| Autres pages HTML de l'extension | Non |
Rechercher les journaux et erreurs de la console
Journaux de la console
Pendant le développement, vous pouvez déboguer votre code en accédant aux journaux de la console du navigateur. Dans ce cas, nous allons localiser les journaux du pop-up. Commencez par ajouter un tag de script à hello.html.
<html>
<body>
<h1>Hello Extensions</h1>
<script src="popup.js"></script>
</body>
</html>
Créez un fichier popup.js et ajoutez le code suivant:
console.log("This is a popup!")
Pour que ce message soit consigné dans la console:
- Ouvrez la fenêtre pop-up.
- Effectuez un clic droit sur la fenêtre pop-up.
- Sélectionnez Inspecter.
Inspection d'un pop-up - Dans DevTools, accédez au panneau Console (Console).
Inspecter un pop-up
Error logs
À présent, cassons l'extension. Pour ce faire, supprimez le guillemet fermant dans popup.js:
console.log("This is a popup!) // ❌ broken code
Accédez à la page "Extensions", puis ouvrez le pop-up. Un bouton Erreurs s'affiche.
Cliquez sur le bouton Erreurs pour en savoir plus sur l'erreur:
Pour en savoir plus sur le débogage du service worker, de la page des options et des scripts de contenu, consultez Déboguer les extensions.
Structurer un projet d'extension
Il existe de nombreuses façons de structurer un projet d'extension. Toutefois, la seule condition préalable est de placer le fichier manifest.json dans le répertoire racine de l'extension, comme dans l'exemple suivant:
Utiliser TypeScript
Si vous développez à l'aide d'un éditeur de code tel que VSCode ou Atom, vous pouvez utiliser le package npm chrome-types pour bénéficier de la saisie semi-automatique pour l'API Chrome. Ce package npm est mis à jour automatiquement lorsque le code source Chromium est modifié.
🚀 Prêt à commencer ?
Choisissez l'un des tutoriels suivants pour commencer votre parcours d'apprentissage des extensions.
| Extension | Objectifs de l'atelier |
|---|---|
| Exécuter des scripts sur chaque page | Pour insérer automatiquement un élément sur chaque page |
| Injecter des scripts dans l'onglet actif | Pour exécuter du code sur la page actuelle après avoir cliqué sur l'action de l'extension. |
| Gérer les onglets | Créer un pop-up qui gère les onglets du navigateur |
| Gérer les événements avec des service workers | Gestion des événements par un service worker d'extension |