Comment créer votre propre extension Google Chrome

Si vous êtes un utilisateur de Google Chrome, vous avez probablement utilisé des extensions dans le navigateur.

Vous êtes-vous déjà demandé comment en créer une vous-même ? Dans cet article, je vais vous montrer comment vous pouvez créer une extension Chrome à partir de zéro.

Qu’est-ce qu’une extension Chrome ?

Une extension Chrome est un programme qui est installé dans le navigateur Chrome et qui améliore les fonctionnalités du navigateur. Vous pouvez en créer une facilement en utilisant des technologies Web comme HTML, CSS et JavaScript.

La création d’une extension Chrome est similaire à celle d’une application Web, mais elle nécessite un fichier manifest.json que nous aborderons dans la dernière section de cet article.

À quoi ressemblera notre extension Chrome ?

covid_report
Dernier rapport de Covid sur l’extension de UK-Chrome

Comme vous pouvez le voir, l’extension chrome ci-dessus affiche les dernières données sur le coronavirus (COVID-19) au Royaume-Uni. Nous allons voir comment créer cette extension dans cet article de blog.

Nous utiliserons ici l’API https://api.coronavirus.data.gov.uk/v1/data pour récupérer les données. Par souci de simplicité, nous n’afficherons que le dernier enregistrement.

Le code source complet de ce projet se trouve sur GitHub.

Comment créer une extension Chrome

Tout d’abord, nous devons créer un dossier vide dans lequel nous ajouterons nos fichiers HTML, CSS et JavaScript.

À l’intérieur du dossier, créons un fichier index.html avec ce code HTML passe-partout :




    
    



Maintenant, ajoutons un lien vers le CDN de Bootstrap dans la balise head. Nous utiliserons ici le cadre Bootstrap pour ne pas avoir à écrire de CSS supplémentaire dans cet exemple.


    
    
    

Dans la démo, nous avons vu que les enregistrements sont affichés sous forme de tableau. Nous devons donc maintenant travailler à la création d’un tableau.




    
    
    
  

Le code ci-dessus crée un tableau d’une largeur de 450px. Il existe quatre rubriques différentes dans un tableau : Date, Pays, Confirmé, et Décès.

Ici, vous pouvez voir que des ID différents ont été attribués à chaque donnée de tableau td. Nous utiliserons la valeur de ces ID en JavaScript pour mettre à jour les données du tableau. De plus, ici, nous avons chargé le JavaScript à la fin, après avoir chargé tout le contenu HTML.

Maintenant, puisque la table a été affichée, nous devons travailler sur l’écriture du JavaScript afin de récupérer les données de l’API.

Créons un fichier script.js et ajoutons le code suivant :

async function fetchData() {
    const res=await fetch ("https://api.coronavirus.data.gov.uk/v1/data") ;
    const record=await res.json() ;
    document.getElementById("date").innerHTML=record.data[0].date ;
    document.getElementById("areaName").innerHTML=record.data[0].areaName ;
    document.getElementById("latestBy").innerHTML=record.data[0].latestBy ;
    document.getElementById("deathNew").innerHTML=record.data[0].deathNew ;
}
fetchData() ;

Maintenant, décomposons le code ci-dessus :

  • Nous utilisons ici la fonction asynchrone appelée fetchData.
  • Les données sont récupérées à partir de l’API https://api.coronavirus.data.gov.uk/v1/data.
  • Les données JSON sont stockées dans une variable appelée record.
  • Le contenu HTML de td avec les ids date, areaName, latestBy et deathNew est mis à jour par les valeurs correspondantes de l’API.

Si nous vérifions le navigateur, nous pourrons voir le résultat suivant.

covid_browser
Dernier rapport Covid du Royaume-Uni – Aperçu du navigateur

Les données sont récupérées depuis l’API et sont mises à jour dès que les données de l’API changent.

Fichier Manifest.json

Comme nous l’avons vu précédemment, la création d’une extension Chrome est similaire à la création de toute application Web. La seule différence est que l’extension Chrome nécessite un fichier manifest.json dans lequel nous conservons toutes les configurations.

Le fichier manifest.json contient toutes les informations nécessaires à la création de l’extension Chrome. C’est le premier fichier que l’extension vérifie et tout est chargé à partir de ce fichier unique.

Voir aussi :  What is PostCSS? How to Use Plugins to Automate CSS Tasks

Maintenant, créons un fichier manifest.json dans le dossier racine et ajoutons le code suivant :

{
    "name" : "Covid-19 Stats UK",
    "version" : "1.0.0",
    "description" : "Dernières données covidées du Royaume-Uni",
    "manifest_version" : 3,
    "author" : "Sampurna Chapagain",
    "action":{
        "default_popup" : "index.html",
        "default_title" : "Dernier rapport Covid"
    }
}
Manifest.json

Notre fichier manifest.json contient la valeur des champs nom, version, description, manifest_version (3 dans ce cas, qui est la dernière version du manifeste), auteur et action. Dans le champ action, il y a la valeur de default_popup qui contient le chemin vers le fichier HTML qui est index.html dans cet exemple.

Vous pouvez jeter un coup d’oeil ici pour voir toutes les configurations d’un fichier manifest.json.

Maintenant, puisque nous avons également ajouté le fichier manifest.json, nous sommes prêts à ajouter ce projet comme une extension dans notre navigateur Chrome.

Pour cela, nous devons aller à Select More Tools et ensuite choisir Extensions dans le menu du navigateur comme le montre l’image ci-dessous :

Untitled-design--1-
Naviguer vers les extensions dans Chrome

Après avoir choisi Extensions, cela redirige vers la page des extensions dans Chrome. Assurez-vous d’activer le mode Développeur ici.

Untitled-design--1--1

Une fois que c’est fait, vous devez cliquer sur le bouton Load unpacked qui nous permettra de charger notre projet dans le magasin d’extensions de Chrome.

Maintenant, l’extension est disponible dans notre magasin d’extension Chrome. Vous pouvez également épingler l’extension dans le navigateur comme indiqué dans le gif ci-dessous :

pin_extension
Épingler l’extension au navigateur

Cette extension fonctionne uniquement dans votre navigateur. Si vous souhaitez la publier sur le Chrome Web Store, vous pouvez suivre ce lien.

Conclusion

Si vous avez quelques connaissances en HTML, CSS et JavaScript, vous pouvez facilement créer des extensions pour Chrome. J’espère qu’après avoir lu cet article de blog, vous créerez des extensions sympas.

Voir aussi :  Les meilleurs plugins Webstorm pour un codage efficace

Bon codage !