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
A basic chrome extension example for education purpose - 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'à :

  1. Activer le mode développeur
  2. 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à !

J'espère que cet article vous aura plus, à bientôt sur le blog !

À propos de l'auteur

Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage de d'expériences et de connaissances.

Aujourd'hui je suis aussi coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !


Photo par Eelco Böhtlingk sur Unsplash