Jos olet Chromen käyttäjä, käytät todennäköisesti yhtä tai useampaa laajennusta. Mainosten estäminen tai ominaisuuksien lisääminen, laajennukset lisäävät paljon apuohjelmia selaimeen. Joten eikö olisi hienoa, jos voisit rakentaa oman Chrome-laajennuksesi? Juuri mitä näytän sinulle täällä.
Katso myös artikkeli Paras kosketusnäyttöinen Chromebook
Ylläpitäessäni asiakkaiden verkkosivustoja, haluan tietää, kuinka kukin sivusto toimii sivun lataamisen suhteen. Koska Google käyttää nyt latausaikoja SEO-laskelmissaan, sivun lataamisen nopeuden tai hitauden tunteminen on tärkeä mittari sivuston optimoinnissa. Tämä pätee vieläkin paremmin, kun optimoidaan verkkosivusto mobiililaitteille. Sen on oltava kevyt, nopea ja kuormaton ilman virheitä, jotta Google voi saavuttaa hyviä tuloksia.
Lisäksi tosiasia, että yrittäjä SitePointissa työskentelee, käyttää myös samaa verkkosivustoa kuin minä tarkistan sivunopeutta, GTmetrix ja on kehittänyt Chrome-laajennuksen sen tarkistamiseksi, ajattelin tehdä saman ja käydä läpi sen.
Chromen laajennukset
Chrome-laajennukset ovat miniohjelmia, jotka lisäävät ominaisuuksia ytimen selaimeen. Ne voivat olla yhtä yksinkertaisia kuin ne, jotka aiomme luoda, tai yhtä monimutkaisia kuin suojatut salasananhallinnat tai komentosarjojen emulaattorit. Ne ovat kirjoitettu yhteensopivilla kielillä, kuten HTML, CSS ja JavaScript, ja ovat itsenäisiä tiedostoja, jotka sijaitsevat selaimen vieressä.
Tarvittaessa useimmat laajennukset ovat yksinkertaisia kuvaketta napsauttavia suorituksia, jotka suorittavat tietyn toiminnon. Tämä toiminto voi olla kirjaimellisesti mitä haluat Chromen tekevän.
Luo oma Chrome-laajennus
Pienellä tutkimuksella voit mukauttaa laajennuksen tehdä mitä haluat, mutta pidän ajatuksesta yhden painikkeen nopeustarkistuksesta, joten jatkan siitä.
Yleensä tarkistaessasi sivuston nopeutta liität käymäsi sivun URL-osoitteen GTmetrixiin, Pingdomiin tai minne tahansa ja napsautat Analysoi. Se vie vain muutaman sekunnin, mutta eikö olisi hienoa, jos voisit vain valita kuvakkeen selaimessa ja saada sen tekemään sen puolestasi? Kun olet tutkinut tämän oppaan, pystyt tekemään juuri sen.
Sinun on luotava kansio tietokoneellesi, jotta kaikki säilyy. Luo kolme tyhjää tiedostoa, manifest.json, popup.html ja popup.js. Napsauta hiiren kakkospainikkeella uuden kansion sisällä ja valitse Uusi ja tekstitiedosto. Avaa kaikki kolme tiedostoa valitsemassasi tekstieditorissa. Varmista, että popup.html on tallennettu HTML-tiedostona ja ponnahdus.js on tallennettu JavaScript-tiedostona. Lataa tämä näytekuvake myös Googlelta vain tämän oppaan tarkoituksia varten.
Valitse manifest.json ja liitä seuraava siihen:
{"manifest_version": 2, "nimi": "GTmetrix-sivunopeusanalysaattori", "kuvaus": "Käytä GTmetrix-analyysiä verkkosivuston latausnopeuteen", "versio": "1.0", "selain_toiminto": {"oletus_sääntö" : "icon.png", "default_popup": "ponnahdus.html"}, "käyttöoikeudet":}
Kuten huomaat, olemme antaneet sille otsikon ja peruskuvauksen. Olemme kutsuneet myös selaintoimintoa, joka sisältää Googlelta lataamasi kuvakkeen, joka näkyy selainpalkissa ja ponnahdusikkunassa.html. Popup.html on mitä kutsutaan, kun valitset laajennuskuvaketta selaimessa.
Avaa ponnahdusikkuna.html ja liitä seuraava siihen.
Sivunopeuden analysaattori käyttäen GTMetrix-tekniikkaa
Popup.html on mitä kutsutaan, kun valitset laajennuskuvaketta selaimessa. Olemme antaneet sille nimen, merkinneet ponnahdusikkunan ja lisänneet painikkeen. Painikkeen valitseminen tuo esiin pop.js-tiedoston, jonka tiedoston viimeistelemme seuraavaksi.
Avaa ponnahdusikkuna ja liitä seuraava siihen:
document.addEventListener ('DOMContentLoaded', toiminto () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('napsauta', toiminto () {chrome.tabs.getSelected (nolla, toiminto (välilehti) {d = asiakirja; var f = d.createElement ('muoto'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( 'input'); i.type = 'piilotettu'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, väärä);}, väärä);
En teeskentele tietävänsä JavaScriptiä, minkä vuoksi oli hyödyllistä, että SitePointilla oli jo tiedosto paikallaan. Tiedän vain, että GTmetrix kehottaa analysoimaan sivun nykyisessä Chrome-välilehdessä. Laajennus vie URL-osoitteen aktiivisesta välilehdestä ja kirjoittaa sen web-muotoon, jos sanotaan 'chrome.tabs.getSelected'. Se on niin pitkälle kuin voin mennä.
Chrome-laajennuksen testaaminen
Nyt meillä on peruskehys paikallaan, meidän on testattava nähdäksesi miten se toimii.
- Avaa Chrome, valitse Lisää työkaluja ja laajennuksia.
- Ota se käyttöön valitsemalla Kehittäjä-tilan vieressä oleva valintaruutu.
- Valitse Lataa pakkaamaton laajennus ja siirry tiedostoon, jonka olet luonut tälle laajennukselle.
- Lataa OK laajentaaksesi laajennuksen, ja sen pitäisi näkyä Laajennukset-luettelossa.
- Valitse luettelossa Enabled vieressä oleva valintaruutu, ja kuvakkeen pitäisi näkyä selaimessa.
- Valitse selain-kuvake, niin ponnahdusikkuna tulee näkyviin.
- Valitse painike, Tarkista tämä sivu nyt!
Sinun pitäisi nähdä tarkistettava sivu ja GTmetrixin suoritusraportti. Kuten voit nähdä omasta sivustostani pääkuvassa, minulla on vähän työtä tekemistäni nopeuttaaksesi uutta suunnitteluni!
Pidennysten vieminen eteenpäin
Oman Chrome-laajennuksen luominen ei ole niin vaikeaa kuin miltä se näyttää. Vaikka tietysti auttoi päästä alkuun tietämällä pieni koodi, verkossa on satoja resursseja, jotka osoittavat sinulle tämän. Lisäksi Googlella on valtava tietovarasto, oppaita ja ohjeita, jotka auttavat. Käytin tätä Google-kehittäjäsivun sivua auttaakseni minua tämän laajennuksen kanssa. Sivulla käydään läpi jokainen laajennuksen luomisen osa ja tarjotaan se kuvake, jota aiemmin käytimme.
Riittävällä tutkimuksella voit luoda laajennuksia, jotka tekevät melkein kaiken mitä selain pystyy. Jotkut Chrome-myymälän parhaista laajennuksista ovat yksityishenkilöiden, ei yritysten, todisteita siitä, että osaat luoda omia.
Kaikki hyvitys John Sonmezille SitePointissa alkuperäisestä oppaasta. Hän teki kovaa työtä, organisoin vain sen hieman ja päivitin sitä hieman.
Oletko luonut oman Chrome-laajennuksen? Haluatko mainostaa tai jakaa sitä? Kerro meille alla, jos teet!
