Je vous propose de découvrir comment créer une extension pour le navigateur Web Google Chrome. Créer une extension peut paraître complexe, mais ne soyez pas effrayé ! En effet, les extensions Google Chrome peuvent être créées avec des langages que l'on connait bien : JS, l'HTML et CSS.
Le petit prérequis
D'abord vous devez activer le mode développeur dans les paramètres de Chrome pour pouvoir y charger votre extension. Pour cela vous allez dans vos paramètres > plus d'outils > extensions et vous cocher la case mode développeur. Vous devriez alors voir apparaitre trois nouveaux boutons pour charger des extensions.
Configurer son extension
Le point de départ de la création d'une extension est la création d'un fichier manifest.json à la racine de votre dossier. Il va contenir toutes les informations concernant la configuration de l'extension comme le nom, la description, les scripts à charger...
{
"manifest_version": 2, // Indique la version du manifest (toujours 2)
"name": "Tutoriel créer une extension", // Le nom de votre extension
"description": "Chaine YT Plati'Script", // La description
"version": "1.0", // La version en en l'occurrence la première donc 1.0
"permissions": [ // Les permissions, on y reviendra plus bas
"http://*/*",
"https://*/*",
],
"browser_action": { // Les paramètres
"default_icon" : "img/icon.png", // L'icône qui s'affiche en haut à droite de votre navigateur
"default_popup": "popup.html" // Le popup qui s'affichera quand vous cliquez sur l'îcone
},
"icons": { // L'îcone qui s'affichera lorse que vous êtes sur la page extensions des paramètre
"128" : "img/icon_128.png" // 128 = 128x128 la taille de votre image
}
}L'ensemble des paramètres disponibles pour ce fichier sont décrit dans la documentation.
Les permissions
Par défaut votre extension va être dans une sorte de bac à sable et n'aura accès à rien. Dans certains cas, nous souhaitons créer des extensions capables de communiquer avec des pages Web, ou avec certaines API du navigateur. Il faudra alors préciser dans notre configuration quelles permissions on souhaite obtenir (ces permissions seront demandées lors de l'installation de l'extension). Ces permissions peuvent prendre deux formes :
- Une chaîne de caractères représentant un type de permission en particulier, par exemple l'accès aux onglets
tabs(Liste des permissions) - Un motif représentant un format d'URL auquel on va accéder (Match Patterns)
"permissions": [ // Les permissions, on y reviendra plus bas
"http://*/*",
"https://*/*",
"tabs" // Tabs est la permission pour créer des nouveaux onglet
],Pour le "http:///" et le "https:///", on lui dit que l'extension peut fonctionner sur toutes les pages http ou https.
Créer une pop-up
Nous souhaitons créer une extension qui fonctionne sur un système de pop-up. Pour créer cette dernière, il nous suffit de créer une page HTML classique. Comme configuré dans le fichier manifest.json nous allons utiliser un fichier popup.html
<style>
h1,p{
text-align:center
}
</style>
<h1>Bonjour</h1>
<p>Bonjour je suis une popup toute simple<br />qui ne prend pas beaucoup de place</p>C'est tout ce que l'on a à faire pour le moment, lorsque l'on cliquera sur le bouton chrome se chargera automatiquement d'ouvrir la pop-up en changeant la page que l'on vient d'écrire.
Tester son extension
Nous souhaitons maintenant tester notre extension, pour cela il faudra passer par le panneau d'extension et cliquez sur le bouton Charger l'extension non empaquetée tt sélectionnez alors le dossier contenant votre extension. Automatiquement, vous devriez voir apparaître l'icône de votre extension.
Charger du script
Forcément une extension qui affiche une pop-up, c'est relativement limité ! Heureusement, on peut utiliser du JavaScript pour ajouter différents comportements à notre extension. Il existe plusieurs manières de charger du JavaScript suivant ce que l'on souhaite accomplir.
JavaScript dans la pop-up
Il est tout d'abord possible de charger du JavaScript directement dans la pop-up. En effet, il s'agit ici d'une page Web classique sur laquelle on peut charger n'importe quel fichier JavaScript avec la balise <script>.
<script src="monscript.js"></script> // On charge notre script dans le contenu HTML
<style>
h1,p{
text-align:center
}
</style>
<h1>Bonjour</h1>
<p>Bonjour je suis une popup toute simple<br />qui ne prend pas beaucoup de place</p>Ceci étant dit, le fichier JavaScript ne sera chargé qu'à l'ouverture de la pop-up, du coup si l'utilisateur n’appuie jamais sur le bouton, votre JavaScript ne sera jamais exécuté
JavaScript en "background"
Il est aussi possible d'exécuter du JavaScript en tâche de fond pour garder votre code actif même lorsque la pop-up n'est pas déployée. Pour cela il faudra leur modifier le fichier manifest.json pour inclure le chemin vers le fichier JavaScript que l'on souhaite charger.
{
.....
"background": { // On rajoute le paramètre "background"
"scripts": ["monscript.js"]
}
....
}Les Content Scripts
Les Content Scripts sont des fichiers JavaScript qui seront exécutés dans le contexte de la page Web et qui pourront interagir avec elle en utilisant le DOM. Contrairement aux scripts lancés depuis background ces scripts n'ont pas accès aux APIs chrome.*. De plus, ils fonctionnent de manière relativement isolée et n'ont pas accès aux fonctions JavaScript qui seraient définies dans la page Web sur lesquels ils sont injectés.
{
"name": "My extension",
...
"content_scripts": [
{
"matches": ["http://www.google.com/*"],
"css": ["mystyles.css"],
"js": ["jquery.js", "myscript.js"]
}
],
...
}On utilisera ce type de chargement lorsque l'on souhaite interagir directement avec la page Web pour changer la taille des polices ou encore manipuler certains éléments.
Les notifications Chrome
Enfin, petit bonus concernant les notifications. Sur Google Chrome il est possible de gérer un système de notification qui va s'afficher sur le bureau de l'utilisateur. Si vous souhaitez utiliser cette API, il vous faudra demander au préalable la permission dans le fichier manifest.json.
"permissions": [ // Les permissions, on y reviendra plus bas
"http://*/*",
"https://*/*",
"tabs", // Tabs est la permission pour créer des nouveaux onglet
"notifications" // Permet d'activer les notifications
],Une fois cela fait, on pourra utiliser la classe permettant de gérer les notifications.
var notification = new Notification('Titre de la notif !', {
icon: 'votreicon.jpg',
body: "Votre petite description de la notification",
});Cette class n'est pas propre à Google Chrome, mais est une nouvelle API dispose ni bloque dans plusieurs navigateurs. Si vous souhaitez avoir plus d'informations sur son fonctionnement, je vous invite à regarder la documentation. L'avantage dans le cas d'une extension, c'est que l'utilisateur a déjà accepté les permissions ce qui permet aux notifications de se lancer directement.
