Comment créer une extension Chrome
Avez-vous déjà été bloqué dans une tâche répétitive et souhaitez-vous pouvoir automatiser votre processus ?
Êtes-vous fatigué de passer du temps à chercher une extension appropriée, pour vous retrouver avec une page de résultats de recherche vide ?
Heureusement, si vous êtes un utilisateur de Chrome, vous pouvez créer une extension Chrome en seulement huit étapes simples.
Comment savons nous? Nous avons créé notre propre extension Google Chrome Ubersuggest pour rationaliser nos systèmes de recherche de mots clés.
Dans cet article, nous vous montrerons comment créer une extension Chrome pour vous aider à innover dans vos tâches et à reprendre un travail productif.
Formation Offerte
- Passer de 0 à 25 000 visiteurs/mois
- Passer de 0 à 5 000 euros / mois
Qu'est-ce qu'une extension Chrome ?
Les extensions Google Chrome sont des programmes que vous pouvez installer dans votre navigateur Chrome pour modifier ses fonctionnalités.
Ces extensions peuvent vous aider à automatiser certaines fonctions de votre navigateur, à modifier les comportements existants et à améliorer la commodité de votre logiciel. Il existe même des extensions Chrome qui peuvent améliorer votre référencement .
Les extensions Chrome sont construites avec des scripts HTML, JavaScript et CSS et sont essentiellement de petits sites Web téléchargés sur la boutique Chrome.
La seule différence entre une extension Chrome et un site Web ordinaire est que les extensions contiennent un fichier manifeste, qui leur donne une fonction spécifique à exécuter.
Une autre façon de penser aux extensions est comme un morceau de code qui modifie l’expérience de votre navigateur.
Par exemple, l’ extension Grammarly vous permet d’éditer et de modifier votre copie au fur et à mesure que vous écrivez. L’ extension LastPass vous permettra de conserver votre gestionnaire de mots de passe dans votre navigateur.
Voici 13 de nos extensions Google Chrome préférées à considérer.
Que peuvent faire les extensions Chrome ?
Une extension personnalisée peut effectuer une seule tâche. Cette tâche doit être étroitement définie et facile à comprendre pour qu’elle fonctionne correctement.
Vous pouvez inclure plus d’un composant ou fonctionnalité, tant que tout dirige l’extension vers un objectif unique.
Les extensions Chrome fonctionnent en utilisant soit des actions de page, soit des actions de navigateur.
Une action de page est une action spécifique à certaines pages.
Une action du navigateur est pertinente, peu importe où vous vous trouvez dans le navigateur.
De plus, vos interfaces utilisateur doivent être conviviales et simples. Celles-ci peuvent aller d’une seule icône, pensez à l’icône Gmail, ou vous pouvez remplacer une page entière pour votre interface.
Votre livrable final sera un package .crx compressé que les utilisateurs téléchargeront et installeront.
Pourquoi devrais-je créer une extension Chrome ?
Google Chrome est le logiciel de navigation le plus utilisé au monde. Selon W3Counter, Chrome détient 65,3 % de la part de marché totale .
Vous devez également créer une extension Chrome si vous cherchez à ajouter une action simple à l’expérience de votre navigateur.
L’avantage des extensions Chrome par rapport aux applications classiques est qu’elles sont souvent plus faciles à créer et à entretenir. Parce que les extensions Chrome sont construites autour d’une fonction singulière, leur création nécessite moins de temps et de compétences.
La création d’une extension prend souvent beaucoup moins de temps que la création d’une toute nouvelle page Web.
Si vous voulez un moyen simple et efficace de modifier votre navigateur, alors la construction d’une extension est la voie à suivre.
Les extensions Chrome peuvent également améliorer votre trafic Web, voir plus dans la vidéo ci-dessous.
Qu'est-ce qui fait le succès d'une extension Chrome ?
Une extension Google Chrome réussie simplifiera une tâche ou une fonctionnalité et améliorera votre productivité.
Imaginons que vous soyez un constructeur de sites Web de commerce électronique et que vous recherchiez des magasins concurrents. Si vous installez l’ extension Koala Inspector , vous pourrez voir si Shopify a créé un site Web sur lequel vous atterrissez. Vous pouvez également voir quel thème a été utilisé, si de nouvelles mises à jour ont été effectuées et afficher les statistiques du produit.
Un autre exemple, le News Feed Eradicator pour Facebook , peut vous aider à améliorer votre productivité en bloquant votre fil d’actualités afin que vous puissiez vous concentrer sur vos tâches. C’est une fonction simple mais efficace qui peut vous aider à améliorer votre flux de travail quotidien.
Ces deux extensions exécutent une fonctionnalité simple qui améliore l’expérience utilisateur. Lors de la création d’une extension Chrome, gardez la simplicité à l’esprit. C’est le secret d’une extension réussie.
Votre guide étape par étape pour créer une extension Chrome
Il est maintenant temps de créer votre extension Chrome.
Il est important de noter que vous devez le faire sur Google Chrome. Cela peut sembler évident, mais tout le monde n’utilise pas Chrome comme navigateur par défaut.
Si vous n’êtes pas un utilisateur régulier de Chrome, assurez-vous de l’installer avant de commencer ces étapes.
Assurez-vous également de vérifier fréquemment votre travail au cours de ce processus. Il est beaucoup plus facile de corriger les erreurs de codage sur le moment qu’après avoir terminé.
Étape 1 : Déterminer ce dont votre extension a besoin
La première étape de la création de votre extension Chrome consiste à choisir une fonctionnalité.
Que fera-t-il ? A quoi cela ressemblera-t-il?
Si vous souhaitez créer une extension pour vos campagnes Google AdWords , c’est le moment de décider de son fonctionnement.
Une icône est requise pour toutes les extensions à télécharger sur la boutique Google Chrome. Assurez-vous de créer ou de sous-traiter une icône avant de commencer.
Une fois que vous savez ce que fera votre extension et à quoi vous voulez qu’elle ressemble, vous pouvez commencer à la construire.
Ci-dessous, nous allons vous montrer comment créer une extension qui vous permettra de changer la couleur d’arrière-plan de votre page actuelle.
Étape 2 : Créer un répertoire pour votre extension
Pour commencer à créer votre extension Chrome, vous devez créer un nouveau répertoire pour héberger tous les fichiers de votre extension.
Ceci est important car, pour que Chrome charge votre plugin, il doit pointer vers un dossier contenant vos fichiers d’extension.
Vous pouvez ajouter tous les fichiers dont vous aurez besoin pour votre extension dans ce répertoire.
Étape 3 : Créer le fichier manifeste de votre extension
L’étape suivante consiste à créer le fichier manifeste de votre extension .
Ce fichier indiquera à Chrome comment charger correctement l’extension.
Créez un fichier appelé manifest.json et ajoutez-le à votre répertoire.
Ensuite, ajoutez tout code dont vous pourriez avoir besoin dans votre fichier manifeste.
Pour nos besoins, le code ressemblera à ceci :
Étape 4 : Chargez votre extension dans Chrome et recherchez les erreurs
Il est maintenant temps de tester votre extension pour vous assurer que Chrome l’exécutera.
Suivez ces étapes:
- Accédez à chrome://extensions dans votre navigateur Google Chrome
- Cochez la case Mode développeur dans le coin supérieur droit
- Cliquez sur « Load Unpacked » pour voir une boîte de dialogue de sélection de fichier
- Sélectionnez votre répertoire d’extensions
Si votre extension est valide, elle devrait se charger immédiatement.
S’il n’est pas valide, vous verrez un message d’erreur en haut de votre page. Si tel est le cas, recherchez les erreurs, corrigez-les et essayez à nouveau de charger votre extension.
Les erreurs les plus courantes que les gens commettent ici sont les erreurs de syntaxe. Vérifiez toutes vos virgules et crochets et assurez-vous qu’ils sont correctement formatés.
Assurez-vous également que la case Activé à côté de votre extension est cochée afin que vous puissiez la voir en direct.
Étape 5 : Développer votre script d’arrière-plan
Ensuite, vous devrez ajouter un script d’arrière-plan pour dire à votre extension quoi faire.
Tout d’abord, créez un fichier nommé background.js dans votre répertoire d’extensions.
Ensuite, ajoutez votre script.
Pour notre extension de changement de couleur, nous utiliserons ce script :
Ce fichier alertera Chrome qu’il doit rechercher des instructions supplémentaires.
L’extension que nous construisons nécessitera également un événement d’écoute pour runtime.onInstalled dans le script d’arrière-plan.
Dans l’écouteur onInstall, l’extension définira une valeur avec l’API de stockage. Cela permet à plusieurs composants d’extension d’exécuter et de modifier cette valeur.
La plupart des API devront être enregistrées dans le champ « permissions » de votre manifeste. Comme ça:
Revenez ensuite à la page de gestion de votre extension et cliquez sur Recharger .
Vous devriez voir apparaître un nouveau champ pour les vues d’inspection . Il y aura également un lien bleu d’accompagnement qui lit la page d’arrière-plan.
Cliquez sur le lien et vous verrez le journal de la console du script d’arrière-plan , qui indique « Couleur d’arrière-plan par défaut définie sur vert ».
Des scripts de contenu peuvent également être ajoutés pour exécuter des scripts page par page.
Les scripts de contenu doivent être ajoutés directement dans votre fichier manifeste.
Étape 6 : Créez votre interface utilisateur
Votre extension peut avoir une gamme d’interfaces utilisateur, des fenêtres contextuelles aux info-bulles, et plus encore.
Pour commencer à concevoir votre interface, vous devez enregistrer une action de navigateur dans votre manifeste.
Pour notre exemple, nous utiliserons une fenêtre contextuelle. Le code ressemble à ceci :
Vous devrez déclarer ce code dans votre manifeste pour qu’il fonctionne.
Pour ce faire, ajoutez une action à votre manifeste et définissez popup.html comme default_popup de l’ action .
Votre script devrait ressembler à ceci :
Vous devrez déclarer ce code dans votre manifeste pour qu’il fonctionne.
Pour ce faire, ajoutez une action à votre manifeste et définissez popup.html comme default_popup de l’ action .
Votre script devrait ressembler à ceci :
Cette fenêtre contextuelle spécifique fait référence à un script CSS, vous devrez donc ajouter un autre fichier à votre répertoire. Nommez-le de manière appropriée et ajoutez ceci :
Pour notre exemple, vous voudrez également ajouter de la couleur à vos boutons contextuels. Plus tard, cette couleur sera également utilisée pour le fond de votre page.
Créez et ajoutez un fichier nommé popup.js avec le code suivant dans le répertoire.
Cela saisira le bouton de popup.html et demandera la valeur de la couleur. Incluez une balise de script à popup.js dans popup.html comme ceci :
À partir de là, vous pouvez ajouter des badges pour afficher l’état de votre extension. Par exemple, un badge peut indiquer à un utilisateur si l’extension est activée ou non, activée ou désactivée.
Les icônes de la barre d’outils relèvent de l’ action dans le champ default_icons .
Placez les images souhaitées dans votre répertoire, puis indiquez à l’extension comment utiliser les images.
Pour les images, les formats 16×16 et 32×32 sont recommandés. Toutes les icônes doivent être carrées, sinon elles risquent d’être déformées.
Si vous ne fournissez pas d’icône, Chrome en ajoutera une par défaut pour vous.
Lors de la conception de l’interface utilisateur de votre extension Chrome, restez simple et conviviale.
Google affirme que toutes les interfaces d’extension doivent ajouter à une expérience de navigation , et non en détourner l’attention.
Avant de continuer, rechargez votre extension et assurez-vous que tout semble correct.
Étape 7 : Ajoutez un peu de logique
La logique favorise l’interaction de votre interface utilisateur.
Ajoutez des scripts logiques à toutes les options d’interface utilisateur que vous avez incluses.
La logique peut indiquer à votre extension d’effectuer certaines actions, telles que ce qu’il faut faire lorsqu’un bouton est cliqué.
Par exemple, si vous avez utilisé le script popup.js, vous souhaiterez inclure votre logique à la fin.
Pour notre exemple, vous pouvez utiliser ce script :
Ce code déclenche un script de contenu injecté par programmation . Cela transforme la couleur d’arrière-plan de la page en la même couleur que votre bouton précédemment ajouté.
À partir de là, votre extension devrait être entièrement fonctionnelle. Tous les nouveaux ajouts seront des cloches et des sifflets.
Étape 8 : Testez votre extension
Tout comme les tests A/B en marketing , il est important de tester en permanence votre extension pour vous assurer que tout fonctionne.
Testez-le vous-même ou demandez à quelqu’un d’autre de le tester.
Si vous demandez à une autre personne de le tester, faites-le sans lui donner d’instructions pour vous assurer qu’il est intuitif à utiliser.
Effectuez les modifications nécessaires, puis testez à nouveau votre extension.
Même après avoir lancé votre extension, vous pouvez continuellement l’optimiser et l’améliorer. C’est ainsi que nous avons obtenu l’ extension Ubersuggest Chrome 2.0 .
Une fois que vous êtes satisfait, il est prêt à l’emploi.
Puis-je m'entraîner à créer une extension Chrome ?
Une fois que vous avez téléchargé votre extension sur le Chrome Store, elle est en ligne et utilisable.
Si vous ne souhaitez pas que votre extension soit accessible au public, vous pouvez toujours créer un référentiel GitHub à partir duquel les utilisateurs peuvent cloner.
Cela nécessite de donner aux gens l’accès à votre code source, alors assurez-vous d’en tenir compte avant de télécharger quoi que ce soit sur GitHub.
Vous pouvez également expérimenter avec des échantillons open source avant de plonger dans votre extension.
Des exemples d’extensions Chrome sont disponibles sur le GitHub de Google .
Conclusion
La création d’une extension Google Chrome personnalisée est un excellent moyen d’améliorer les fonctionnalités de votre navigateur et de créer des expériences utilisateur optimales .
De plus, votre outil peut générer du trafic vers votre site Web. La modification de cette expérience peut donc générer de nouveaux prospects pour votre entreprise.
N’oubliez pas que certaines des extensions Chrome les plus puissantes ont été créées par des personnes comme vous !
Cela peut être une courbe d’apprentissage pour obtenir votre extension là où vous le souhaitez, mais cela en vaut la peine lorsque vous avez une nouvelle fonctionnalité passionnante à montrer à vos amis et clients potentiels.
Quel type d’extensions Chrome avez-vous créé ?
Dernière Mise à jour le 23/06/2022
Loic Gros-Flandre
Loic Gros-Flandre est un blogueur à temps plein et un expert en marketing d’affiliation. Rejoignez Loic et ses lecteurs mensuels sur loicgrosflandre.com pour apprendre à faire évoluer votre influence à la vitesse de démarrage. Avant de commencer ce blog, Loic été un français lamba passionné par le marketing digital. Petite victoire après petite victoire il est devenu un vrai expert dans son domaine.