Comment écrire une extension Chrome : guide étape par étape avec un exemple de code

Publié: 2022-04-10

Les extensions de navigateur peuvent être un excellent moyen de mettre à profit vos compétences en codage et de créer quelque chose qui vous permettra d'effectuer des tâches répétitives en quelques clics. Si vous voulez y parvenir, apprendre à écrire une extension Chrome est un bon début.

Google Chrome fournit de nombreuses API différentes à ses développeurs d'extensions, telles que l'ajout d'une nouvelle page, une fenêtre contextuelle, la création de notifications, la configuration d'un moteur de recherche par défaut ou même la création d'un élément de menu contextuel (le menu qui s'affiche lorsque vous cliquez avec le bouton droit sur sur une page).

Les possibilités sont illimitées, à partir d'une extension qui rend "Hello World!" à une extension qui vous permet de prendre une capture d'écran de la page Web.

Table des matières:

La structure de l'extension
Chargement de l'extension
Ajout d'une interface utilisateur contextuelle
Utilisation de l'API de notifications
Ajout d'un élément de menu contextuel
Utilisation de l'API de stockage pour stocker des données
Distribution de l'extension

Comment créer une extension #Google #Chrome : guide étape par étape pour les débutants

Cliquez pour tweeter

Dans ce didacticiel, nous allons vous montrer comment écrire une extension Chrome qui envoie des notifications au navigateur à partir d'un menu contextuel. Nous utiliserons également le menu contextuel et les API de stockage de données pour en tirer le meilleur parti. Nous l'appelons Notifier ! avec un point d'exclamation !

Le code de l'extension est public sur GitHub, alors n'hésitez pas à le bifurquer et à l'utiliser.

Comment écrire une extension Chrome : la structure

Avant d'aller de l'avant, vous devriez consulter la documentation du développeur de Google Chrome pour en savoir plus sur le développement d'extensions Chrome en général.

De plus, si vous cherchez à écrire une extension Chrome pour le Chrome Web Store, veuillez consulter leur politique à usage unique.

Commençons par créer un nouveau dossier nommé notify sur votre appareil. Ce dossier contiendra tout ce qui fera partie de votre extension.

Maintenant, vous devez créer un fichier manifeste qui contiendra toutes les informations sur notre extension. Créez un fichier appelé manifest.json et incluez le code suivant :

 { "name" : "Notify!" , "description" : "A Google Chrome extension!" , "version" : "1.0" , "manifest_version" : 3 , "icons" : { "48" : "/assets/icons/48.png" , "128" : "/assets/icons/128.png" } }
 Langage de code : JSON / JSON avec commentaires ( json )

Comme vous pouvez le voir, jusqu'à présent, il ne contient que des méta-informations sur votre extension, telles que son nom, sa description et sa version. Le manifest_version indique à Chrome quelle version de leur API d'extensions vous utilisez.

Chargement de l'extension

Une fois votre fichier manifeste en place, vous pouvez charger votre extension dans le navigateur Chrome :

Charger une extension dans Google Chrome

Ouvrez la page de gestion des extensions en accédant à chrome://extensions , ou vous pouvez également l'ouvrir à partir du menu Extensions dans les paramètres.

Une fois là-bas, activez le mode développeur et utilisez le bouton Charger décompressé pour sélectionner votre répertoire d'extension.

Vois ton extension ! Maintenant que votre extension est chargée, vous pouvez l'améliorer étape par étape et observer les changements.

Assurez-vous d'ajouter une icône pour votre extension dans le dossier assets/icons/ , sinon une icône par défaut apparaîtra.

Ajout d'une interface utilisateur contextuelle

Continuons en ajoutant une interface utilisateur à l'extension à partir de laquelle les utilisateurs peuvent interagir avec les options fournies.

Il existe plusieurs façons de procéder, comme l'ajout d'une page entière, mais une fenêtre contextuelle est généralement la solution pour la plupart des extensions.

Pour ajouter un popup à l'extension, vous devrez ajouter ceci à votre fichier manifest.json :

 "action" : { "default_popup" : "popup.html" , "default_icon" : { "48" : "/assets/icons/48.png" , "128" : "/assets/icons/128.png" } },
 Langage de code : JavaScript ( javascript )

Avec cela, vous indiquez à l'extension l'emplacement du fichier HTML de votre popup et les icônes par défaut. Il s'agit simplement de l'icône par défaut, car l'API vous permet de modifier l'icône lors de vos déplacements. Par exemple, si vous créez un test Google PageSpeed, on peut afficher différentes icônes sur le site Web en fonction de leur classement de page.

Popup de l'extension Google Chrome

