Si vous êtes un utilisateur de Chrome, il est probable que vous utilisiez une ou plusieurs extensions. Que ce soit pour bloquer des publicités ou pour ajouter des fonctionnalités, les extensions ajoutent de nombreux utilitaires au navigateur. Ce ne serait donc pas cool si vous pouviez créer votre propre extension Chrome? C'est exactement ce que je vais vous montrer ici.
Consultez également notre article Les meilleurs Chromebooks à écran tactile
Comme je gère des sites Web pour les clients, j'aime savoir comment chaque site se comporte en ce qui concerne le chargement des pages. Comme Google utilise maintenant les temps de chargement dans ses calculs de référencement, il est important de connaître le temps de chargement d'une page ou son ralentissement pour optimiser un site. Cela est encore plus vrai lors de l'optimisation d'un site Web pour mobile. Il doit être léger, rapide et se charger sans aucune erreur pour marquer fort au sein de Google.
Ajoutons à cela le fait qu'une personne entreprenante chez SitePoint utilise également le même site Web que celui utilisé pour vérifier la vitesse des pages, GTmetrix et a développé une extension Chrome pour le vérifier. Je pensais en faire autant et vous guider à travers.
Extensions Chrome
Les extensions Chrome sont des mini-programmes qui ajoutent des fonctionnalités au navigateur principal. Ils peuvent être aussi simples que celui que nous allons créer ou aussi compliqués que des gestionnaires de mots de passe sécurisés ou des émulateurs de scripts. Écrit dans des langages compatibles tels que HTML, CSS et JavaScript, il s’agit de fichiers autonomes placés à côté du navigateur.
Par nécessité, la plupart des extensions sont de simples exécutions d'icône et de clic exécutant une action donnée. Cette action peut littéralement être tout ce que vous voulez que Chrome fasse.
Construisez votre propre extension Chrome
Avec un peu de recherche, vous pouvez modifier votre extension pour faire ce que vous voulez, mais j'aime bien l'idée d'une vérification de la vitesse à un bouton.
Habituellement, lorsque vous vérifiez la vitesse du site, vous collez l’URL de la page où vous vous trouvez dans GTmetrix, Pingdom ou ailleurs, puis cliquez sur Analyser. Cela ne prend que quelques secondes mais ne serait-il pas agréable de pouvoir simplement sélectionner une icône sur votre navigateur et de le faire pour vous? Après avoir suivi ce didacticiel, vous pourrez le faire.
Vous devrez créer un dossier sur votre ordinateur pour tout conserver. Créez trois fichiers vides, manifest.json, popup.html et popup.js. Faites un clic droit dans votre nouveau dossier et sélectionnez Nouveau et fichier texte. Ouvrez chacun de vos trois fichiers dans l’éditeur de texte de votre choix. Assurez-vous que popup.html est enregistré en tant que fichier HTML et popup.js en tant que fichier JavaScript. Téléchargez également cet exemple d'icône de Google uniquement pour les besoins de ce didacticiel.
Sélectionnez manifest.json et collez-y les éléments suivants:
{"manifest_version": 2, "name": "GTmetrix Page Speed Analyzer", "description": "Utilisez GTmetrix pour analyser la vitesse de chargement d'une page de site Web", "version": "1.0", "browser_action": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "permissions":}
Comme vous pouvez le constater, nous lui avons donné un titre et une description de base. Nous avons également appelé une action de navigateur qui inclut l'icône que nous avons téléchargée de Google et qui apparaîtra dans la barre de votre navigateur et dans le popup.html. Popup.html est ce qui est appelé lorsque vous sélectionnez l’icône d’extension dans le navigateur.
Ouvrez popup.html et collez le texte suivant dans celui-ci.
Pagespeed Analyzer utilisant GTMetrix
Popup.html est ce qui est appelé lorsque vous sélectionnez l’icône d’extension dans le navigateur. Nous lui avons donné un nom, étiqueté le popup et ajouté un bouton. Sélectionner le bouton appellera popup.js qui est le fichier que nous compléterons ensuite.
Ouvrez popup.js et collez-y les éléments suivants:
document.addEventListener ('DOMContentLoaded', function () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('clic', function () {chrome.tabs.getSelected (null, function (tab = document; var f = d.createElement ('formulaire'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( 'input'); i.type = 'hidden'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, false);}, false);
Je ne prétends pas connaître JavaScript, raison pour laquelle il était pratique que SitePoint ait déjà le fichier en place. Tout ce que je sais, c'est que GTmetrix doit analyser la page dans l'onglet Chrome actuel. Là où il est écrit 'chrome.tabs.getSelected', l'extension prend l'URL de l'onglet actif et l'insère dans le formulaire Web. C'est aussi loin que je peux aller.
Tester votre extension Chrome
Maintenant que le cadre de base est en place, nous devons tester son fonctionnement.
- Ouvrez Chrome, sélectionnez Autres outils et extensions.
- Cochez la case en regard du mode développeur pour l'activer.
- Sélectionnez Charger une extension décompressée et accédez au fichier que vous avez créé pour cette extension.
- Sélectionnez OK pour charger l'extension. Elle devrait apparaître dans votre liste d'extensions.
- Cochez la case Enabled dans la liste pour que l'icône apparaisse dans votre navigateur.
- Sélectionnez l'icône dans le navigateur pour faire apparaître la fenêtre contextuelle.
- Sélectionnez le bouton, vérifiez cette page maintenant!
Vous devriez voir la page en cours de vérification et un rapport de performance de GTmetrix. Comme vous pouvez le voir sur l'image principale de mon propre site, j'ai un peu de travail à faire pour accélérer mon nouveau design!
Faire avancer les extensions
Créer votre propre extension Chrome n'est pas aussi difficile que cela puisse paraître. Bien qu'il soit certainement utile de connaître un peu de code, il existe des centaines de ressources en ligne qui vous le montreront. De plus, Google dispose d'un vaste référentiel d'informations, de didacticiels et de procédures pas à pas qui vous aideront. J'ai utilisé cette page du site de Google pour les développeurs pour m'aider à utiliser cette extension. La page vous guide à travers toutes les étapes de la création de l'extension et fournit l'icône que nous avons utilisée précédemment.
Avec suffisamment de recherche, vous pouvez créer des extensions qui font à peu près tout ce dont le navigateur est capable. Certaines des meilleures extensions du magasin Chrome proviennent d’individus et non d’entreprises, ce qui prouve que vous pouvez réellement créer le vôtre.
Tout crédit à John Sonmez de SitePoint pour le guide original. Il a fait le travail difficile, je viens de le réorganiser un peu et de le mettre à jour légèrement.
Avez-vous créé votre propre extension Chrome? Voulez-vous promouvoir ou partager? Faites-nous savoir ci-dessous si vous le faites!
