Hvis du er en Chrome-bruger, er det sandsynligt, at du bruger en eller flere udvidelser. Uanset om det er for at blokere annoncer eller for at tilføje funktioner, tilføjer extensions en masse hjælp til browseren. Så ville det ikke være cool, hvis du kunne bygge din egen Chrome-udvidelse? Det er nøjagtigt, hvad jeg vil vise dig her.
Se også vores artikel De bedste berøringsskærms Chromebooks
Når jeg vedligeholder websteder for klienter, kan jeg godt lide at vide, hvordan hvert websted fungerer med hensyn til indlæsning af sider. Da Google nu bruger belastningstider i sine SEO-beregninger, er det vigtigt, når man optimerer et websted, at vide, hvor hurtig eller langsom en side indlæses. Dette er endnu mere sandt, når du optimerer et websted til mobil. Det skal være let, hurtigt og indlæst uden fejl for at score meget inden for Google.
Dertil kommer, at en initiativrig person hos SitePoint også bruger det samme websted, som jeg gør for at kontrollere sidehastigheder, GTmetrix og har udviklet en Chrome-udvidelse til at kontrollere det, jeg tænkte, at jeg ville gøre det samme og lede dig igennem det.
Chrome-udvidelser
Chrome-udvidelser er mini-programmer, der tilføjer funktioner til kernebrowser. De kan være lige så lette som den, vi vil oprette eller så kompliceret som sikre adgangskodeadministratorer eller scriptemulatorer. De er skrevet på kompatible sprog som HTML, CSS og JavaScript og er selvstændige filer, der sidder ved siden af browseren.
De fleste udvidelser er nødvendigvis enkle ikon-klikudførelser, der udfører en given handling. Denne handling kan bogstaveligt talt være alt, hvad Chrome ønsker at gøre.
Lav din egen Chrome-udvidelse
Med lidt research kan du finjustere din udvidelse til at gøre, hvad du vil, men jeg kan godt lide ideen om en hastighedskontrol med en knap, så det går med det.
Normalt, når du kontrollerer webstedshastigheden, indsætter du URL'en til den side, du er på, i GTmetrix, Pingdom eller hvor som helst og rammer Analyse. Det tager kun et par sekunder, men ville det ikke være rart, hvis du bare kunne vælge et ikon i din browser og få det til at gøre det for dig? Når du har arbejdet igennem denne tutorial, vil du være i stand til at gøre netop det.
Du skal oprette en mappe på din computer for at holde alt i. Opret tre tomme filer, manifest.json, popup.html og popup.js. Højreklik i din nye mappe, og vælg Ny og tekstfil. Åbn hver af dine tre filer i den valgte teksteditor. Sørg for, at popup.html gemmes som en HTML-fil, og popup.js gemmes som en JavaScript-fil. Download dette eksempelikon fra Google også bare til formålet med denne tutorial.
Vælg manifest.json, og indsæt følgende i det:
{"manifest_version": 2, "name": "GTmetrix Page Speed Analyzer", "beskrivelse": "Brug GTmetrix til at analysere en indlæsningshastighed på en webside", "version": "1.0", "browser_action": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "tilladelser":}
Som du kan se, har vi givet den en titel og en grundlæggende beskrivelse. Vi har også kaldet en browserhandling, der inkluderer det ikon, vi har downloadet fra Google, og som vises i din browserstang og popup.html. Popup.html kaldes det, når du vælger udvidelsesikonet i browseren.
Åbn popup.html, og indsæt følgende i det.
Pagespeed Analyzer ved hjælp af GTMetrix
Popup.html kaldes det, når du vælger udvidelsesikonet i browseren. Vi har givet det et navn, mærket pop op og tilføjet en knap. Hvis du vælger knappen, kaldes popup.js, som er den fil, vi vil udfylde næste.
Åbn popup.js, og indsæt følgende i det:
document.addEventListener ('DOMContentLoaded', funktion () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('klik', funktion () {chrome.tabs.getSelected (null, funktion (fane) {d = dokument; var f = d.createElement ('form'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( 'input'); i.type = 'skjult'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, falsk);}, falsk);
Jeg vil ikke foregive at kende JavaScript, hvorfor det var praktisk, at SitePoint allerede havde filen på plads. Alt, hvad jeg ved, er, at det fortæller GTmetrix at analysere siden i den aktuelle Chrome-fane. Hvor det står 'chrome.tabs.getSelected', tager udvidelsen URL'en fra den aktive fane og indtaster den i webformularen. Det er så vidt jeg kan gå.
Test din Chrome-udvidelse
Nu har vi de grundlæggende rammer på plads, vi er nødt til at teste for at se, hvordan det fungerer.
- Åbn Chrome, vælg Flere værktøjer og udvidelser.
- Marker afkrydsningsfeltet ud for Developer-tilstand for at aktivere det.
- Vælg Indlæs udvidet udvidet fil og naviger til den fil, du oprettede til denne udvidelse.
- Vælg OK for at indlæse udvidelsen, og den skal vises på din udvidelsesliste.
- Marker afkrydsningsfeltet ud for Enabled på listen, og ikonet skal vises i din browser.
- Vælg ikonet i browseren, så pop op vises.
- Vælg knappen, Kontroller denne side nu!
Du skal se siden, der kontrolleres, og en præstationsrapport fra GTmetrix. Som du kan se fra min egen side i hovedbilledet, har jeg et lille arbejde at gøre for at fremskynde mit nye design!
At tage udvidelser fremad
Oprettelse af din egen Chrome-udvidelse er ikke så vanskelig som det kan se ud. Selvom det bestemt hjalp med at få et forspring med at kende en lille kode, er der hundredevis af ressourcer online, der viser dig det. Plus, Google har en enorm opbevaring af information, tutorials og gennemgangsgange, der vil hjælpe. Jeg brugte denne side fra Google Developer-webstedet til at hjælpe mig med denne udvidelse. Siden leder dig gennem alle dele af oprettelsen af udvidelsen og giver det ikon, vi brugte tidligere.
Med nok forskning kan du oprette udvidelser, der stort set gør alt, hvad browseren er i stand til. Nogle af de bedste udvidelser i Chrome-butikken er fra enkeltpersoner og ikke virksomheder, hvilket beviser, at du virkelig kan oprette dine egne.
Al kredit til John Sonmez på SitePoint for den originale guide. Han gjorde det hårde arbejde, jeg reorganiserede det lidt og opdaterede det lidt.
Har du oprettet din egen Chrome-udvidelse? Vil du promovere eller dele det? Fortæl os det nedenfor, hvis du gør det!