Maintenant, vous pouvez ajouter le code HTML de votre popup au fichier, comme nous le faisons dans notre exemple :

 <!DOCTYPE html > < html > < head > < link rel = "stylesheet" href = "assets/css/popup.css" > </ head > < body > < div id = "notify-wrapper" > < div id = "notify-header" > < h1 > Notify! </ h1 > </ div > < div id = "notify-containers" > < div class = "notify-form" > < label for = "text" > Notification </ label > < textarea name = "text" id = "notify-text" placeholder = "Let's notify!" > </ textarea > </ div > < div class = notify-buttons > < p > Total: < span id = "notify-count" > </ span > </ p > < button class = "button" id = "notify-reset" > Reset </ button > < button class = "button primary" id = "notify-button" > Notify! </ button > </ div > </ div > </ div > < script src = "assets/js/popup.js" > </ script > </ body > </ html >
 Langage de code : HTML, XML ( xml )

Ce fichier HTML est également lié à une feuille de style et à un script pour ajouter du style et des fonctionnalités à notre popup.

Si vous suivez, vous pouvez obtenir le code CSS à partir d'ici. Nous ajouterons JavaScript au fichier plus tard dans ce didacticiel.

Jusqu'à présent, vous avez créé une extension Google Chrome avec une fenêtre contextuelle, et cela ne nous a pris que quelques lignes de code. Comme nous l'avons dit au début, créer une extension Google Chrome est très simple !

À l'avenir dans ce didacticiel, nous ajouterons des fonctionnalités à cette extension et en ferons plus qu'un simple espace réservé.

Utilisation de l'API de notification

Comme le nom de l'extension le suggère, il s'agit d'une extension de notifications, alors ajoutons-en !

Avant d'utiliser certaines des API, vous devez leur spécifier des autorisations dans le fichier manifest.json . L'une des raisons de le faire est que les utilisateurs de votre extension sachent quelles autorisations votre extension demande avant de les installer.

Pour les notifications, procédez comme suit :

 "permissions" : [ "notifications" ],
 Langage de code : JavaScript ( javascript )

Vous devez également ajouter un agent de service à l'extension pour envoyer des notifications. Pour cela, vous devez ajouter ceci à votre manifeste :

 "background" : { "service_worker" : "background.js" },
 Langage de code : JavaScript ( javascript )

Vous avez besoin d'un service worker pour l'API de notification car elle ne peut pas être utilisée directement à partir du fichier popup.js .

Dans le fichier background.js , vous devez ajouter le code suivant pour envoyer une notification :

 chrome.runtime.onMessage.addListener( data => { if ( data.type === 'notification' ) { chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : data.message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); } });
 Langage de code : JavaScript ( javascript )

Ici, nous utilisons l'écouteur d'événement onMessage pour obtenir le déclencheur pour envoyer des notifications à partir de la fenêtre contextuelle.

Nous utilisons également la méthode create pour créer une nouvelle notification. Les notifications peuvent être de différents types, mais ici le type "de base" est utilisé. Vous devriez jeter un œil à toutes les options disponibles.

Maintenant que la méthode create est en place, vous pouvez la lancer depuis le fichier popup.js comme ceci :

 const text = document .getElementById( 'notify-text' ); const notify = document .getElementById( 'notify-button' ); notify.addEventListener( 'click' , () => { chrome.runtime.sendMessage( '' , { type : 'notification' , message : text.value }); } );
 Langage de code : JavaScript ( javascript )

Ici, l'action sendMessage est utilisée pour déclencher la notification. Et voila ! Nous avons une extension qui déclenche une notification.

Assurez-vous que vous utilisez la dernière version de Google Chrome et que vous lui avez donné l'autorisation de déclencher des notifications. Bref, ne faites pas comme moi, qui a passé des heures à essayer de comprendre pourquoi les notifications n'apparaissaient pas.

Ajout d'un élément de menu contextuel

Comme mentionné dans l'introduction, le menu contextuel est le menu qui apparaît au clic droit :

Il peut y avoir plusieurs raisons pour lesquelles votre extension peut avoir un élément de menu contextuel. Un exemple frappant consiste à sélectionner du texte avec le curseur, puis à le rechercher sur Google.

Vous pouvez ajouter autant d'éléments que vous le souhaitez au menu contextuel, mais si votre extension ajoute plusieurs éléments, ils seront regroupés sous un élément parent.

Pour cela, vous devez également ajouter des autorisations à votre fichier manifeste :

 "permissions" : [ "contextMenus" , "notifications" ],
 Langage de code : JavaScript ( javascript )

Maintenant que vous avez ajouté des autorisations pour contextMenus , vous pouvez ajouter ceci à votre fichier background.js :

 chrome.runtime.onMessage.addListener( data => { if ( data.type === 'notification' ) { notify( data.message ); } }); chrome.runtime.onInstalled.addListener( () => { chrome.contextMenus.create({ id : 'notify' , title : "Notify!: %s" , contexts :[ "selection" ] }); }); chrome.contextMenus.onClicked.addListener( ( info, tab ) => { if ( 'notify' === info.menuItemId ) { notify( info.selectionText ); } } ); const notify = message => { return chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); };
 Langage de code : JavaScript ( javascript )

Le code ci-dessus inclut également le code de l'étape précédente pour déclencher une notification qui est maintenant résumée dans la fonction de notify afin qu'elle puisse être réutilisée.

