Ha Chrome-felhasználó, akkor valószínű, hogy egy vagy több bővítményt fog használni. Legyen hirdetések blokkolása vagy funkciók hozzáadása, a bővítmények sok hasznosságot nyújtanak a böngészőhöz. Tehát nem lenne jó, ha elkészítheti saját Chrome-bővítményét? Pontosan ezt fogom megmutatni itt.
Olvassa el a A legjobb érintőképernyős Chromebookok című cikkünket is
Az ügyfelek számára fenntartott webhelyek fenntartása közben szeretném tudni, hogy az egyes webhelyek hogyan teljesítenek az oldal betöltése során. Mivel a Google most használja a betöltési időket SEO számításaiban, a webhely optimalizálásakor fontos mérőszám az oldal betöltésének gyors vagy lassú ismerete. Ez még inkább igaz egy webhely mobiltelefonra történő optimalizálásakor. Könnyűnek, gyorsnak és hibától mentesnek kell lennie, hogy magas pontszámot szerezzen a Google-on.
Ehhez egy tény, hogy egy vállalkozó ember a SitePointnál, ugyanazt a weboldalt használja, mint én, hogy ellenőrizzék az oldalsebességet, a GTmetrix, és kifejlesztett egy Chrome kiterjesztést az ellenőrzéshez, gondoltam, hogy ugyanezt tennék, és végigvezetnék rajta.
Chrome-bővítmények
A Chrome kiterjesztések olyan mini programok, amelyek funkciókat adnak az alap böngészőhöz. Olyan egyszerűek lehetnek, mint amelyeket létrehozunk, vagy olyan bonyolultak, mint a biztonságos jelszókezelők vagy a szkriptemulátorok. Kompatibilis nyelveken (például HTML, CSS és JavaScript) írt, önálló fájlok, amelyek a böngésző mellett ülnek.
Szükség esetén a legtöbb kiterjesztés egyszerű ikon kattintással végrehajtható végrehajtás, amely egy adott műveletet hajt végre. Ez a művelet szó szerint bármi lehet, amit a Chrome meg akar tenni.
Készítse el saját Chrome-bővítményét
Egy kis kutatással elcsúsztathatja a kiterjesztést, hogy bármit megtehessen, de tetszik az egygombos sebesség-ellenőrzés gondolata, így megyek vele.
Általában, amikor ellenőrzi a webhely sebességét, beilleszti a meglátogatott oldal URL-jét a GTmetrixbe, a Pingdomba vagy bárhová, és eltalálja az Elemzés lehetőséget. Csak néhány másodpercet vesz igénybe, de nem lenne jó, ha kiválasztana egy ikont a böngészőjében, és megteszi neked? Miután átadta ezt az oktatóanyagot, ezt megteheti.
A mindent megtartva létre kell hoznia egy mappát a számítógépen. Hozzon létre három üres fájlt: manifest.json, popup.html és popup.js. Kattintson a jobb gombbal az új mappában, és válassza az Új és a szöveges fájl elemet. Nyissa meg mind a három fájlt a választott szövegszerkesztőben. Győződjön meg arról, hogy a popup.html HTML-fájlként van elmentve, és a popup.js JavaScript-fájlként. Töltse le ezt a minta ikont a Google-tól is csak az oktatóanyag céljából.
Válassza ki az manifest.json fájlt, és illessze be a következőket:
{"manifest_version": 2, "name": "GTmetrix Page Speed Analyzer", "description": "A GTmetrix használatával elemezze a weboldal oldalának betöltési sebességét", "verzió": "1.0", "böngésző_tevékenység": {"default_icon" : "icon.png", "default_popup": "popup.html"}, "engedélyek":}
Mint láthatja, megkaptuk a címet és az alapvető leírást. Felhívjuk a böngészőműveletet, amely magában foglalja a Google-tól letöltött ikont, amely megjelenik az Ön böngészőjében és a pop.html-ben. A popup.html hívja, amikor a böngészőben kiválasztja a kiterjesztés ikont.
Nyissa meg a pop.html fájlt, és illessze be a következőket.
Pagespeed Analyzer a GTMetrix használatával
A popup.html hívja, amikor a böngészőben kiválasztja a kiterjesztés ikont. Adtunk nevet, felcímkéztük a felugró ablakot és hozzáadtuk a gombot. A gomb kiválasztásával felhívja a popup.js fájlt, amelyet a következőként fogunk kitölteni.
Nyissa meg a pop.js-t, és illessze be a következőket:
document.addEventListener ('DOMContentLoaded', function () {var checkPageButton = document.getElementById ('checkPage'); checkPageButton.addEventListener ('click', function () {chrome.tabs.getSelected (null, function (tab) {d = dokumentum; var f = d.createElement ('forma'); f.action = 'http://gtmetrix.com/analyze.html?bm'; f.method = 'post'; var i = d.createElement ( 'input'); i.type = 'rejtett'; i.name = 'url'; i.value = tab.url; f.appendChild (i); d.body.appendChild (f); f.submit () ;});} hamis);} hamis);
Nem fogom úgy tenni, mintha ismerem a JavaScriptet, ezért hasznos volt, hogy a SitePoint már rendelkezik a fájllal a helyén. Csak azt tudom, hogy azt mondja a GTmetrixnek, hogy elemezze az oldalt a jelenlegi Chrome lapon. Ahol azt mondja: „chrome.tabs.getSelected”, a kiterjesztés az aktív lapról veszi az URL-t, és beírja az internetes űrlapba. Ennyit tudok elérni.
A Chrome-bővítmény tesztelése
Most megvan az alapkeret, tesztelnünk kell, hogy megnézzük, hogyan működik.
- Nyissa meg a Chrome-ot, válassza a További eszközök és bővítmények lehetőséget.
- Jelölje be a Fejlesztő mód melletti négyzetet annak engedélyezéséhez.
- Válassza a Csomagolás nélküli kiterjesztés betöltése lehetőséget, és keresse meg a kiterjesztéshez létrehozott fájlt.
- A kiterjesztés betöltéséhez válassza az OK lehetőséget, és ennek meg kell jelennie a bővítmények listájában.
- Jelölje be a listában az Engedélyezve jelölőnégyzetet, és az ikonnak megjelennie kell a böngészőben.
- Válassza ki az ikont a böngészőben, így megjelenik a felugró ablak.
- Válassza ki a gombot, ellenőrizze ezt az oldalt most!
Látnia kell az ellenőrzött oldalt és a GTmetrix teljesítményjelentését. Mint ahogyan a főképen a saját webhelyemről látszik, még egy kis munkám van az új tervem felgyorsítása érdekében.
A kiterjesztések továbbvitele
Saját Chrome-bővítmény létrehozása nem olyan nehéz, mint amilyennek tűnhet. Annak ellenére, hogy egy kis kód megismerése minden bizonnyal elősegítette a fejfájást, sok online erőforrás található meg, amely ezt megmutatja. Ráadásul a Google hatalmas információtárral, oktatóanyagokkal és áttekintésekkel rendelkezik, amelyek segítenek. A Google Fejlesztő webhelyén ezt az oldalt használtam, hogy segítsen ennél a kiterjesztésnél. Az oldal végigvezeti a kiterjesztés létrehozásának minden részén, és megadja azt az ikont, amelyet korábban használtunk.
Elegendő kutatással elkészíthet olyan kiterjesztéseket, amelyek nagyjából mindent megtesznek a böngésző számára. A Chrome-áruház legjobb bővítményei magánszemélyektől származnak, nem pedig cégektől, így bizonyítva, hogy valóban képes létrehozni sajátját.
Minden hitelt John Sonmeznek a SitePoint az eredeti útmutatóért. Kemény munkát végzett, csak egy kicsit átszerveztem és kissé frissítettem.
Készítette a saját Chrome-bővítményt? Szeretné hirdetni vagy megosztani? Tudassa velünk alább, ha igen!
