Jei esate „Chrome“ vartotojas, greičiausiai naudosite vieną ar kelis plėtinius. Nesvarbu, ar tai blokuoti skelbimus, ar pridėti funkcijų, plėtiniai suteikia daug naudingumo naršyklei. Taigi ar nebūtų šaunu, jei galėtumėte sukurti savo „Chrome“ plėtinį? Būtent tai aš jums čia parodysiu.
Taip pat skaitykite mūsų straipsnį „Geriausi jutiklinio ekrano„ Chromebook “įrenginiai
Prižiūrėdamas klientų svetaines, norėčiau žinoti, kaip kiekviena svetainė veikia įkeliant puslapį. Kadangi „Google“ skaičiavimuose SEO naudoja įkėlimo laikus, žinant, kiek greitai ar lėtai įkeliama puslapio, yra svarbi metrika, optimizuojant svetainę. Tai dar labiau aktualu optimizuojant svetainę mobiliesiems. Jis turi būti lengvas, greitas ir įkelti be jokių klaidų, kad gerai įvertintų „Google“.
Be to, tai, kad iniciatyvus asmuo, dirbantis „SitePoint“, taip pat naudoja tą pačią svetainę, kurią aš darau, kad patikrintų puslapio greitį, „GTmetrix“ ir sukūrė „Chrome“ plėtinį, kad jį patikrintų, aš maniau, kad padarysiu tą patį ir apžiūrėsiu tave.
„Chrome“ plėtiniai
„Chrome“ plėtiniai yra mažos programos, kurios pagrindinėje naršyklėje prideda funkcijų. Jie gali būti tokie pat nesudėtingi kaip tie, kuriuos mes sukursime, arba tokie sudėtingi, kaip saugūs slaptažodžių tvarkytojai ar scenarijų emuliatoriai. Parašyti suderinamomis kalbomis, tokiomis kaip HTML, CSS ir „JavaScript“, yra savarankiški failai, esantys šalia naršyklės.
Prireikus dauguma plėtinių yra paprastos piktogramų paspaudimų vykdymo operacijos, kurios atlieka nurodytą veiksmą. Tai tiesiog gali būti viskas, ką norite padaryti „Chrome“.
Sukurkite savo „Chrome“ plėtinį
Atlikdami šiek tiek tyrimų, galite patikslinti savo plėtinį, kad padarytumėte viską, kas jums patinka, bet man patinka idėja atlikti vieno mygtuko greičio patikrinimą, todėl aš einu su tuo.
Paprastai tikrindami svetainės greitį įklijuojate naudojamo puslapio URL į „GTmetrix“, „Pingdom“ ar bet kur, paspausdami „Analizuoti“. Tai užtruks tik keletą sekundžių, bet ar nebūtų puiku, jei galėtumėte tiesiog pasirinkti savo naršyklės piktogramą ir padaryti ją už jus? Išmokę šią mokymo programą, galėsite tai padaryti.
Turėsite savo kompiuteryje sukurti aplanką, kad viskas išliktų. Sukurkite tris tuščius failus - manifest.json, popup.html ir popup.js. Dešiniuoju pelės mygtuku spustelėkite naujo aplanko viduje ir pasirinkite Naujas ir teksto failas. Atidarykite visus tris failus pasirinktame teksto rengyklėje. Įsitikinkite, kad popup.html yra išsaugotas kaip HTML failas, o iššokantis.js - kaip „JavaScript“ failas. Atsisiųskite šią pavyzdžio piktogramą iš „Google“ tik šios mokymo programos tikslais.
Pasirinkite manifest.json ir įklijuokite į jį:
{„manifest_version“: 2, „name“: „GTmetrix Page Speed Analyzer“, „description“: „Naudokite„ GTmetrix “tinklalapio puslapio įkėlimo greičiui analizuoti“, „versija“: „1.0“, „naršyklės_akcija“: {„default_icon“. : "icon.png", "default_popup": "iššokantis.html"}, "leidimai":}
Kaip matote, mes jam davėme pavadinimą ir pagrindinį aprašymą. Mes taip pat vadinome naršyklės veiksmą, apimantį piktogramą, kurią atsisiuntėme iš „Google“, kuri pasirodys jūsų naršyklės juostoje ir iššokančiame.html. „Popup.html“ yra tai, kas vadinama, kai naršyklėje pasirenkate plėtinio piktogramą.
Atidarykite iššokantįjį.html ir įklijuokite į jį šiuos dalykus.
„Pagespeed“ analizatorius naudojant „GTMetrix“
„Popup.html“ yra tai, kas vadinama, kai naršyklėje pasirenkate plėtinio piktogramą. Mes davėme jam pavadinimą, pažymėjome iššokantįjį langą ir pridėjome mygtuką. Pasirinkus mygtuką, bus iškviestas popup.js - failą, kurį baigsime kitą kartą.
Atidarykite iššokantįjį langą ir įklijuokite į jį:
document.addEventListener ('DOMContentLoaded', function () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('click', function () {chrome.tabs.getSelected (null, function (tab) {d = dokumentas; var f = d.createElement ('forma'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( 'input'); i.type = 'paslėptas'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, klaidinga);}, klaidinga);
Negalėčiau apsimesti, kad žinau „JavaScript“, todėl buvo naudinga, kad „SitePoint“ jau turėjo failą. Viskas, ką žinau, liepia „GTmetrix“ išanalizuoti puslapį dabartiniame „Chrome“ skirtuke. Iš ten, kur rašoma „chrome.tabs.getSelected“, plėtinys paima URL iš aktyvaus skirtuko ir įveda jį į žiniatinklio formą. Tai yra tiek, kiek aš galiu eiti.
Tikriname „Chrome“ plėtinį
Dabar turime pagrindinę sistemą, turime išbandyti, kad pamatytume, kaip ji veikia.
- Atidarykite „Chrome“, pasirinkite Daugiau įrankių ir plėtinių.
- Pažymėkite langelį šalia kūrėjo režimo, kad jį įjungtumėte.
- Pasirinkite Įkelti neišpakuotą plėtinį ir eikite į failą, kurį sukūrėte šiam plėtiniui.
- Pasirinkite Gerai, kad įkeltumėte plėtinį, ir jis turėtų būti pateiktas plėtinių sąraše.
- Pažymėkite žymimąjį laukelį šalia Įgalinta sąraše ir piktograma turėtų pasirodyti jūsų naršyklėje.
- Naršyklėje pasirinkite piktogramą, kad pasirodytų iššokantis langas.
- Pasirinkite mygtuką Patikrinkite šį puslapį dabar!
Turėtumėte pamatyti patikrintą puslapį ir „GTmetrix“ veiklos ataskaitą. Kaip galite pamatyti pagrindiniame paveikslėlyje iš mano pačios svetainės, turiu šiek tiek padirbėti, kad paspartinčiau savo naujojo dizaino kūrimą!
Pratęsimas pirmyn
Sukurti savo „Chrome“ plėtinį nėra taip sunku, kaip gali pasirodyti. Nors tai tikrai padėjo pradėti nuo pradžių žinant mažą kodą, internete yra šimtai šaltinių, kurie jums tai parodys. Be to, „Google“ turi didžiulę informacijos saugyklą, vadovėlius ir aprašymus, kurie padės. Šį „Google“ kūrėjų svetainės puslapį panaudojau man, kad padėčiau šį plėtinį. Puslapis apžvelgia kiekvieną plėtinio kūrimo dalį ir pateikia tą piktogramą, kurią naudojome anksčiau.
Turėdami pakankamai tyrimų galite sukurti plėtinius, kurie daro beveik viską, ką sugeba naršyklė. Kai kuriuos geriausius „Chrome“ parduotuvės plėtinius teikia individai, o ne įmonės, įrodantys, kad tikrai galite sukurti savo.
Visas kreditas Johnui Sonmezui „SitePoint“ už originalų vadovą. Jis padarė sunkų darbą, aš tik šiek tiek pertvarkavau ir šiek tiek atnaujinau.
Ar sukūrėte savo „Chrome“ plėtinį? Norite ją reklamuoti ar dalintis? Jei darote, praneškite mums toliau!
