Írás egy kiterjesztés a Google Chrome

Írja kiterjesztése a Google Chrome pillanatok alatt. De lehet (és vannak) írásban az első rashireniem kérdéseket. A legtöbb kézikönyvek írása az első bővítése vannak kialakítva, hogy az első változat a kiáltvány, akiknek a támogatása megszűnik a közeljövőben.

Ezt a cikket kell figyelembe venni:

  • Hogyan írjunk egy kiáltványt v.2
  • Hogyan működik a távoli erőforrások
  • Hogyan működik a cookie-kat
  • Hogyan működik a helyi tároló
  • Hogyan kell kezelni a bejelentések

A cikk végén mi lesz kész expanzió szervező, amely a területen, hogy egy új feladat, valamint a feladatok listáját az aktuális napon. Jelöljük valamennyi követelményt a szervező:

  • Szükség van egy mezőt, hogy az esemény (dátum, időpont, esemény)
  • Meg kell jeleníteni minden feladatát az adott nap, órákon keresztül
  • Minden korábbi esemény megjelenít egy áthúzott
  • Meg kell egy mező adja meg az időt, hogy mennyi szükséges a megjegyzést, valamint lehetővé teszik, és szüntesse meg a bejelölést megjeleníthet asztali értesítéseket
  • A megadott időben az esemény előtt kell mutatnia értesítést a közelgő esemény

Elkezdjük létrehozni kiterjesztése a kezdetektől, azaz a nyilvánvaló. Kiáltvány - ez ugyanaz a fájl kiterjesztések MDM előírt paramétereket. Név, leírás, verzió jogosultságod a telek, engedélyt a cookie-kat, értesítések, a helyi tárolóból. Általában a kiáltvány - hosszabbítót. Hozzon létre egy manifest.json fájlt. Kiáltvány - Egy fájl, ami kell az előre meghatározott név, minden más fájlokat lehet bármilyen nevet. Ebben a fájlban van három kötelező mezők:

Van egy pár szabályt:

  • Nyilvánvaló változat egész számnak kell lennie, akkor is kell írni helyett 2 „2”.
  • hosszabbító változat csak egy karakterlánc, de csak számokból és pontok, vagyis a „1.0” - jó, és 1,0 „0,9 beta” - rossz.

A kötelező mezők - összes lépni létre pop-up ablak javítása. Ahhoz, hogy az ikonra kattintva az megnyílik egy ablak, meg kell adni a kiáltvány „browser_action”

Most hozzon létre egy pop-up ablakban. Ez egy közös html oldalon, hogy lehet bármilyen méretű vagy színű, semmi trükk. Nevezzük „popup.html” fájlt. Ezen fájl létrehozása nem elég - meg kell határozni az nyilvánvaló. Így tettük: «default_popup»: «popup.html».

A bővítmények segítségével a böngésző

Most itt az ideje kipróbálni a működését a rasshirniya. Ehhez töltse le a bővítményt a böngésző. Nyílt krómozott bővítmények menüben. Tegyen egy madár a „Fejlesztői mód”.

Ezt követően, nem lesz három gomb. Kattintson a „Load kicsomagolt kiterjesztése. ”. Válassza ki a mappát a fájl kiterjesztését. Ez hozza a terjeszkedés. Ha minden rendben van, majd az ikonra kattintva - povitsya ablak:

kapcsolat szkriptek

Most csatlakoztassa ezeket szkriptek popup.html

Amikor tárolási támogatást a Chrome-ban tárolja a felhasználói adatokat. És ez a mi tároló bővítése és folyamatosan jön eseményeket. Valójában két oka van. Először is, az adatok tárolási hranischiesya lehet szinkronizálni, ha a bejelentkezési böngészőt. Másrészt az adatok tárolhatók nemcsak a húr, mint a cookie-kat, és bármely formában, akkor lehet tárolni, és tömbök, objektumok. Ahhoz, hogy ez a munka, nyílt hozzáférést tároló az nyilvánvaló.

Most újra vsplavayuschee ablakot. A felugró ablakban lesz egy olyan területen, a mai napon, három bemenet a dátum, az idő és leírása az új esemény, a gombot egy új esemény, valamint egy listát az összes mai eseményének.

Azonnal hozzá a dátumot kijelző #today_date blokk.

Meg kell kinéznie:

Írás egy kiterjesztés a Google Chrome

Tehát, ha megnyomja a „+” gombot, mi kell hozzá egy eseményt. Fájl kezdetben nyilvánítja egy globális változót tároló - lehetőség dolgozni tároló, valamint egy globális tömb feladatok tárolására eseményeket.