L'action contextMenus.create est utilisée pour ajouter un élément au menu contextuel. Il est accroché à onInstalled car il n'a besoin d'être initialisé qu'une seule fois.

Après cela, comme à l'étape précédente, nous utilisons contextMenus.onClicked pour capturer le clic et déclencher une notification.

Cela peut être un moyen très astucieux de regrouper les fonctionnalités de votre extension. Si vous regardez autour des extensions utilisées sur votre navigateur, vous trouverez de nombreuses extensions utilisant intelligemment cet espace pour améliorer l'expérience de leur extension.

Utilisation de l'API de stockage pour stocker des données

Maintenant que votre extension a quelques fonctionnalités à montrer, jetons un coup d'œil à l'API de stockage. L'API de stockage est utile lorsque vous souhaitez stocker des données utilisateur sur votre extension.

Il existe deux types d'API de stockage : local et de synchronisation. Le stockage local, comme son nom l'indique, est enregistré dans votre navigateur et reste local. En comparaison, le stockage de synchronisation permet de synchroniser les données entre les navigateurs utilisant le même compte Google. Pour nos besoins, nous utilisons le stockage local.

Tout d'abord, vous devez ajouter une autorisation de stockage à votre fichier manifeste :

 "permissions" : [ "contextMenus" , "notifications" , "storage" ],
 Langage de code : JavaScript ( javascript )

Après cela, vous pouvez utiliser le stockage, les méthodes storage.local.get et storage.local.set pour récupérer ou enregistrer les données.

Vous pouvez ajouter le code suivant à votre fichier popup.js :

 const reset = document .getElementById( 'notify-reset' ); const counter = document .getElementById( 'notify-count' ); chrome.storage.local.get( [ 'notifyCount' ], data => { let value = data.notifyCount || 0 ; counter.innerHTML = value; } ); chrome.storage.onChanged.addListener( ( changes, namespace ) => { if ( changes.notifyCount ) { let value = changes.notifyCount.newValue || 0 ; counter.innerHTML = value; } }); reset.addEventListener( 'click' , () => { chrome.storage.local.clear(); text.value = '' ; } );
 Langage de code : JavaScript ( javascript )

Ce code fait deux choses :

Il met à jour le nombre de notifications dans la fenêtre contextuelle lorsque nous ouvrons la fenêtre contextuelle ou que la valeur de stockage change. Pour écouter le changement de stockage, storage.onChanged est utilisé.
En partie, nous effaçons le stockage lorsque l'utilisateur clique sur le bouton de réinitialisation.

Le code ci-dessus permet d'obtenir le dernier décompte et de le mettre à jour. Maintenant, la configuration des données reste. Pour cela, vous pouvez mettre à jour notre fonction de notify avec ceci :

 const notify = message => { chrome.storage.local.get( [ 'notifyCount' ], data => { let value = data.notifyCount || 0 ; chrome.storage.local.set({ 'notifyCount' : Number ( value ) + 1 }); } ); return chrome.notifications.create( '' , { type : 'basic' , title : 'Notify!' , message : message || 'Notify!' , iconUrl : './assets/icons/128.png' , } ); };
 Langage de code : JavaScript ( javascript )

Ici, nous obtenons les dernières données de stockage, puis nous les mettons à jour avec le dernier décompte.

De même, vous pouvez utiliser l'API chrome.storage.sync pour synchroniser les options entre les navigateurs.

Distribution de l'extension

Toutes nos félicitations! Vous l'avez fait! Vous avez créé avec succès une extension Google Chrome qui utilise de nombreuses parties différentes de l'expérience Google Chrome, notamment :

Popups
API de notification
Menu contextuel
API de stockage

Si vous souhaitez voir le code de cette extension, vous pouvez l'obtenir dans ce référentiel Notify GitHub.

Nous aimons tous montrer l'excellent travail que nous faisons au monde. Une fois votre extension terminée, vous pouvez la soumettre au Chrome Web Store pour que les autres utilisateurs de Chrome la téléchargent.

Si vous souhaitez explorer d'autres options que Google Chrome propose aux développeurs d'extensions, nous vous recommandons de consulter la documentation officielle.

J'espère que cet article a contribué à vous apprendre à écrire une extension Chrome. Nous sommes ravis de voir ce que vous pouvez créer, alors faites-nous part de vos aventures avec le développement d'extensions Google Chrome dans la section commentaires ci-dessous.

Vous pourriez également être intéressé par :

18 meilleures agences WordPress pour le développement Web, la conception, le marketing, etc.
15 meilleurs logiciels de conception de sites Web disponibles sur le marché en ce moment
9 des meilleures solutions de création de sites Web comparées et testées

Comment créer une #extension Google #Chrome : guide étape par étape pour les débutants

Cliquez pour tweeter

…

N'oubliez pas de rejoindre notre cours intensif sur l'accélération de votre site WordPress. Avec quelques correctifs simples, vous pouvez même réduire votre temps de chargement de 50 à 80 % :

Mise en page et présentation par Chris Fitzgerald et Karol K.