„Jelenlegi életünkben szívesebben használjuk a közösségi média alkalmazásokat és a Google Keresőt szórakoztatási és keresési célokra, azaz kutassunk valamilyen oktatási témát a „Google” keresőn keresztül, és általános ismereteket is szerezzünk. Ahhoz, hogy a Google keresőmotorját használhassuk valami keresésére, mobiltelefonunkra, laptopunkra vagy személyi számítógépünkre már telepítve kell lennie valamilyen böngészőnek. A mai század egyik leggyakrabban használt és leghatékonyabb böngészője a „Google Chrome” böngésző, amely számos jó funkcióval és kiterjesztési segédprogrammal jelentkezett. A „Bővítmény” bármely böngészőben megtalálható bővítmény, amely korlátozza vagy engedélyezi a webhelyeket és a különböző funkciókat. Ezek a bővítmények általában nem beépítettek; szükség esetén minden bővítményt külön kell hozzáadnia a böngészőhöz. Ha Ön egy kicsit szakértő a technológiában, akkor lehet, hogy ismeri a manifest JSON-fájlok használatát a kiterjesztések létrehozásához és hozzáadásához néhány lépésben. Ezért ez a cikk lefedi azokat a lépéseket, amelyekkel új bővítményt hozhat létre a Google Chrome böngészőben.
Mielőtt megvizsgálná a bővítmény létrehozásának módját, meg kell győződnie arról, hogy a Google Chrome böngésző már el van indítva, és a „Google” keresőmotor nem tartalmaz semmilyen hátteret. Látható, hogy az alább mellékelt képnek nincs háttere a „Google.com” keresőmotor számára, azaz csak fehér háttér.
Bővítménymappa hozzáadása
Nyissa meg gyorsan a Visual Studio Code eszközt a Windows rendszer alkalmazásaiból. Akár 1 percig is eltarthat a Visual Studio kód megfelelő megnyitása és használatunkra való engedélyezése. Miután megfelelően elindult és használatra kész, hozzáadtuk a már létrehozott „Extension” mappát az alább látható felső tálcán található „Fájl” menülistán keresztül. Az „Extension” mappa létrehozása után hozzáadtunk egy másik „image” nevű mappát, amely a böngészőben a kiterjesztés ikonjaként használandó képeket tartalmazza. Ezzel együtt hozzáadtunk egy „manifest.json” fájlt és egy „script.js” nevű JavaScript-fájlt, hogy új kiterjesztést hozzunk létre, és adjuk hozzá a böngészőhöz. Kezdjük a manifest.json fájllal úgy, hogy duplán rákattintva kezdjük el dolgozni a JSON-ban, hogy létrehozzunk és használjunk egy kiterjesztést a „Google” hátterének megváltoztatásához.
Manifest fájl létrehozása
A manifest.json fájlban hozzá kell adnia a lent látható „JSON” kódot. Ez a kód a tényleges konfigurációs szkript, amellyel bővítményt hozhatunk létre és hozzáadhatunk a Google Chrome böngészőhöz. Ez a JSON-kód a változó manifeszt verziójának inicializálásával „2”-vel és a létrehozandó bővítmény nevével indult, azaz „Háttér módosítása”. Ezt követően a „description” változón belül hozzáadtuk a bővítményünk rövid leírását.
Ezzel együtt a bővítmény verzióját „1.0”-ként adtuk hozzá. Miután a „bővítmény” összes alapvető konfigurációja elkészült, hozzá kell adnunk a képikon elérési útját, amelyet a bővítmények ikonjaként használunk. A „böngésző” változót úgy határozták meg, hogy beállítsa a kiterjesztés ikonját a Google Chrome böngésző felső tálcáján, azaz ahol az összes bővítmény megjelenik, miután engedélyezte őket későbbi használatra bizonyos vagy az összes webhelyen. Ezt követően három különböző méretű képfájl elérési útját adtuk hozzá, hogy a böngésző minden alkalommal más-más fájlt tudjon használni.
Ezzel együtt a „page_action” változót használták annak megjelenítésére, hogy a Google Chrome felső tálcáján lévő „bővítmények” ikonra kattintás után milyen képet kell megjeleníteni. A „Default_icon” változót használták benne, valamint annak három különböző elérési útját, amelyek a képek ikonjaként használhatók minden újratöltéskor. Három különböző képfájlt használnak erre a célra. Az utolsó content_scripts változó összesen 2 új változót vesz fel benne, azaz egyezéseket és CSS-t. A „matches” változó tartalmazza a webhely elérési útját, amelyet az új bővítmény használata után módosítani kell. Ezzel együtt a „CSS” változó tartalmazza annak a CSS-fájlnak a nevét, amelyet a Google.com stílusához használunk a bővítmény igénylése után, azaz a Google.com stílusát minden egyes újratöltés után, amikor engedélyezzük a bővítményt. Most, hogy ez a kód elkészült és használatra kész, csak gyorsan mentse el, és lépjen a „main.css” fájl felé.
A main.css CSS fájlon belül stílust adtunk a létrehozandó manifest fájlkiterjesztésünkhöz. A stílus a html „body” címke használatával kerül alkalmazásra, azaz a jegyzékfájl teljes „body” területén kell alkalmazni. A Google.com új hátterét a keresőmotorból származó képfájl URL-címével állítottuk be. Most mindenek előtt mentse el a kódot.
A szükséges kódok, azaz a manifest.json és main.css fájl kitöltése után meg kell nyitnunk az Extensions segédprogramot a Google Chrome böngészőben a chrome://extensions” URL-címen keresztül az új lapon. Megnyílik az Extensions segédprogram terület. A fejlesztői módból be kell töltenie a kicsomagolt „Bővítmény” mappát a helyi rendszerről, hogy az alábbi képen látható „kicsomagolt betöltés” gombbal bővítmény legyen. A bővítményt hatékonyan hozzáadtuk a Chrome böngészőhöz, ahogy a bemutatott is. Távolítsa el a hibákat, hogy teljesen működjön.
A „bővítmény” ikonról válassza ki a „Háttér módosítása” bővítményt, hogy megjelenjen a tálcán, azaz a „C” ikon kiterjesztését.
A Google.com újratöltése után a háttér ezzel a bővítménnyel frissült.
Következtetés
A böngészők Windows rendszerben való használatának magyarázatából kiindulva kitértünk a bővítmények fontosságára is bármely böngészőben. A kiterjesztések rövid ismertetése után elmagyaráztuk, hogyan lehet a manifest JSON-fájl használatával bővítményt létrehozni a Google Chrome böngészőhöz, és hogyan lehet ezzel megváltoztatni a „Google.com” keresőmotor hátterét. A bővítmény Google chrome-ra való betöltése után a Google.com-on használtuk a háttér megváltoztatására.