Avez-vous déjà été coincé dans une tâche répétitive et souhaiteriez-vous pouvoir automatiser votre processus?
Êtes-vous fatigué de passer du temps à rechercher une extension appropriée, pour rencontrer 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 Ubersuggest Google Chrome 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.
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.
Les extensions Chrome 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 le Chrome Store.
La seule différence entre une extension Chrome et un site Web standard est que les extensions Chrome contiennent un fichier manifeste, qui leur donne une fonction spécifique à exécuter.
Une autre façon de penser aux extensions Chrome est qu’elles sont un morceau de code qui change l’expérience de votre navigateur.
Par exemple, l’ extension Grammarly Chrome 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 à prendre en compte.
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 plusieurs composants ou fonctionnalités, à condition que tout oriente l’extension vers un objectif unique.
Les extensions Chrome fonctionnent en utilisant des actions de page ou 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 souhaitez 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. Étant donné que les extensions Chrome sont construites autour d’une fonction unique, leur création nécessite moins de temps et de compétences.
La création d’une extension Chrome 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, la création d’une extension Chrome est la voie à suivre.
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.
Une autre extension Chrome, News Feed Eradicator for Facebook , peut vous aider à améliorer votre productivité en bloquant votre fil d’actualité 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. Lorsque vous créez une extension Chrome, gardez à l’esprit la simplicité. 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 fur et à mesure que vous avancez dans ce processus. Il est beaucoup plus facile de corriger les erreurs de codage dans l’instant qu’après avoir terminé.
Créez une extension Chrome Étape 1: déterminez les besoins de votre extension
La première étape de la création de votre extension Chrome consiste à choisir une fonctionnalité.
Que va-t-il faire? 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 que toutes les extensions Chrome soient téléchargées dans le Google Chrome Store. Assurez-vous de créer ou d’externaliser une icône avant de commencer.
Une fois que vous savez ce que fera votre extension Chrome et à quoi vous voulez qu’elle ressemble, vous pouvez commencer à la créer.
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.
Créer une extension Chrome Étape 2: créer un répertoire pour votre extension
Pour commencer à créer votre extension Chrome, vous devrez 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 être dirigé 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.
Créer une extension Chrome É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 à votre fichier manifeste.
Pour nos besoins, le code ressemblera à ceci:
{
« Name »: « Exemple de mise en route »,
« Description »: « Créez une extension! »,
« Version »: « 1.0 »,
« Manifest_version »: 3
}
Créer une extension Chrome É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 du mode développeur dans le coin supérieur droit
- Cliquez sur «Load Unpacked» pour afficher une boîte de dialogue de sélection de fichiers
- Sélectionnez votre répertoire d’extension
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 font ici sont des 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 de pouvoir la voir s’exécuter en direct.
Créez une extension Chrome Étape 5: Développez votre script d’arrière-plan
Ensuite, vous devrez ajouter un script d’arrière-plan pour indiquer à votre extension quoi faire.
Commencez par créer un fichier nommé background.js dans votre répertoire d’extensions.
Ensuite, ajoutez votre script.
Pour notre extension à changement de couleur, nous utiliserons ce script:
{
« Name »: « Exemple de mise en route »,
« Description »: « Créez une extension! »,
« Version »: « 1.0 »,
« Manifest_version »: 3,
« Contexte »: {
« Service_worker »: « background.js »
}
}
Ce fichier avertira 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.
laissez color = ‘# 3aa757’;
chrome.runtime.onInstalled.addListener (() => {
chrome.storage.sync.set ({couleur});
console.log (‘Couleur d’arrière-plan par défaut définie sur% cgreen’, `color: $ {color}`);
});
La plupart des API devront être enregistrées dans le champ «permissions» de votre manifeste. Comme ça:
{
« Name »: « Exemple de mise en route »,
« Description »: « Créez une extension! »,
« Version »: « 1.0 »,
« Manifest_version »: 3,
« Contexte »: {
« Service_worker »: « background.js »
},
« Autorisations »: [« stockage »]
}
Ensuite, revenez à la page de gestion de vos extensions et cliquez sur Recharger .
Vous devriez voir apparaître un nouveau champ pour les vues Inspecter . 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 lit «La couleur d’arrière-plan par défaut est définie sur le 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.
Créez une extension Chrome É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:
<! DOCTYPE html>
<html>
<head>
<link rel = « styleheet » href = « button.css »>
</head>
<body>
<button id = « changeColor »> </button>
</body>
</html>
Vous devrez déclarer ce code dans votre manifeste pour qu’il fonctionne.
Pour ce faire, ajoutez une action à votre manifeste et ensemble popup.html comme de l’action de default_popup .
Votre script doit ressembler à ceci:
{
« Name »: « Exemple de mise en route »,
« Description »: « Créez une extension! »,
« Version »: « 1.0 »,
« Manifest_version »: 3,
« Contexte »: {
« Service_worker »: « background.js »
},
« Permissions »: [« stockage »],
« action »: {
« Default_popup »: « popup.html »
}
}
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 correctement et ajoutez ceci:
bouton {
hauteur: 30px;
largeur: 30px;
contour: aucun;
marge: 10px;
bordure: aucune;
rayon de la bordure: 2px;
}
button.current {
boîte-ombre: 0 0 0 2px blanc,
0 0 0 4px noir;
}
Pour notre exemple, vous voudrez également ajouter de la couleur à vos boutons contextuels. Plus tard, cette couleur sera également utilisée pour l’arrière-plan de votre page.
Créez et ajoutez un fichier nommé popup.js avec le code suivant dans le répertoire.
// Bouton d’initialisation avec la couleur préférée de l’utilisateur
let changeColor = document.getElementById (“changeColor”);
chrome.storage.sync.get (« couleur », ({couleur}) => {
changeColor.style.backgroundColor = couleur;
});
Cela récupérera le bouton de popup.html et demandera la valeur de couleur. Incluez une balise de script dans popup.js dans popup.html comme ceci:
<! DOCTYPE html>
<html>
<head>
<link rel = « styleheet » href = « button.css »>
</head>
<body>
<button id = « changeColor »> </button>
<script src = « popup.js »> </script>
</body>
</html>
À 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.
{
« Name »: « Exemple de mise en route »,
« Description »: « Créez une extension! »,
« Version »: « 1.0 »,
« Manifest_version »: 3,
« Contexte »: {
« Service_worker »: « background.js »
},
« Permissions »: [« stockage »],
« action »: {
« Default_popup »: « popup.html »,
« Default_icon »: {
« 16 »: « /images/get_started16.png »,
« 32 »: « /images/get_started32.png »,
« 48 »: « /images/get_started48.png »,
« 128 »: « /images/get_started128.png »
}
}
}
Pour les images, les formats 16 × 16 et 32 × 32 sont recommandés. Toutes les icônes doivent être carrées, sinon elles peuvent ê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 dit que toutes les interfaces d’ extension devraient ajouter à une expérience de navigation , pas en distraire.
Avant de continuer, rechargez votre extension et assurez-vous que tout semble correct.
Créer une extension Chrome Étape 7: ajouter une logique
Logic favorise l’interaction de votre interface utilisateur.
Ajoutez des scripts logiques aux options d’interface utilisateur que vous avez incluses.
Logic peut dire à 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 voudrez inclure votre logique à la fin de celui-ci.
Pour notre exemple, vous pouvez utiliser ce script:
// Lorsque le bouton est cliqué, injecter setPageBackgroundColor dans la page courante
changeColor.addEventListener (« clic », async () => {
let [tab] = attendre chrome.tabs.query ({active: true, currentWindow: true});
chrome.scripting.executeScript ({
cible: {tabId: tab.id},
fonction: setPageBackgroundColor,
});
});
// Le corps de cette fonction sera exécuté comme un script de contenu à l’intérieur du
// page actuelle
function setPageBackgroundColor () {
chrome.storage.sync.get (« couleur », ({couleur}) => {
document.body.style.backgroundColor = couleur;
});
}
function setPageBackgroundColor () {
chrome.storage.sync.get (« couleur », ({couleur}) => {
document.body.style.backgroundColor = couleur;
});
}
Ce code déclenche un script de contenu injecté par programme . Cela transforme la couleur d’arrière-plan de la page de la même couleur que votre bouton précédemment ajouté.
À partir de là, votre extension devrait être pleinement fonctionnelle. Tous les nouveaux ajouts seront des cloches et des sifflets.
Créer une extension Chrome Étape 8: tester 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.
Apportez les modifications nécessaires, puis testez à nouveau votre extension.
Même après avoir lancé votre extension, vous pouvez l’optimiser et l’améliorer en permanence. C’est ainsi que nous avons obtenu l’ extension Ubersuggest Chrome 2.0 .
Une fois que vous êtes satisfait, il est prêt à être utilisé.
Puis-je m’entraîner à créer une extension Chrome?
Une fois que vous avez importé votre extension dans le Chrome Store, elle est en ligne et utilisable.
Si vous ne souhaitez pas que votre extension Chrome soit accessible au public, vous pouvez toujours créer un dépôt GitHub à partir duquel les gens peuvent cloner.
Cela nécessite de donner aux gens l’accès à votre code source, alors assurez-vous de prendre cela en 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 .