Commencez par créer un répertoire pour stocker vos fichiers d'extension. Si vous préférez, vous pouvez télécharger
du code source depuis GitHub.
Ensuite, créez un fichier dans ce répertoire appelé manifest.json. Ce fichier JSON décrit l'extension
et leur configuration. 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 une fenêtre pop-up lorsque
sur l'icône d'action de l'extension.
L'extension affiche désormais une fenêtre pop-up lorsque l'utilisateur clique sur l'icône d'action de l'extension (icône de la barre d'outils). Vous pouvez tester
dans Chrome en les chargeant localement. S'assurer 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://extensions dans un nouvel onglet. Les URL chrome:// ne peuvent pas être associées de par leur conception.
Vous pouvez également cliquer sur le bouton du menu "Extensions" et sélectionner Gérer les extensions en bas du menu.
Vous pouvez également cliquer sur le menu Chrome, passer la souris sur Plus d'outils, puis sélectionner Extensions.
Activez le mode développeur en cliquant sur le bouton bascule à côté de Mode développeur.
Cliquez sur le bouton Charger l'extension non empaquetée, puis sélectionnez le répertoire de l'extension.
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"></ph>
Page des extensions (chrome://extensions)
.
Et voilà ! L'extension a bien été installée. Si aucune icône d'extension n'était incluse dans
le fichier manifeste, une icône générique est créée pour l'extension.
Épingler l'extension
Par défaut, lorsque vous chargez votre extension en local, elle apparaît dans le menu des extensions (). Épinglez votre extension à la barre d'outils pour y accéder rapidement pendant le développement.
Une fois le fichier enregistré, pour que cette modification s'affiche dans le navigateur, vous devez également actualiser l'extension. Accéder
à la page "Extensions", puis cliquez sur l'icône d'actualisation à côté du bouton activer/désactiver:
Quand actualiser l'extension
Le tableau suivant présente les composants qui doivent être actualisés pour que les modifications soient visibles:
Composant d'extension
Nécessite d'actualiser l'extension
Fichier manifeste
Oui
Service worker
Oui
Scripts de contenu
Oui (plus la page hôte)
Pop-up
Non
Page d'options
Non
Autres pages HTML d'extension
Non
Rechercher les journaux et les 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
localisera les journaux de la fenêtre pop-up. Commencez par ajouter un tag de script à hello.html.
Créez un fichier popup.js et ajoutez le code suivant:
console.log("Thisisapopup!")
Pour voir ce message consigné dans la console:
Ouvrez le pop-up.
Effectuez un clic droit sur le pop-up.
Sélectionnez Inspecter.
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"></ph>
Inspection d'un pop-up
Dans DevTools, accédez au panneau Console.
<ph type="x-smartling-placeholder"></ph>
<ph type="x-smartling-placeholder"></ph>
Inspection d'un pop-up
.
Journaux d'erreurs
Maintenant, cassons l'extension. Pour ce faire, supprimez le guillemet fermant dans popup.js:
console.log("Thisisapopup!)// ❌ 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 d'options et des scripts de contenu, consultez la section Débogage.
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
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 la commande npm
package chrome-types afin de bénéficier de la saisie semi-automatique pour le package Chrome
de l'API. Ce package npm est mis à jour automatiquement lorsque le code source de Chromium
des modifications.
🚀 Vous êtes prêt à vous lancer ?
Choisissez l'un des tutoriels suivants pour commencer votre parcours d'apprentissage des extensions.
Façon dont un service worker d'extension gère les événements
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2022/10/04 (UTC).
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"Il n'y a pas l'information dont j'ai besoin"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"Trop compliqué/Trop d'étapes"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"Obsolète"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"Problème de traduction"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"Mauvais exemple/Erreur de code"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"Autre"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"Facile à comprendre"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"J'ai pu résoudre mon problème"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"Autre"
}]
{
"last_modified": "Dernière mise à jour le 2022/10/04 (UTC).",
"state": ""
}