Ak ste používateľom prehliadača Chrome, pravdepodobne budete používať jedno alebo viac rozšírení. Či už ide o blokovanie reklám alebo pridanie funkcií, rozšírenia pridávajú prehliadaču veľa užitočných funkcií. Nebolo by teda skvelé, keby ste si mohli vytvoriť vlastné rozšírenie pre prehliadač Chrome? To je presne to, čo ti tu ukážem.
Pozrite si aj náš článok Najlepšie dotykové Chromebooky
Keď udržiavam webové stránky pre klientov, rád by som vedel, ako si jednotlivé stránky vedú z hľadiska načítania stránky. Keďže spoločnosť Google v súčasnosti vo svojich výpočtoch SEO používa čas načítania, vedieť, ako rýchlo alebo pomaly sa načítava stránka, je pri optimalizácii stránok dôležitou metrikou. To platí ešte viac pri optimalizácii webových stránok pre mobilné zariadenia. Ak chcete dosiahnuť vysoké skóre v sieti Google, musí byť ľahký, rýchly a musí sa načítať bez akýchkoľvek chýb.
Okrem toho skutočnosť, že podnikavý človek na serveri SitePoint tiež používa ten istý web, ktorý používam na kontrolu rýchlosti stránok, spoločnosť GTmetrix a vyvinul na jeho kontrolu rozšírenie Chrome, som si myslel, že urobím to isté a prejdem sa ním.
Rozšírenia prehliadača Chrome
Rozšírenia prehliadača Chrome sú mini programy, ktoré pridávajú funkcie do základného prehliadača. Môžu byť rovnako jednoduché ako tie, ktoré vytvoríme, alebo také zložité, ako sú bezpeční správcovia hesiel alebo emulátory skriptov. Sú napísané v kompatibilných jazykoch ako HTML, CSS a JavaScript. Sú to samostatné súbory, ktoré sú umiestnené vedľa prehliadača.
Väčšina rozšírení je nevyhnutne jednoduchým spúšťaním ikon, ktoré vykonáva danú akciu. Touto akciou môže byť prehliadač Chrome doslova čokoľvek.
Zostavte si vlastné rozšírenie pre prehliadač Chrome
Pomocou malého prieskumu môžete vylepšiť svoje rozšírenie tak, aby sa vám darilo čokoľvek, ale páči sa mi myšlienka kontroly rýchlosti jedným tlačidlom, takže s tým idem.
Keď kontrolujete rýchlosť stránok, zvyčajne vložte adresu URL stránky, na ktorej sa nachádzate, do GTmetrix, Pingdom alebo kamkoľvek a stlačte Analyze. Trvá to iba pár sekúnd, ale nebolo by pekné, keby ste si vo svojom prehliadači mohli vybrať iba ikonu a nechať ju urobiť za vás? Po vykonaní tejto príručky budete môcť urobiť len to.
V počítači budete musieť vytvoriť priečinok, aby ste si všetko uchovali. Vytvorte tri prázdne súbory, manifest.json, popup.html a popup.js. Kliknite pravým tlačidlom myši do nového priečinka a vyberte Nový a textový súbor. Otvorte každý z vašich troch súborov vo vybranom textovom editore. Uistite sa, že popup.html je uložený ako súbor HTML a popup.js je uložený ako súbor JavaScript. Stiahnite si túto vzorovú ikonu od spoločnosti Google iba na účely tohto tutoriálu.
Vyberte manifest.json a do neho vložte nasledujúce:
{"manifest_version": 2, "name": "GTmetrix Page Speed Analyzer", "description": "Použite GTmetrix na analýzu rýchlosti načítania webovej stránky", "version": "1.0", "browsery": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "Permission":}
Ako vidíte, dali sme jej názov a základný popis. Zavolali sme tiež akciu prehliadača, ktorá obsahuje ikonu, ktorú sme prevzali od spoločnosti Google a ktorá sa objaví na paneli prehliadača a popup.html. Popup.html je to, čo sa volá, keď v prehliadači vyberiete ikonu rozšírenia.
Otvorte popup.html a vložte doň nasledujúce.
http: //popup.js
Analyzátor stránok pomocou GTMetrix
Popup.html je to, čo sa volá, keď v prehliadači vyberiete ikonu rozšírenia. Pomenovali sme ho, označili kontextové okno a pridali tlačidlo. Výberom tlačidla zavoláte popup.js, čo je súbor, ktorý dokončíme ako ďalší.
Otvorte popup.js a vložte doň nasledujúce:
document.addEventListener ('DOMContentLoaded', function () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('click', function () {chrome.tabs.getSelected (null, function (tab)) {d = dokument; var f = d.createElement ('forma'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( 'input'); i.type = 'hidden'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});}, nepravdivé);}, nepravdivé);
Nebudem predstierať, že poznám JavaScript, a preto bolo užitočné, že server SitePoint už mal daný súbor na svojom mieste. Viem len to, že spoločnosti GTmetrix povie, aby analyzovala stránku na aktuálnej karte Chrome. Tam, kde sa hovorí „chrome.tabs.getSelected“, rozšírenie vezme URL z aktívnej karty a vloží ju do webového formulára. To je, pokiaľ môžem ísť.
Testovanie rozšírenia prehliadača Chrome
Teraz máme zavedený základný rámec, musíme otestovať, ako to funguje.
- Otvorte prehliadač Chrome a vyberte Ďalšie nástroje a rozšírenia.
- Začiarknutím políčka vedľa režimu pre vývojárov ho povolíte.
- Vyberte Načítať nezbalenú príponu a prejdite na súbor, ktorý ste pre túto príponu vytvorili.
- Vyberte OK, aby sa rozšírenie načítalo a malo by sa objaviť v zozname rozšírení.
- V zozname začiarknite políčko vedľa položky Povolené a v prehliadači by sa mala zobraziť ikona.
- V prehliadači vyberte ikonu, aby sa zobrazilo kontextové okno.
- Vyberte tlačidlo, skontrolujte túto stránku teraz!
Mali by ste vidieť skontrolovanú stránku a správu o výkonnosti od spoločnosti GTmetrix. Ako vidíte z môjho vlastného webu v hlavnom obrázku, musím urobiť trochu práce, aby som urýchlil môj nový dizajn!
Posun vpred
Vytvorenie vlastného rozšírenia prehliadača Chrome nie je také ťažké, ako sa môže zdať. Aj keď to určite pomohlo náskoku poznať malý kód, existujú online zdroje, ktoré vám to ukážu. Spoločnosť Google navyše disponuje obrovským úložiskom informácií, návodov a návodov, ktoré vám pomôžu. Túto stránku som použil na webe pre vývojárov Google, aby mi pomohol s týmto rozšírením. Táto stránka vás prevedie všetkými časťami vytvárania rozšírenia a poskytuje ikonu, ktorú sme použili predtým.
Pri dostatočnom výskume môžete vytvárať rozšírenia, ktoré dokážu urobiť takmer všetko, čo prehliadač dokáže. Niektoré z najlepších rozšírení v obchode Chrome sú od jednotlivcov a nie od spoločností, čo dokazuje, že si skutočne môžete vytvoriť svoje vlastné.
Všetky ocenenia za Johna Sonmeza na stránkach SitePoint za pôvodného sprievodcu. Robil tvrdú prácu, len som ju trochu reorganizoval a mierne ho aktualizoval.
Vytvorili ste si vlastné rozšírenie pre prehliadač Chrome? Chcete ju propagovať alebo zdieľať? Ak tak urobíte, dajte nám vedieť nižšie!
