Če ste uporabnik Chroma, boste verjetno uporabljali eno ali več razširitev. Ne glede na to, ali gre za blokiranje oglasov ali dodajanje funkcij, razširitve dodajo brskalniku veliko koristnosti. Ali ne bi bilo kul, če bi lahko ustvarili svojo razširitev za Chrome? Točno to vam bom pokazal tukaj.
Oglejte si tudi naš članek Najboljši prenosniki z zaslonom na dotik
Medtem ko vzdržujem spletna mesta za stranke, rad vem, kako uspešna je vsaka stran glede nalaganja strani. Ker Google zdaj v svojih SEO izračunih uporablja čas nalaganja, je vedenje, kako hitro ali počasi se nalaga stran, pomembna meritev pri optimizaciji spletnega mesta. To še bolj velja pri optimizaciji spletnega mesta za mobilne naprave. Biti mora lahek, hiter in brez napak, da lahko doseže visoko oceno v Googlu.
Če k temu dodam, dejstvo, da podjetna oseba na spletnem mestu SitePoint uporablja tudi isto spletno mesto, da preverim hitrost strani, GTmetrix in da je razvil razširitev za Chrome, da bi jo preveril, sem mislil, da bi storil isto in vas popeljal skozi to.
Razširitve za Chrome
Razširitve za Chrome so mini programi, ki dodajo funkcije v osnovni brskalnik. Lahko so enostavne kot tiste, ki jih bomo ustvarili, ali pa so tako zapletene kot varni skrbniki gesel ali emulatorji skriptov. So napisane v združljivih jezikih, kot so HTML, CSS in JavaScript, samostojne datoteke, ki stojijo ob brskalniku.
Po potrebi je večina razširitev preprosta izvedba klikov ikon, ki izvedejo dano dejanje. Chrome lahko dobesedno pomeni vse, kar želite storiti.
Izdelajte lastno razširitev za Chrome
Z malo raziskav lahko prilagodite svojo razširitev, da počnete vse, kar želite, vendar mi je všeč ideja preverjanja hitrosti z enim gumbom, zato grem s tem.
Ko preverite hitrost spletnega mesta, običajno pripnete URL strani, na kateri ste, v GTmetrix, Pingdom ali kamor koli in pritisnete na Analiza. To traja le nekaj sekund, a ne bi bilo lepo, če bi lahko samo izbrali ikono v svojem brskalniku in to storili za vas? Po obdelavi te vadnice boste lahko naredili prav to.
V računalniku boste morali ustvariti mapo, da boste vse ohranili. Ustvarite tri prazne datoteke, manifest.json, popup.html in popup.js. Z desno miškino tipko kliknite notranjo mapo in izberite Novo in besedilno datoteko. Odprite vsako od treh datotek v urejevalniku besedil, ki ga izberete. Prepričajte se, da je popup.html shranjen kot datoteka HTML, popup.js pa kot datoteka JavaScript. Prenesite to vzorčno ikono iz Googla tudi samo za namene te vadnice.
Izberite manifest.json in vanj prilepite naslednje:
{"manifest_version": 2, "ime": "Analiza hitrosti strani GTmetrix", "opis": "Uporabite GTmetrix za analizo hitrosti nalaganja strani na spletni strani", "različica": "1.0", "brskanje po brskalniku": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "dovoljenja":}
Kot vidite, smo mu dali naslov in osnovni opis. Prav tako smo poklicali dejanje brskalnika, ki vključuje ikono, ki smo jo prenesli iz Googla in se bo prikazala v brskalni vrstici in popup.html. Popup.html se imenuje, ko v brskalniku izberete ikono razširitve.
Odprite popup.html in vanj prilepite naslednje.
Pagespeed Analyzer z uporabo GTMetrix
Popup.html se imenuje, ko v brskalniku izberete ikono razširitve. Dali smo mu ime, označili pojavno okno in dodali gumb. Z izbiro gumba bomo poklicali popup.js, kar je datoteka, ki jo bomo dokončali.
Odprite popup.js in vanj prilepite naslednje:
document.addEventListener ('DOMContentLoaded', funkcija () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('klik', funkcija () {chrome.tabs.getSelected (null, funkcija (zavihek) {dll = dokument; var f = d.createElement ('obrazec'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'objava'; var i = d.createElement ( 'input'); i.type = 'skriti'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, false);} false);
Ne bom se pretvarjal, da poznam JavaScript, zato je bilo priročno, da je že imel SitePoint datoteko. Vse kar vem je, da pravi GTmetrix, naj analizira stran na trenutnem zavihku Chrome. Kjer piše 'chrome.tabs.getSelected', podaljšek vzame URL z aktivnega zavihka in ga vnese v spletni obrazec. To je kolikor lahko grem.
Testiranje razširitve za Chrome
Zdaj imamo vzpostavljen osnovni okvir, testirati ga moramo, da vidimo, kako deluje.
- Odprite Chrome, izberite Več orodij in razširitev.
- Potrdite polje poleg načina razvijalca, da ga omogočite.
- Izberite Naloži nepakirano razširitev in se pomaknite do datoteke, ki ste jo ustvarili za to razširitev.
- Izberite V redu, da naložite končnico in se mora pojaviti na seznamu razširitev.
- Potrdite polje poleg možnosti Omogočeno na seznamu in ikona naj se prikaže v vašem brskalniku.
- Izberite ikono v brskalniku, tako da se prikaže pojavno okno.
- Izberite gumb, to stran preverite zdaj!
Morali bi videti stran, ki se preverja, in poročilo o uspešnosti podjetja GTmetrix. Kot lahko vidite na moji strani na glavni sliki, imam še malo dela, da pospešim svoj novi dizajn!
Nadaljnje razširitve
Ustvarjanje lastne razširitve za Chrome ni tako težko, kot se morda zdi. Čeprav je zagotovo pripomoglo k napredku s poznavanjem malo kode, je na spletu na stotine virov, ki vam bodo to pokazali. Poleg tega ima Google ogromno zbirko informacij, vadnic in navodil za uporabo. To stran sem uporabil s spletnega mesta za razvijalce Google, da mi je pomagal pri tej razširitvi. Na tej strani se boste pomerili skozi vsak del ustvarjanja razširitve in zagotovili tisto ikono, ki smo jo uporabili prej.
Z dovolj raziskav lahko ustvarite razširitve, ki omogočajo skoraj vse, kar je brskalnik sposoben. Nekatere najboljše razširitve v trgovini Chrome so posamezniki in ne podjetja, kar dokazuje, da lahko resnično ustvarite svojo.
Vsa zasluga Johnu Sonmezu pri SitePointu za izvirni vodnik. Težko je opravil, samo malo sem ga reorganiziral in nekoliko posodobil.
Ste ustvarili lastno razširitev za Chrome? Želite promovirati ali deliti? Spodaj nam sporočite, če vam gre!
