Extension Hello World

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 "Hello World" charger l'extension localement, localiser les journaux et explorer d'autres recommandations.

Hello World

Cette extension affiche le message "Hello Extensions" lorsque l'utilisateur clique sur l'icône de la barre d'outils de l'extension.

<ph type="x-smartling-placeholder">
</ph> Extension Hello <ph type="x-smartling-placeholder">
</ph> Pop-up "Hello Extension"
.

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.

{
  "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 à celui de la clé "default_icon".

Dans la fenêtre 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 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:

  1. 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.
  2. Activez le mode développeur en cliquant sur le bouton bascule à côté de Mode développeur.
  3. 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> la page des extensions ; <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 (Réflexion). Épinglez votre extension à la barre d'outils pour y accéder rapidement pendant le développement.

<ph type="x-smartling-placeholder">
</ph> Épingler l&#39;extension <ph type="x-smartling-placeholder">
</ph> Épingler l'extension
.

Cliquez sur l'icône d'action de l'extension (icône de la barre d'outils). vous devriez voir un pop-up.

<ph type="x-smartling-placeholder">
</ph> extension hello world <ph type="x-smartling-placeholder">
</ph> Extension Hello World
.

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é, 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:

Actualiser une extension

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.

<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 voir ce message consigné dans la console:

  1. Ouvrez le pop-up.
  2. Effectuez un clic droit sur le pop-up.
  3. Sélectionnez Inspecter. <ph type="x-smartling-placeholder">
    </ph> Examinez la fenêtre pop-up. <ph type="x-smartling-placeholder">
    </ph> Inspection d'un pop-up
  4. Dans DevTools, accédez au panneau Console. <ph type="x-smartling-placeholder">
    </ph> Panneau de code des outils de développement <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("This is a popup!) // ❌ broken code

Accédez à la page "Extensions", puis ouvrez le pop-up. Un bouton Erreurs s'affiche.

Page &quot;Extensions&quot; avec le bouton d&#39;erreur

Cliquez sur le bouton Erreurs pour en savoir plus sur l'erreur:

Détails de l&#39;erreur de l&#39;extension

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:

Contenu d&#39;un dossier d&#39;extension: manifest.json, background.js, les dossiers de scripts, de pop-up et d&#39;images.

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.

Extension Objectifs de l'atelier
Exécuter des scripts sur chaque page Insérer automatiquement un élément sur chaque page
Injecter des scripts dans l'onglet actif Permet d'exécuter du code sur la page actuelle après avoir cliqué sur l'action de l'extension.
Gérer les onglets Pour créer un pop-up qui gère les onglets du navigateur :
Gérer les événements avec des service workers Façon dont un service worker d'extension gère les événements