Hvis du er Chrome-bruker, er det sannsynlig at du bruker en eller flere utvidelser. Enten det er for å blokkere annonser eller legge til funksjoner, utvidelser legger mye verktøy til nettleseren. Så ville det ikke være kult om du kunne bygge din egen Chrome-utvidelse? Det er akkurat det jeg vil vise deg her.
Se også vår artikkel De beste berøringsskjerm-Chromebookene
Når jeg vedlikeholder nettsteder for klienter, liker jeg å vite hvordan hvert enkelt nettsted presterer med hensyn til lasting av sider. Ettersom Google nå bruker belastningstider i sine SEO-beregninger, er det viktig å vite hvor raskt eller sakte en side laster, når du skal optimalisere et nettsted. Dette er enda mer sant når du optimaliserer et nettsted for mobil. Det må være lett, raskt og lastet uten feil for å score høyt i Google.
Legg til det, det faktum at en initiativrik person hos SitePoint også bruker det samme nettstedet jeg gjør for å sjekke sidehastigheter, GTmetrix og har utviklet en Chrome-utvidelse for å sjekke det, jeg trodde jeg ville gjøre det samme og lede deg gjennom det.
Chrome-utvidelser
Chrome-utvidelser er miniprogrammer som legger til funksjoner i kjerneleseren. De kan være like greie som den vi skal lage eller så kompliserte som sikre passordbehandlere eller skriptemulatorer. De er skrevet på kompatible språk som HTML, CSS og JavaScript, og er selvstendige filer som sitter ved siden av nettleseren.
De fleste utvidelser er av nødvendighet enkle ikoneklikk-utførelser som utfører en gitt handling. Denne handlingen kan bokstavelig talt være hva du vil at Chrome skal gjøre.
Bygg din egen Chrome-utvidelse
Med litt research kan du finjustere utvidelsen din til å gjøre hva du vil, men jeg liker ideen om en hastighetskontroll med en knapp, så kommer med det.
Når du sjekker nettstedets hastighet, pleier du å lime inn URL-adressen til siden du er på i GTmetrix, Pingdom eller hvor som helst og trykke på Analyse. Det tar bare noen sekunder, men ville det ikke være fint hvis du bare kan velge et ikon i nettleseren din og få det til å gjøre det for deg? Etter å ha jobbet gjennom denne opplæringen, vil du kunne gjøre akkurat det.
Du må opprette en mappe på datamaskinen din for å holde alt i. Lag tre tomme filer, manifest.json, popup.html og popup.js. Høyreklikk i den nye mappen og velg Ny og tekstfil. Åpne hver av de tre filene dine i ønsket tekstredigeringsprogram. Forsikre deg om at popup.html er lagret som en HTML-fil og popup.js er lagret som en JavaScript-fil. Last ned dette eksempelikonet fra Google også bare for formålene med denne opplæringen.
Velg manifest.json og lim inn følgende i det:
{"manifest_version": 2, "name": "GTmetrix Page Speed Analyzer", "beskrivelse": "Bruk GTmetrix til å analysere en hastighet på en webside side", "versjon": "1.0", "browser_action": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "tillatelser":}
Som du kan se, har vi gitt den en tittel og en grunnleggende beskrivelse. Vi har også kalt en nettleserhandling som inkluderer ikonet vi lastet ned fra Google som vises i nettleserlinjen og popup.html. Popup.html heter det når du velger utvidelsesikonet i nettleseren.
Åpne popup.html og lim inn følgende i den.
Pagespeed Analyzer ved bruk av GTMetrix
Popup.html heter det når du velger utvidelsesikonet i nettleseren. Vi har gitt den et navn, merket popup-en og lagt til en knapp. Å velge knappen vil kalle popup.js, som er filen vi vil fullføre neste.
Åpne popup.js og lim inn følgende i den:
document.addEventListener ('DOMContentLoaded', funksjon () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('klikk', funksjon () {chrome.tabs.getSelected (null, funksjon (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 = 'skjult'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, falsk);}, usann);
Jeg vil ikke late som jeg kjenner JavaScript, og det var derfor det var nyttig at SitePoint allerede hadde filen på plass. Alt jeg vet er at det forteller GTmetrix å analysere siden i den nåværende Chrome-fanen. Der det står 'chrome.tabs.getSelected', tar utvidelsen URLen fra den aktive fanen og legger den inn i webskjemaet. Det er så langt jeg kan gå.
Tester Chrome-utvidelsen din
Nå har vi de grunnleggende rammene på plass, vi må teste for å se hvordan det fungerer.
- Åpne Chrome, velg Flere verktøy og utvidelser.
- Merk av i ruten ved siden av utviklermodus for å aktivere det.
- Velg Last inn utvidet utvidelse og naviger til filen du opprettet for denne utvidelsen.
- Velg OK for å laste utvidelsen, og den skal vises i utvidelseslisten.
- Merk av i ruten ved siden av Enabled i listen, og ikonet skal vises i nettleseren din.
- Velg ikonet i nettleseren slik at popup vises.
- Velg knappen, sjekk denne siden nå!
Du skal se siden som blir sjekket og en resultatrapport fra GTmetrix. Som du ser fra min egen side i hovedbildet, har jeg litt arbeid å gjøre for å få fart på det nye designet mitt!
Tar utvidelser fremover
Å lage din egen Chrome-utvidelse er ikke så vanskelig som det kan se ut. Selv om det absolutt hjalp å ha et forsprang ved å kjenne til en liten kode, er det hundrevis av ressurser på nettet som vil vise deg det. I tillegg har Google et enormt arkiv med informasjon, veiledninger og gjennomganger som vil hjelpe. Jeg brukte denne siden fra Google Developer-nettstedet for å hjelpe meg med denne utvidelsen. Siden leder deg gjennom alle deler av å lage utvidelsen og gir det ikonet vi brukte tidligere.
Med nok forskning kan du lage utvidelser som gjør stort sett hva nettleseren er i stand til. Noen av de beste utvidelsene i Chrome-butikken er fra enkeltpersoner og ikke selskaper, noe som beviser at du virkelig kan lage dine egne.
All kreditt til John Sonmez på SitePoint for den opprinnelige guiden. Han gjorde det harde arbeidet, jeg omorganiserte det litt og oppdaterte det litt.
Har du laget din egen Chrome-utvidelse? Vil du markedsføre eller dele det? Gi oss beskjed nedenfor hvis du gjør det!
