Kako napraviti kromirani nastavak

Ako ste korisnik Chromea, vjerojatno ćete koristiti jedno ili više proširenja. Bilo da se radi o blokiranju oglasa ili dodavanju značajki, proširenja dodaju mnogo korisnih preglednika. Pa zar ne bi bilo u redu kada biste mogli napraviti vlastiti nastavak za Chrome? To je upravo ono što ću vam ovdje pokazati.

Pogledajte i naš članak Najbolji Chromebook-ovi sa zaslonom osjetljivim na dodir

Dok održavam web stranice za klijente, volim znati kako svaka web lokacija funkcionira s obzirom na učitavanje stranica. Budući da Google sada koristi vrijeme učitavanja u svojim SEO proračunima, saznanje koliko brzo ili sporo učitavanje stranice predstavlja važan pokazatelj pri optimizaciji web mjesta. To je još istinitije kod optimizacije web stranice za mobilne uređaje. Mora biti lagan, brz i učitavan bez ikakvih pogrešaka kako bi se postigao visoki rezultat unutar Googlea.

Dodaj tome, činjenica da poduzetna osoba na SitePointu također koristi istu web stranicu koju radim za provjeru brzine stranice, GTmetrix i razvio je Chromeov nastavak da to provjerim, mislio sam da bih to isto učinio i prošao kroz vas.

Proširenja za Chrome

Proširenja za Chrome su mini programi koji dodaju značajke u temeljni preglednik. Mogu biti jednostavne poput one koju ćemo stvoriti ili komplicirane poput sigurnih upravitelja lozinki ili emulatora skripti. Napisane na kompatibilnim jezicima kao što su HTML, CSS i JavaScript, to su samostojeće datoteke koje stoje uz preglednik.

Prema potrebi, većina proširenja su jednostavna izvršenja klikova ikona koja izvode određenu radnju. Chrome može doslovno biti bilo što što želite učiniti.

Izradite vlastito proširenje za Chrome

Uz malo istraživanja, možete prilagoditi svoj nastavak da biste radili sve što želite, ali sviđa mi se ideja provjere brzine s jednim gumbom pa idem s tim.

Obično kad provjerite brzinu web mjesta, zalijepili biste URL stranice na kojoj se nalazite u GTmetrix, Pingdom ili gdje god i pritisnuli Analyze. To traje samo nekoliko sekundi, ali zar ne bi bilo lijepo kada biste mogli samo odabrati ikonu na svom pregledniku i to učiniti za vas? Nakon što prođete kroz ovaj udžbenik, to ćete moći učiniti upravo to.

Trebat ćete stvoriti mapu na računalu kako biste sve držali unutra. Stvorite tri prazne datoteke, manifest.json, popup.html i popup.js. Desnom tipkom miša kliknite unutar svoje nove mape i odaberite Nova i tekstualna datoteka. Otvorite svaku svoju tri datoteke u svom uređivaču teksta. Provjerite je li popup.html spremljen kao HTML datoteka, a popup.js spremljen kao JavaScript datoteka. Preuzmite i ovu ikonu uzorka s Googlea samo za potrebe ovog vodiča.

Odaberite manifest.json i u njega zalijepite sljedeće:

{"manifest_version": 2, "name": "GTmetrix analizator brzine stranice", "opis": "Koristite GTmetrix za analizu brzine učitavanja stranice na web stranici", "verzija": "1.0", "preglednik pretraživača": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "dozvole":}

Kao što vidite, dali smo mu naslov i osnovni opis. Nazvali smo i radnju preglednika koja uključuje ikonu koju smo preuzeli s Googlea i koja će se pojaviti na traci vašeg preglednika i popup.html. Popup.html zove se kada u pregledniku odaberete ikonu proširenja.

Otvorite popup.html i zalijepite sljedeće.

http: //popup.js

Pagespeed Analyzer koristeći GTMetrix

Provjerite brzinu stranice!

Popup.html zove se kada u pregledniku odaberete ikonu proširenja. Dali smo mu ime, označili skočni prozor i dodali gumb. Odabirom gumba nazvat ćemo popup.js koji je datoteka koju ćemo dovršiti sljedeće.

Otvorite popup.js i zalijepite sljedeće:

document.addEventListener ('DOMContentLoaded', function () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('klik', funkcija () {chrome.tabs.getSelected (null, funkcija (tab) {dul = dokument; var f = d.createElement ('obrazac'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( 'ulaz'); i.type = 'skriveno'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, false);}, false);

Neću se pretvarati da znam JavaScript, zbog čega je bilo zgodno da je SitePoint već imao datoteku na mjestu. Sve što znam je da kaže GTmetrix-u da analizira stranicu u trenutnoj kartici Chrome. Tamo gdje piše 'chrome.tabs.getSelected', proširenje uzima URL s aktivne kartice i unosi ga u web obrazac. To je onoliko koliko mogu ići.

Testiranje vašeg Chrome proširenja

Sad imamo osnovni okvir, trebamo testirati kako bismo vidjeli kako to funkcionira.

1. Otvorite Chrome, odaberite Više alata i proširenja.
2. Označite okvir pored načina za razvojne programere da biste ga omogućili.
3. Odaberite Učitaj nepakirano proširenje i pomaknite se do datoteke koju ste stvorili za to proširenje.
4. Odaberite U redu da biste učitali proširenje i ono se mora pojaviti na vašem popisu proširenja.
5. Označite okvir pored opcije Omogućeno na popisu i ikona bi se trebala pojaviti u vašem pregledniku.
6. Odaberite ikonu u pregledniku tako da se pojavi skočni prozor.
7. Odaberite gumb, Provjerite ovu stranicu sada!

Trebali biste vidjeti stranicu koja se provjerava i GTmetrixov izvještaj o izvedbi. Kao što na mojoj web stranici možete vidjeti na glavnoj slici, moram malo raditi kako bih ubrzao svoj novi dizajn!

Nastavak proširenja prema naprijed

Stvaranje vlastitog Chrome proširenja nije tako teško kao što možda izgleda. Iako je sigurno pomoglo da se krene s znanjem malo koda, postoje stotine resursa na mreži koji će vam to pokazati. Uz to, Google ima ogromno spremište informacija, vodiče i upute koje će vam pomoći. Pomoću ovog proširenja koristio sam ovu stranicu s web lokacije Google Developer. Stranica vas vodi kroz svaki dio stvaranja proširenja i pruža tu ikonu koju smo koristili ranije.

Uz dovoljno istraživanja, možete stvoriti proširenja koja čine preglednik gotovo sve. Neka najbolja proširenja u Chrome trgovini dolaze od pojedinaca, a ne tvrtki, što dokazuje da zaista možete stvoriti svoje.

Sva zasluga Johnu Sonmezu u SitePointu za originalni vodič. Teško je radio, samo sam ga malo reorganizirao i malo ga ažurirao.

Jeste li stvorili vlastito proširenje za Chrome? Želite li je promovirati ili dijeliti? Javite nam dolje ako to učinite!