Tutoriel : Comment créer une extension Chrome en 5 minutes

Un exemple d'extension chrome basique, le code est disponible sur Github !

Article publié le 04/11/2020, dernière mise à jour le 19/09/2023

J'ai récemment partagé plusieurs extensions pour Google Chrome dans mon article "Les 4 meilleurs outils pour tester l'accessibilité d'un site web", donc c'est tout naturellement qu'aujourd'hui je vous présente la démarche pour créer vous-même votre extension Chrome en quelques minutes.

Tout d'abord, voyons de quoi est composé une extension la plus basique possible :

Un manifeste
Une icône
Un fichier html
Et c'est tout.

Le manifeste permet de déclarer toutes les informations et méta-données liées à l'extension, et le fichier html va contenir le code qui apparaitra dans la popup lorsque vous cliquerez sur l'extension.

Le code

J'ai décidé de vous montrer une extension la plus simple possible, j'ai donc opté pour une simple popup qui affiche un bouton, qui, lorsque l'on clique dessus ouvre un nouvel onglet pointant sur mon site.

A noter qu'une extension Chrome peut être très puissante et offrir de nombreuse possibilités, j'ai opté pour une extension la plus simple possible pour cette introduction car un tutoriel avancé est aussi en préparation.

Le manifeste

Le manifeste est un simple fichier JSON, comme ceci :

{
  "manifest_version": 2,

  "name": "Basic Chrome Extension",
  "description": "This extension is for education purpose",
  "version": "1.0",

  "browser_action": {
   "default_icon": "icon.png",
   "default_popup": "popup.html"
  },
  "permissions": ["tabs"]
}

Il n'y a pas grand chose à dire sur ce manifeste, il est très simple et doit être mis à la racine du projet, pour la liste de toutes les permissions disponibles, voici la documentation officielle.

HTML et Javascript

Le point d'entrée étant un simple fichier html, il est possible de garder la même structure qu'un projet web classique, j'ai donc séparé le contenu de ma popup en trois fichiers: popup.html, popup.css et popup.js

Le popup.html contient tout le code qui sera affiché dans la popup, mais attention, il sera exécuté UNIQUEMENT lorsque vous aurez cliqué sur le bouton pour lancer l'extension, pas avant !

<!--popup.html-->
<!DOCTYPE html>
<html>
    <head>
        <link href="./popup.css" rel="stylesheet"/>
    </head>
    <body>
        <button id="openBtn">Ouvrir mon site</button>
        <script type="text/javascript" src="popup.js"></script>
    </body>
</html>

Le fonctionnement est celui décris précédemment : on créé un bouton, auquel on assigne une fonction qui ouvrira une url lorsque l'on clique dessus.

//popup.js
function OpenURL() {
    chrome.tabs.create({ url: "https://nicolas.brondin-bernard.com" });
}
document.getElementById("openBtn").addEventListener("click", OpenURL);

Attention, les Content Security Policies de Google Chrome interdisent de passer une fonction en ajoutant un attribut onClick dans le html, le binding doit forcément se faire côté Javascript.

Une fois tous les fichiers créés, il ne nous reste plus qu'à tester l'extension, et si vous souhaitez retrouver tout le code de ce tutoriel, il est disponible sur le dépôt GitHub ci-dessous :

NicolasBrondin/basic-chrome-extension

Installer l'extension

Pour celà, il vous suffit d'ouvrir Google Chrome, et de taper chrome://extensions dans la barre de recherche, puis d'appuyer sur entrée. La page de gestion des extensions va apparaitre, il ne vous reste plus qu'à :

Activer le mode développeur
Charger votre extension

Une fois le dossier de votre extension sélectionné, il ne vous reste plus qu'à la trouver dans votre barre de menus sur Google Chrome, d'appuyer dessus et voilà !

Eelco Böhtlingk sur Unsplash

Vous avez terminé l'article ?

Aucun commentaire pour l'instant