Hitelesítés ellenőrzi, hogy a dátum van írva N.H.ÉÉÉÉ méret és idő formátuma hh: mm, valamint hogy a leírásban az esemény legalább három karakter.

Azzal a kiegészítéssel, rájöttek, mi megy a termelés az események között. Ehhez szükségünk van, hogy az összes eseményt az adatbázisból, jelölje ki az összes mai események csak és rendezni őket időben növekvő sorrendben.

getTodayTasks () függvény az általános lista csak azokat az eseményeket a mai napon.

sortTasks () függvény úgy rendezi az eseményeket emelkedő időben.

értesítés

Itt az ideje, hogy konfigurálja a kijelzőn az értesítés a képernyőn. Adjunk egy speciális felugró ablakban jelölőnégyzetet. Ha ez az opció be van jelölve - uvedomlenieya kerül kijelzésre, ha nem jelölt - nem fog. Csak add szövegbevitelt. INPUT alak ez jelzi, hogy mennyi ideig az esemény előtt az értesítés jelenik meg. Azaz, ha van egy esemény tervezett 19:00 5, egy értesítés jelenik meg 18:55 a szövegbeviteli. Popup.html hozzá a kódot ezeket INPUT

Írás egy kiterjesztés a Google Chrome

Most térjünk, hogy ez hogyan fog működni. Ha rákattint a négyzetet az attribútum ellenőrizni fogják ellenőrizni csak az attribútum érték kerül rögzítésre a cookie „show_notifications”. Lapozzunk a beírt szöveget. Szerint a határértéket, az új érték lesz érvényesítésre, ha az egész szám, és nem több, mint 120 levelet az új érték a cookie „when_to_notify”.

De ahhoz, hogy ez működik, meg kell nyitni a hozzáférést a cookie-kat. Ehhez megyünk a manifest.json és hozzá a „jogosultságok”

Most elkezdheti a forgatókönyvet. Ide popup.js. A kezdéshez állítsa be a kezdeti értéket a bemenet. Alapértelmezésben a négyzet nincs bejelölve, azaz a figyelmeztetés nem jelenik meg, és az idő is 0. Ha jelölőnégyzetre kattintva meg fogja változtatni a cookie „show_notifications”. Ha megváltoztatja az értékeket a szöveges mezőben fog változni cookie „when_to_notify” értéket.

Nézzük a funkciót. Kezdjük a funkciók dolgozni a cookie-kat. Ebben az esetben mi vittek a kész funkció w3schools.com.

Nézzük a funkció setCheckbox (). Ő kap egy sütit „show_notifications”, és ellenőrzi, hogy ugyanaz a „valódi” (szöveg, igen), az így kapott érték, opció be van jelölve a jelölőnégyzet igaz, egyébként hamis.

Most tekintsünk setWhenToNotify (). Tart az új érték az időzítőt. Ha ezt az értéket - egy egész, és nem több, mint 120 perc, a cookie „when_to_notify” állítsa be az új értéket. Ha a változó nem telt el ez érvényesítését, a bemenet visszatér az előző értékét cookie „when_to_notify”.

Most viszont, hogy a tényleges észre. Ehhez nyissa meg hozzáférést bejelentések és csatlakoztassa háttér background.js. Be kell csatlakoztatni a háttérképet, mintha az oka a bejelentés popup.js, az értesítés csak akkor jelenik meg, ha megnyit egy felugró ablakban.

Az utolsó sor hozzáférést biztosít a távoli fájl. Az a tény, hogy a kép, amely megjelenik az értesítési szükségszerűen rendelkezésre bővítése távolról. Ebben az esetben egy helyi fájl, de a hozzáférés még mindig ki kell nyitni. Most veszünk background.js. Változót tároló és egy üres tömböt feladatokat. Továbbá, ha egy perces szöveget kap a listán mai események és fogadni őket a feladatok listáját, hogy meg kell történnie a megadott időben. Ezt követően minden ilyen feladatot fog mutatni az értesítést.

getTodayTasks () és getCookie () vett popup.js. Kezdjük az elemzést a getNextTask () függvényt. A funkció összehasonlítja az aktuális időt és az idő az esemény, ha ez egyenlő az érték, amely tárolja a cookie „when_to_notify”, akkor a tömb csatolt következő sor az esemény idejét és leírását. Miután ellenőrizte az összes eseményt vozvraschet tömb mellett.

show () függvény megjelenít egy értesítést a megadott szöveget.

Az eredmény ez a szkript közlendő itt:

Írás egy kiterjesztés a Google Chrome

utószó

hasznos linkek

Kapcsolódó cikkek