Comment créer votre propre extension Google Chrome

Vous êtes-vous déjà trouvé insatisfait des fonctionnalités fournies avec votre navigateur Web? Même avec des heures passées à parcourir le Google Web Store à votre actif, il n'est pas toujours simple de cliquer sur "télécharger" pour améliorer votre expérience de navigation sur le Web.

C'est là qu'interviennent les extensions de navigateur. Dans cet article, nous allons explorer le processus de création de votre propre extension Google Chrome DIY à partir de zéro.

Qu'est-ce qu'une extension Google Chrome ?

Moderne navigateurs Web comme Google Chrome sont livrés avec un éventail de fonctionnalités qui les rendent faciles à utiliser et capables de répondre aux besoins de la plupart des utilisateurs. Cependant, l'extension de ces fonctionnalités de stock peut présenter de nombreux avantages différents. C'est pourquoi les développeurs de navigateurs permettent généralement de créer des extensions, des modules complémentaires et des plug-ins pour eux.

Google Chrome offre cette fonctionnalité, ce qui permet à toute personne ayant une expérience en développement Web de créer facilement ses propres extensions Chrome. Vous pouvez créer une extension en utilisant HTML, JavaScript et CSS, comme de nombreux sites Web.

Contrairement à un site Web, les extensions peuvent s'exécuter en arrière-plan pendant que vous naviguez, interagissant même parfois avec les sites que vous visitez.

Que fera notre extension Google Chrome ?

Nous allons créer une extension Chrome simple qui vous permettra de visiter le site Web Make Use Of et d'effectuer une recherche aléatoire en fonction des catégories d'articles trouvées sur le site. C'est un projet rapide et facile, mais vous apprendrez encore beaucoup.

Vous apprendrez à

• Créer une extension Google Chrome
• Insérer du code personnalisé dans des pages Web à l'aide d'une extension Chrome
• Créer des écouteurs d'événements et simuler des clics
• Générer des nombres aléatoires
• Travailler avec des tableaux et des variables

Construire votre propre extension Chrome DIY

Google a rendu étonnamment facile la création de votre propre Extensions chromées, il ne faudra donc pas longtemps avant que quelque chose fonctionne. Suivre les étapes ci-dessous ne prendra que 10 à 15 minutes, mais nous vous encourageons également à expérimenter avec votre propre code.

Étape 1: Création des fichiers

Vous pouvez stocker votre extension sur votre propre machine locale lorsque vous ne prévoyez pas de la distribuer. Nous n'avons qu'à créer quatre fichiers différents pour créer notre extension; un fichier HTML, un fichier CSS, un fichier JavaScript et un fichier JSON.

Nous avons appelé nos fichiers index.html, style.css, script.js et manifest.json. Le fichier manifeste doit avoir ce nom pour fonctionner correctement, mais vous pouvez donner aux autres les noms que vous voulez, tant que vous modifiez votre code en conséquence.

Vous devez placer ces fichiers dans le même dossier racine.

Étape 2: Création du fichier manifeste

Le fichier manifeste est fourni avec chaque extension Google Chrome. Il fournit des informations sur l'extension de Chrome tout en mettant en place certains paramètres de base. Ce fichier doit contenir un nom, un numéro de version, une description et une version du manifeste. Nous avons également inclus des autorisations et une action qui charge index.html comme la fenêtre contextuelle qui apparaît pour l'extension.

{
"Nom": "Recherche automatisée MakeUseOf.com",
"version": "1.0.0",
"la description": "Un outil de recherche pour trouver des articles intéressants",
"version_manifeste": 3,
"auteur": "Samuel Garbet",
"autorisations": ["stockage", "contenu déclaratif", "ongletactif", "script"],
"host_permissions": [""],
"action":{
"default_popup": "index.html",
"titre_par_défaut": "Recherche automatique MUO"
 }
}

Étape 3: Construire le HTML et le CSS

Avant de pouvoir commencer à écrire notre script, nous devons créer une interface utilisateur de base en utilisant HTML et CSS. Vous pouvez utiliser un Bibliothèque CSS comme Bootstrap pour éviter de créer la vôtre, mais nous n'avons besoin que de quelques règles pour notre extension.

Notre fichier index.html contient des balises html, head et body. La balise head contient un titre de page et un lien vers notre feuille de style, tandis que le corps contient une balise h1, un bouton qui vous amène à MakeUseOf.com, et un autre bouton que nous utiliserons comme déclencheur pour un scénario. Une balise de script juste à la fin du document inclut le script.js dossier.

<html>
<tête>
<Titre>Recherche automatique MUO</title>
<meta charset="utf-8">
<lien rel="feuille de style" href="style.css">
</head>
<corps>
<h1>Recherche automatique MUO</h1>
<un href="https://www.makeuseof.com/" cible="_Vide"><identifiant du bouton ="boutonUn">Allez sur MakeUseOf.com</button></un>
<identifiant du bouton ="boutonDeux">Lancer une recherche aléatoire</button>
</body>
<script src="script.js"></script>
</html>

Notre fichier CSS est encore plus simple que notre HTML, changeant le style de seulement cinq éléments. Nous avons des règles pour nos balises html et body, ainsi que pour les balises h1 et nos deux boutons.

html {
 largeur: 400 pixels ;
}
corps {
 famille de polices: Helvetica, sans empattement ;
}
h1 {
 aligner le texte: centrer ;
}
#boutonUn {
 rayon de bordure: 0 px ;
 largeur: 100 % ;
 rembourrage: 10px 0px ;
}
#boutonDeux {
 rayon de bordure: 0 px ;
 largeur: 100 % ;
 rembourrage: 10px 0px ;
 marge supérieure: 10px ;
}

