Hoe een Chrome-extensie te maken

Als u Chrome gebruikt, gebruikt u waarschijnlijk een of meer extensies. Of het nu is om advertenties te blokkeren of om functies toe te voegen, extensies voegen veel hulpprogramma's toe aan de browser. Zou het niet cool zijn als je je eigen Chrome-extensie zou kunnen bouwen? Dat is precies wat ik je hier zal laten zien.

Zie ook ons ​​artikel De beste Chromebooks met touchscreen

Omdat ik websites onderhoud voor klanten, wil ik graag weten hoe elke site presteert met betrekking tot het laden van pagina's. Omdat Google nu laadtijden gebruikt in zijn SEO-berekeningen, is het belangrijk om te weten hoe snel of langzaam een ​​pagina wordt geladen bij het optimaliseren van een site. Dit geldt nog meer bij het optimaliseren van een website voor mobiel. Het moet licht, snel en zonder fouten worden geladen om hoog te scoren binnen Google.

Voeg daaraan toe dat het feit dat een ondernemende persoon op SitePoint ook dezelfde website gebruikt die ik doe om paginasnelheden te controleren, GTmetrix en een Chrome-extensie heeft ontwikkeld om het te controleren, ik dacht dat ik hetzelfde zou doen en je er doorheen zou leiden.

Chrome-extensies

Chrome-extensies zijn miniprogramma's die functies toevoegen aan de kernbrowser. Ze kunnen net zo eenvoudig zijn als die we gaan maken of zo ingewikkeld als veilige wachtwoordbeheerders of scriptemulators. Geschreven in compatibele talen zoals HTML, CSS en JavaScript, zijn dit zelfstandige bestanden die naast de browser staan.

De meeste extensies zijn noodzakelijkerwijs eenvoudige pictogramklikuitvoeringen die een bepaalde actie uitvoeren. Die actie kan letterlijk alles zijn wat je wilt dat Chrome doet.

Bouw je eigen Chrome-extensie

Met een beetje onderzoek kun je je extensie aanpassen om te doen wat je wilt, maar ik hou van het idee van een snelheidscontrole met één knop, dus dat gaat ook.

Gewoonlijk plakt u, wanneer u de sitesnelheid controleert, de URL van de pagina waarop u zich bevindt in GTmetrix, Pingdom of waar dan ook en drukt u op Analyseren. Het duurt maar een paar seconden, maar zou het niet mooi zijn als u gewoon een pictogram in uw browser zou kunnen selecteren en het voor u zou laten doen? Nadat u deze zelfstudie hebt doorlopen, kunt u precies dat doen.

U moet een map op uw computer maken om alles binnen te houden. Maak drie lege bestanden, manifest.json, popup.html en popup.js. Klik met de rechtermuisknop in uw nieuwe map en selecteer Nieuw en tekstbestand. Open elk van uw drie bestanden in uw gewenste teksteditor. Zorg ervoor dat popup.html wordt opgeslagen als een HTML-bestand en dat popup.js wordt opgeslagen als een JavaScript-bestand. Download dit voorbeeldpictogram ook van Google alleen voor deze tutorial.

Selecteer manifest.json en plak het volgende erin:

{"manifest_version": 2, "name": "GTmetrix Page Speed ​​Analyzer", "description": "GTmetrix gebruiken om de laadsnelheid van een webpagina te analyseren", "version": "1.0", "browser Lite": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "permissies":}

Zoals u ziet, hebben we het een titel en een basisbeschrijving gegeven. We hebben ook een browseractie genoemd met het pictogram dat we van Google hebben gedownload en dat in uw browserbalk en popup.html zal verschijnen. Popup.html wordt genoemd wanneer u het extensiepictogram in de browser selecteert.

Open popup.html en plak het volgende erin.

http: //popup.js

Pagespeed Analyzer met behulp van GTMetrix

Controleer paginasnelheid!

Popup.html wordt genoemd wanneer u het extensiepictogram in de browser selecteert. We hebben het een naam gegeven, de pop-up gelabeld en een knop toegevoegd. Als u de knop selecteert, wordt popup.js opgeroepen. Dit is het bestand dat we vervolgens zullen voltooien.

Open popup.js en plak het volgende erin:

document.addEventListener ('DOMContentLoaded', function () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('click', function () {chrome.tabs.getSelected (null, function (tab) {d) = document; var f = d.createElement ('form'); 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);

Ik zal niet doen alsof ik JavaScript ken en daarom was het handig dat SitePoint het bestand al had. Ik weet alleen dat het GTmetrix vertelt om de pagina op het huidige Chrome-tabblad te analyseren. Waar 'chrome.tabs.getSelected' staat, neemt de extensie de URL van het actieve tabblad en voert deze in het webformulier in. Dat is zover als ik kan gaan.

Uw Chrome-extensie testen

Nu we het basiskader hebben, moeten we testen om te zien hoe het werkt.

1. Open Chrome, selecteer Meer tools en extensies.
2. Schakel het selectievakje naast Ontwikkelaarsmodus in om dit in te schakelen.
3. Selecteer Uitgepakte extensie laden en ga naar het bestand dat u voor deze extensie hebt gemaakt.
4. Selecteer OK om de extensie te laden en deze zou in uw lijst met extensies moeten verschijnen.
5. Schakel het selectievakje naast Ingeschakeld in de lijst in en het pictogram zou in uw browser moeten verschijnen.
6. Selecteer het pictogram in de browser zodat de pop-up verschijnt.
7. Selecteer de knop, controleer deze pagina nu!

U zou de te controleren pagina en een prestatierapport van GTmetrix moeten zien. Zoals je kunt zien op mijn eigen site in de hoofdafbeelding, heb ik nog wat werk te doen om mijn nieuwe ontwerp te versnellen!

Extensies naar voren brengen

Het maken van uw eigen Chrome-extensie is niet zo moeilijk als het lijkt. Hoewel het zeker heeft geholpen om een ​​voorsprong te hebben door een beetje code te kennen, zijn er honderden bronnen online die je dat kunnen laten zien. Plus, Google heeft een enorme opslagplaats van informatie, tutorials en walkthroughs die zullen helpen. Ik heb deze pagina van de Google Developer-site gebruikt om me te helpen met deze extensie. De pagina leidt u door elk deel van het maken van de extensie en biedt het pictogram dat we eerder gebruikten.

Met voldoende onderzoek kunt u extensies maken die vrijwel alles doen wat de browser kan. Enkele van de beste extensies in de Chrome Store zijn van particulieren en niet van bedrijven, wat bewijst dat u echt uw eigen extensies kunt maken.

Alle dank aan John Sonmez op SitePoint voor de originele gids. Hij heeft het zware werk gedaan, ik heb het net een beetje gereorganiseerd en enigszins bijgewerkt.

Heb je je eigen Chrome-extensie gemaakt? Wil je het promoten of delen? Laat het ons hieronder weten als u dat doet!