Om du är en Chrome-användare är det troligt att du kommer att använda en eller flera tillägg. Oavsett om det är för att blockera annonser eller lägga till funktioner, lägger tillägg till mycket nytta i webbläsaren. Så skulle det inte vara coolt om du kunde bygga din egen Chrome-förlängning? Det är exakt vad jag ska visa dig här.
Se även vår artikel De bästa pekskärmen Chromebooks
När jag underhåller webbplatser för kunder vill jag veta hur varje webbplats presterar när det gäller laddning av sidor. Eftersom Google nu använder belastningstider i sina SEO-beräkningar är det viktigt att veta hur snabb eller långsamt en sida laddas när man optimerar en webbplats. Detta är ännu sant när du optimerar en webbplats för mobil. Det måste vara lätt, snabbt och laddat utan några fel för att få hög poäng inom Google.
Lägg till det faktum att en driftig person på SitePoint också använder samma webbplats som jag gör för att kontrollera sidhastigheter, GTmetrix och har utvecklat en Chrome-förlängning för att kontrollera det, jag trodde att jag skulle göra samma sak och leda dig genom det.
Chrome-tillägg
Chrome-tillägg är miniprogram som lägger till funktioner i den centrala webbläsaren. De kan vara lika enkla som den vi ska skapa eller lika komplicerade som säkra lösenordshanterare eller skriptemulatorer. De är skriven på kompatibla språk som HTML, CSS och JavaScript och är fristående filer som sitter bredvid webbläsaren.
Av nödvändighet är de flesta tillägg enkla ikonklickutföranden som utför en viss åtgärd. Den åtgärden kan bokstavligen vara allt du vill att Chrome ska göra.
Bygg ditt eget Chrome-tillägg
Med lite research kan du finjustera din förlängning för att göra vad du vill men jag gillar tanken på en hastighetskontroll med en knapp så kommer med det.
Vanligtvis när du kontrollerar webbplatsens hastighet klistrar du in webbadressen till sidan du befinner dig i GTmetrix, Pingdom eller vart som helst och trycker på Analysera. Det tar bara några sekunder men skulle det inte vara trevligt om du bara kunde välja en ikon i din webbläsare och få det att göra det åt dig? När du har arbetat igenom denna självstudie kommer du att kunna göra just det.
Du måste skapa en mapp på din dator för att hålla allt i. Skapa tre tomma filer, manifest.json, popup.html och popup.js. Högerklicka i din nya mapp och välj Ny och textfil. Öppna alla dina tre filer i din textredigerare som du väljer. Se till att popup.html sparas som en HTML-fil och popup.js sparas som en JavaScript-fil. Ladda ner denna exempelikon från Google också bara för syftet med denna handledning.
Välj manifest.json och klistra in följande i den:
{"manifest_version": 2, "name": "GTmetrix Page Speed Analyzer", "description": "Använd GTmetrix för att analysera en laddningshastighet på en webbplats", "version": "1.0", "browser_action": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "behörigheter":}
Som ni ser har vi gett den en titel och en grundläggande beskrivning. Vi har också kallat en webbläsaråtgärd som innehåller ikonen som vi laddade ner från Google som kommer att visas i din webbläsarfält och popup.html. Popup.html heter det när du väljer förlängningsikonen i webbläsaren.
Öppna popup.html och klistra in följande i den.
Pagespeed Analyzer med GTMetrix
Popup.html heter det när du väljer förlängningsikonen i webbläsaren. Vi har gett det ett namn, märkt popupen och lagt till en knapp. Om du väljer knappen kommer popup.js att anropas, vilket är filen vi kommer att slutföra nästa.
Öppna popup.js och klistra in följande i den:
document.addEventListener ('DOMContentLoaded', funktion () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('klicka', funktion () {chrome.tabs.getSelected (null, funktion (tab) {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 = 'dold'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, falsk);}, falsk);
Jag låtsas inte veta JavaScript, varför det var praktiskt att SitePoint redan hade filen på plats. Allt jag vet är att det berättar för GTmetrix att analysera sidan i den aktuella Chrome-fliken. Där det står "chrome.tabs.getSelected" tar tillägget URL från den aktiva fliken och matar in den i webbformuläret. Det är så långt jag kan gå.
Testar ditt Chrome-tillägg
Nu har vi den grundläggande ramen på plats, vi måste testa för att se hur det fungerar.
- Öppna Chrome, välj Fler verktyg och tillägg.
- Markera rutan bredvid utvecklarläget för att aktivera det.
- Välj Ladda upppackat tillägg och navigera till filen du skapade för detta tillägg.
- Välj OK för att ladda tillägget och det ska visas i din tilläggslista.
- Markera rutan bredvid Aktiverad i listan och ikonen ska visas i din webbläsare.
- Välj ikonen i webbläsaren så visas popup-fönstret.
- Välj knappen, Kontrollera den här sidan nu!
Du bör se sidan som kontrolleras och en prestationsrapport från GTmetrix. Som ni ser på min egen webbplats i huvudbilden, har jag lite arbete att göra för att påskynda min nya design!
Tar förlängningar framåt
Att skapa ditt eget Chrome-tillägg är inte så svårt som det kan verka. Även om det verkligen hjälpte till att få ett försprång med att känna till lite kod, finns det hundratals resurser online som kommer att visa dig det. Dessutom har Google ett enormt arkiv med information, handledning och genomgång som hjälper. Jag använde den här sidan från Google Developer-webbplatsen för att hjälpa mig med detta tillägg. Sidan leder dig genom alla delar av att skapa tillägget och ger den ikonen vi använde tidigare.
Med tillräckligt med forskning kan du skapa tillägg som gör ganska mycket vad webbläsaren kan. Några av de bästa tilläggarna i Chrome-butiken kommer från individer och inte företag, vilket bevisar att du verkligen kan skapa dina egna.
All kredit till John Sonmez på SitePoint för den ursprungliga guiden. Han gjorde det hårda arbetet, jag omorganiserade det lite och uppdaterade det något.
Har du skapat ditt eget Chrome-tillägg? Vill du marknadsföra eller dela det? Låt oss veta nedan om du gör det!