Étape 4: Construire le JavaScript

Comme dernière étape de ce processus, il est temps de créer notre fichier script.js.

La première fonction de ce fichier, appelée insertScript(), est en place pour insérer l'autre fonction (recherche automatique()) dans la page actuelle. Cela nous permet de manipuler la page et d'utiliser les fonctionnalités de recherche déjà présentes sur le site MakeUseOf.com.

Ceci est suivi d'un écouteur d'événement qui attend jusqu'à ce que le bouton Démarrer la recherche aléatoire soit cliqué avant d'appeler la fonction que nous avons explorée ci-dessus.

Le recherche automatique() la fonction est un peu plus compliquée. Cela commence par un tableau contenant 20 des catégories sur le site Web de MUO, ce qui nous donne un bon échantillon à partir duquel tirer nos recherches aléatoires. Suite à cela, nous utilisons le Math.aléatoire() fonction pour générer un nombre aléatoire entre 0 et 19 afin de sélectionner une entrée de notre tableau.

Avec notre terme de recherche en main, nous devons maintenant simuler un clic sur un bouton pour ouvrir la barre de recherche MUO. Nous utilisons d'abord la console développeur Chrome pour trouver l'ID du bouton de recherche, puis nous l'ajoutons à notre code JavaScript avec le Cliquez sur() une fonction.

Comme le bouton de recherche, nous devons également trouver l'ID de la barre de recherche qui apparaît, nous permettant d'insérer le terme de recherche aléatoire que nous avons sélectionné. Avec ce complet, il suffit de soumettre le formulaire pour effectuer notre recherche.

// Cette fonction insère notre fonction autoSearch dans le code de la page
une fonctioninsertScript() {
// Cela sélectionne l'onglet ciblé pour l'opération et passe la fonction autoSearch
 chrome.tabs.query({actif: vrai, fenêtrecourante: vrai}, onglets => {
chrome.scripting.executeScript({cibler: {tabId: onglets[0].identifiant}, une fonction: recherche automatique})
 })
// Cela ferme la fenêtre contextuelle de l'extension pour sélectionner la barre de recherche du site Web
la fenêtre.proche();
}
// Il s'agit d'un écouteur d'événement qui détecte les clics sur notre "Démarrer Aléatoire Recherche" bouton
document.getElementById('boutonDeux').addEventListener('Cliquez sur', insérerScript)
// Cette fonction sélectionne un sujet au hasard dans un tableau et 
une fonctionrecherche automatique() {
// Ceci est un tableau pour stocker nos termes de recherche
 const termes de recherche = ["PC et mobile", "Mode de vie", "Matériel", "les fenêtres", "Mac",
"Linux", "Android", "Pomme", "l'Internet", "Sécurité",
"Programmation", "Divertissement", "Productivité", "Carrière", "Créatif",
"Jeux", "Des médias sociaux", "Maison intelligente", "DIY", "La revue"];
// Ceci génère un nombre aléatoire entre 0 et 19
laisser numéro_sélecteur = Math.étage(Math.Aléatoire() * 20);
// Cela utilise le nombre aléatoire pour sélectionner une entrée dans le tableau
laisser selection = searchTerms[selectorNumber] ;
// Ceci simule un clic sur l'icône de recherche du site MUO
 document.getElementById("js-recherche").Cliquez sur();
// Cela définit la barre de recherche du site Web MUO comme une variable
var barre de recherche = document.getElementById("js-search-input");
// Cela insère notre terme de recherche aléatoire dans la barre de recherche
 searchBar.value = searchBar.value + sélection ;
// Cela termine le processus en activant le formulaire du site Web
 document.getElementById("formulaire de recherche2").nous faire parvenir();
}

Étape 5: Ajouter vos fichiers à Chrome://extensions

Ensuite, il est temps d'ajouter les fichiers que vous venez de créer à la page des extensions Chrome. Une fois que vous avez fait cela, l'extension sera accessible dans Chrome et se mettra à jour chaque fois que vous apporterez des modifications à vos fichiers.

Ouvrez Google Chrome, accédez à chrome://extensions et assurez-vous que le curseur du mode développeur dans le coin supérieur droit est activé.

Cliquez sur Charger déballé dans le coin supérieur gauche, puis choisissez le dossier dans lequel vous avez enregistré vos fichiers d'extension et cliquez sur Sélectionner le dossier.

Maintenant que votre extension est chargée, vous pouvez cliquer sur l'icône de pièce de puzzle dans le coin supérieur droit et épingler votre extension à la barre des tâches principale pour un accès plus facile.

Vous devriez maintenant pouvoir accéder à l'extension terminée dans votre navigateur. Il convient de garder à l'esprit que cette extension ne fonctionnera que sur le site Web MUO ou sur les sites Web avec le même identifiant pour leur bouton et leur barre de recherche.

Construire une extension Google Chrome

Cet article ne fait qu'effleurer la surface des fonctionnalités possibles que vous pourriez intégrer à votre propre extension Google Chrome. Cela vaut la peine d'explorer vos propres idées une fois que vous avez appris les bases.

Les extensions Chrome peuvent vous aider à améliorer votre navigation, mais essayez de rester à l'écart de certaines des extensions Chrome louches connues pour une navigation sûre et sécurisée.

6 extensions Shady Google Chrome que vous devriez désinstaller dès que possible

Lire la suite

A propos de l'auteur