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 ?
Les navigateurs Web modernes tels que Google Chrome sont dotés d’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 vos propres extensions Chrome, 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.
"name": "MakeUseOf.com Automated Search",
"version": "1.0.0",
"description": "A search tool to find interesting articles",
"manifest_version": 3,
"author": "Samuel Garbett",
"permissions": ["storage", "declarativeContent", "activeTab", "scripting"],
"host_permissions": [""],
"action":
"default_popup": "index.html",
"default_title": "MUO Auto Search"
É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 une 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 script. Une balise de script juste à la fin du document inclut le script.js dossier.
<html>
<head>
<title>MUO Auto Search</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>MUO Auto Search</h1>
<a href="https://www.makeuseof.com/" target="_blank"><button id="buttonOne">Go to MakeUseOf.com</button></a>
<button id="buttonTwo">Start Random Search</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
width: 400px;
body
font-family: Helvetica, sans-serif;
h1
text-align: center;
border-radius: 0px;
width: 100%;
padding: 10px 0px;
}
border-radius: 0px;
width: 100%;
padding: 10px 0px;
margin-top: 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 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 de développement 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.
function insertScript()
chrome.tabs.query(active: true, currentWindow: true, tabs =>
chrome.scripting.executeScript(target: tabId: tabs[0].id, function: autoSearch)
)
window.close();
// This is an event listener that detects clicks on our "Start Random Search" button
document.getElementById('buttonTwo').addEventListener('click', insertScript)
function autoSearch()
const searchTerms = ["PC and Mobile", "Lifestyle", "Hardware", "Windows", "Mac",
"Linux", "Android", "Apple", "Internet", "Security",
"Programming", "Entertainment", "Productivity", "Career", "Creative",
"Gaming", "Social Media", "Smart Home", "DIY", "Review"];
let selectorNumber = Math.floor(Math.random() * 20);
let selection = searchTerms[selectorNumber];
document.getElementById("js-search").click();
var searchBar = document.getElementById("js-search-input");
searchBar.value = searchBar.value + selection;
document.getElementById("searchform2").submit();
É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.
Lire la suite
A propos de l’auteur