3. lecke - a legegyszerűbb kiterjesztést hozzuk létre a böngészővel kapcsolatos műveletekkel

Folytatjuk cikkeink "Iskola" sorozatát, amely a Google Chrome böngészőjéhez készült bővítmények és alkalmazások létrehozását szenteli. És ma megpróbáljuk létrehozni a legegyszerűbb kiterjesztést "Hello, World!" csak egyetlen Chrome API-böngészővel. By the way, nagyon kellemes, hogy a fejlesztő Vadim csatlakozott a ciklus cikkek. aki felvázolta a lecke meghosszabbításának példáját és a teljesen felkészített 4. leckét.

És most folytatjuk a bővítést. Hozzon létre egy mappát kifejezetten az új projekthez. Nevezzük mindennek. Minden fájlunk létrehozásra kerül és benne lesz.

Miért kezdünk létrehozni meghosszabbítását, és ez az alapja minden bővítményt a Google Chrome? Ez a manifest.json. Egyszerűen hozzon létre egy szöveges fájlt, és nevezd át a manifest.json (by the way, mindannyian tisztességes ember, és nem használja a kiterjesztéseinek elrejtése ismert fájltípusok, vagy lehet manifest.json.txt fájlt úgy néz ki, ostoba és nem fog működni a jövőben). Kinyitjuk a létrehozott jegyzéket és írunk rá.

Ez az alaprész, amelyet minden manifest.json-ban javasolunk. Mit írtunk? Először is meghatároztuk kiterjesztésünk nevét. Mindenhol használják: a könyvtárban, a böngészőbővítmények listájában stb. A kiterjesztés leírása (leírás) nem szükséges, de nagyon kívánatos! Mind a katalógusban, mind a böngészőben használják, és általában segít a felhasználóknak abban, hogy elsődleges képet nyújtsanak a fejlődésükről. A bővítmény aktuális verziójának száma (verzió). Anélkül, sehol. Frissítés kiadása - a verziószámot nagyobbra cserélheti. A számok megváltoztatása Öntől függ: 2.0 vagy 1.1 vagy 1.0.0.1. Ahogy tetszik. Jelölje meg a használni kívánt ikonok készletét is. Javasoljuk a 128, 48 és 16 méretek használatát. Mint látható ránk.

Megadtuk az ikonokat a manifestben? Szóval most be kell helyeznünk a kiterjesztésünk mappájába. És nevezzük meg, ahogy írtuk le. Egyébként ismét ajánlott a PNG típus használata a dokumentációból, bár mások támogatottak. A képünk a leckében választja ki, amit akar. Ők képviselik a fejlődését.

Leírtuk az alapot. De azt szeretnénk, hogy bővítményünk létrehozzon egy gombot az eszköztáron. az ablak megnyitására kattintva. Ie Meg kell ismertetnünk a Böngészőmunka blokkot a manifesztünkben. Hozzáadjuk és megkapjuk.

Itt jeleztük, mit akarunk létrehozni. Nevezetesen a default_title fejlécével ellátott gomb, a default_icon ikon segítségével, amely megnyitja a popup.html fájlt. 48-as méretű ikont használtunk, bár valójában az eszköztár legfeljebb 19 képpontot képes felvenni. De rendben van. Ez lesz a lépték.

Teljesen leírtuk manifest.json-t. Most pedig létre kell hoznunk a tényleges popup.html-et, amelyre hivatkozunk. Úgy hoztuk létre, mint a manifest.json. A popup.html maga a leggyakoribb HTML dokumentum. Remélem, már rendelkezik a HTML alapvető megértésével. Ezért a létrehozott dokumentumban a következőket adjuk hozzá.

Egyszerűen fogalmazva, oldalunk tartalmaz egy képet és a "Hello, World!" Kifejezést.

A bővítés készen áll! És most teszteljük. A króm: // kiterjesztések / oldalakon keresse meg a fejlesztői módot, és kattintson a "Csomag nélküli bővítmények letöltése" gombra. Megadjuk a mappát ott és ez az! A bővítmény telepítve van és fut. Keresse meg az eszköztár ikonját, és kattintson rá. Lásd az oldalt? Kiváló =)

A minta megkapható minta letölthető.

Részletes dokumentáció itt érhető el.

Köszönöm a figyelmet. Kérdései vannak?