az első lépések

a Kiterjesztések különböző, de összetartó komponensekből készülnek. Az összetevők tartalmazhatnak háttér szkripteket, tartalom szkripteket, egy opciós oldalt, UI elemeket és különböző logikai fájlokat. Az Extension components web development technologies segítségével jön létre: HTML, CSS, JavaScript. Egy kiterjesztés komponensei függ a funkcionalitás, nem igényel minden lehetőséget.,

Ez az oktatóanyag olyan kiterjesztést fog létrehozni, amely lehetővé teszi a felhasználó számára, hogy megváltoztassa bármely oldal háttérszínét developer.chrome.com. számos alapvető összetevőt fog használni a kapcsolatok bevezető bemutatására.

a kezdéshez hozzon létre egy új könyvtárat a kiterjesztés fájljainak tárolására.

a kitöltött kiterjesztés letölthető itt.

hozza létre a manifeszt #

kiterjesztések kezdődik a nyilvánvaló. Hozzon létre egy manifest.json nevű fájlt, amely tartalmazza a következő kódot, vagy töltse le a fájlt itt.,

a manifest fájlt tartalmazó könyvtár bővítményként hozzáadható fejlesztői módban a jelenlegi állapotában.

1. nyissa meg a Kiterjesztéskezelő oldalt a chrome://extensionsnavigációval.
   • a Kiterjesztéskezelő oldal a Chrome menüre kattintva is megnyitható, az egérmutatót több eszköz fölé helyezve, majd a Kiterjesztések kiválasztásával.
2. engedélyezze a fejlesztői módot A Fejlesztői mód melletti kapcsolóra kattintva.
3. kattintson a kicsomagolt Betöltés gombra, majd válassza ki a kiterjesztési könyvtárat.

ta-da!, A kiterjesztés sikeresen telepítve van. Mivel a manifeszt nem tartalmaz ikonokat, egy általános eszköztár ikon jön létre a kiterjesztéshez.

utasítás hozzáadása #

bár a kiterjesztés telepítve van, nincs utasítás. Mutasson be egy háttér szkriptet egy background.js nevű fájl létrehozásával, vagy töltse le itt, majd helyezze be a kiterjesztési könyvtárba.

háttér szkriptek, valamint sok más fontos összetevő, regisztrálni kell a manifest., Egy háttérfájl regisztrálása a manifest-ben megmondja a kiterjesztésnek, hogy melyik fájlnak kell hivatkoznia, és hogyan kell viselkednie.

a kiterjesztés most már tisztában van azzal, hogy tartalmaz egy nem perzisztens háttér szkriptet, és beolvassa a regisztrált fájlt a fontos eseményekre, amelyeket meg kell hallgatnia.

Ez a kiterjesztés szüksége lesz információt egy állandó változó, amint a telepített. Kezdje azzal, hogy a runtime.onInstalled hallgatási eseményt beilleszti a háttér szkriptbe. A onInstalled hallgató belsejében a kiterjesztés értéket állít be a tároló API használatával., Ez lehetővé teszi, hogy több kiterjesztés-összetevő hozzáférjen ehhez az értékhez, majd frissítse azt.

a legtöbb API-t, beleértve a storage API-t is, a "permissions" mezőben kell regisztrálni a kiterjesztés használatához.

navigáljon vissza a kiterjesztés kezelése oldalra, majd kattintson az Újratöltés linkre. Egy új mező, vizsgálja meg a nézeteket, kék hivatkozással, háttéroldallal válik elérhetővé.,

kattintson a linkre, hogy megtekinthesse a háttér script “s Konzol log,”The color is green. ”

be egy felhasználói felület #

kiterjesztések is számos formája a felhasználói felület, de ez egy fog használni egy felugró. Hozzon létre egy popup.html nevű fájlt a könyvtárba, vagy töltse le itt. Ez a kiterjesztés egy gombot használ a háttér színének megváltoztatásához.

a háttér szkripthez hasonlóan ezt a fájlt a page_actionalatt található manifesztben felugró ablakként kell jelölni.,

Az eszköztár ikonjainak kijelölése a page_action alatt is szerepel a default_icons mezőben. Töltse le itt a képek mappát, csomagolja ki, majd helyezze a kiterjesztés könyvtárába. Frissítse a manifeszt, így a kiterjesztés tudja, hogyan kell használni a képeket.

a Kiterjesztések képeket is megjelenítenek a Kiterjesztéskezelő oldalon, az engedélyek figyelmeztetésében és a faviconban. Ezek a képek a iconsalatt találhatók.,

Ha a kiterjesztés ebben a szakaszban újratöltődik, akkor szürke méretű ikont tartalmaz, de nem tartalmaz semmilyen funkcionalitási különbséget. Mivel apage_action a manifesztben szerepel, a kiterjesztésen múlik, hogy megmondja a böngészőnek, hogy a felhasználó mikor léphet kapcsolatba apopup.html.

add deklarált szabályok A háttér script a declarativeContentAPI belülruntime.onInstalled hallgató esemény.

a kiterjesztésnek engedélyre lesz szüksége adeclarativeContent API eléréséhez a manifesztben.,

a böngésző most egy színes oldalművelet ikont jelenít meg a böngésző eszköztárában, amikor a felhasználók egy "developer.chrome.com" URL-re navigálnak. Ha az ikon teljes színű, a felhasználók rákattinthatnak a felugró ablakok megtekintéséhez.html.

a felugró felhasználói felület utolsó lépése szín hozzáadása a gombhoz. Hozzon létre és adjon hozzá egy https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js nevű fájlt a következő kóddal a kiterjesztési könyvtárba, vagy töltse le itt.

Ez a kód apopup.html gombról ragadja meg a gombot, majd kéri a színértéket a tárolóból., Ezután a színt a gomb háttereként alkalmazza. https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js popup.htmlparancsfájlcímkével.

töltse újra a kiterjesztést a zöld gomb megtekintéséhez.

Layer logic #

a kiterjesztés most már tudja, hogy a felugró ablaknak elérhetőnek kell lennie a felhasználók számára developer.chrome.com megjelenik egy színes gomb, de logikára van szüksége a további felhasználói interakcióhoz. Frissítés https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js a következő kód beillesztéséhez.,

a frissített kód hozzáad egyonclick eseményt a gombon, amely programosan befecskendezett tartalom szkriptet indít. Ez az oldal háttérszínét ugyanolyan színűvé teszi, mint a gomb. A programmatic injection lehetővé teszi a felhasználó által hivatkozott tartalom szkriptek helyett automatikus behelyezése nem kívánt kódot a weboldalakat.

a manifesztnek szüksége lesz aactiveTab engedélyre, hogy a kiterjesztés ideiglenes hozzáférést biztosítson atabs API-hoz. Ez lehetővé teszi a kiterjesztés tabs.executeScripthívását.,

a kiterjesztés már teljesen működőképes! Töltse be újra a kiterjesztést, frissítse ezt az oldalt, nyissa meg a felugró ablakot, majd kattintson a gombra, hogy zöldre fordítsa! Egyes felhasználók azonban a hátteret más színre szeretnék változtatni.

adjon meg a felhasználóknak opciókat #

a kiterjesztés jelenleg csak lehetővé teszi a felhasználók számára a háttér zöldre váltását. Beleértve a Beállítások oldal ad a felhasználóknak nagyobb ellenőrzést a kiterjesztés funkcionalitását, tovább testre a böngészési élményt.,

Kezdje azzal, hogy létrehoz egy fájlt aoptions.html nevű könyvtárban, majd adja meg a következő kódot, vagy töltse le itt.

ezután regisztrálja az opciók oldalt a manifesztben,

töltse be újra a kiterjesztést, majd kattintson a részletekre.

görgessen lefelé a részletek oldalon, majd válassza ki a kiterjesztési lehetőségeket az opciók oldal megtekintéséhez, bár jelenleg üresen jelenik meg.

Az utolsó lépés az opciók logikájának hozzáadása., Hozzon létre egy options.js nevű fájlt a kiterjesztési könyvtárban a következő kóddal, vagy töltse le itt.

négy színbeállítást biztosítanak, majd gombokként generálják az opciók oldalon az onclick eseményhallgatókkal. Amikor a felhasználó rákattint egy gombra, frissíti a szín értéke a kiterjesztés globális tároló. Mivel az összes kiterjesztés fájlokat húzza a színes információkat a globális tároló nincs más értéket kell frissíteni.

gratulálok! A könyvtár most rendelkezik egy teljesen működőképes, bár egyszerű, Chrome kiterjesztéssel.

mi a következő lépés?,

• A Chrome-bővítmény áttekintése egy kicsit biztonsági másolatot készít, és általában sok részletet tölt be a Bővítmények architektúrájáról, valamint néhány konkrét koncepciót a fejlesztők meg akarnak ismerni.
• Ismerje meg a hibakeresési útmutatóban a Kiterjesztések hibakeresésére rendelkezésre álló lehetőségeket.
• A Chrome-bővítmények hozzáférhetnek a nagy teljesítményű API-khoz a nyílt weben elérhető érték felett. A króm.* API dokumentáció végigmegy minden API.
• a fejlesztő útmutatója több tucat további hivatkozást tartalmaz a fejlett kiterjesztés létrehozásához releváns dokumentációra.,

---