Böngésző bővítmények

2019. január 31.

Magyarul nagyon furin hangzik… Legyen inkább browser extensions, és így talán mindenki jobban megérti, hogy miről is van szó.

Szóval támadt egy ötletem, hogy miért ne írhatnék én is valami menő bővítményt a Chrome-hoz. Ekkor ötletem még nem volt, hogy milyen bővítményt írjak, ezért morfondíroztam rajta egy kicsit, végül rájöttem, hogy egy ötletelést elősegítő extensiont fogok írni… 🙂

Egész életemben nagyon szerettem a véletlen dolgokat, mint a véletlen pixelekből kirajzolt képeket, vagy a véletlen színek palettáját… És tudtam, hogy a véletlen az ötletek generálásánál is jól jöhet.

Tervezés

A terv tehát a következő volt:

  • egy olyan bővítmény, ami új tab megnyitására aktiválódik, hogy minden egyes alkalommal eláraszthatódjunk ötletekkel
  • legyenek random színek, szavak de legfőképp random képek
  • egyszerre viszonylag sok, hogy ne kelljen olyan sokszor frissíteni

Fogtam és feltúrtam az internetet, hogy hogyan lehet bővítményeket írni. A legfontosabb leírás a hivatalos: Developers: Chrome extensions.

Az a nagyon jó abban az oldalban, hogy elég jól fel van építve és már az elején látszott, hogy ez a dolog elég könnyen megy.

Kezdeti lépések

Mivel kiderült, hogy csak egy HTML, CSS és JavaScript alkalmazásról van szó, amit kiegészít egy manifest.json fájl, így rögtön bele is vágtam az alap kialakításába.

Ahhoz viszont, hogy legyen mit megjelenítenem, keresnem kellett olyan API-kat, melyek szolgáltatnak nekem szavakat, színeket és képeket.

Ezek közül talán a random szavak mentek a legnehezebben, így velük kapcsolatban végül arra jutottam, hogy egy fájlba letöltöttem kb. 3000 válogatott szót, így tehát nem API-n keresztül jönnek.

A képekhez a pár nappal korábban megosztott Lorem Picsum oldalt használtam, pont kapóra jött.. 🙂

A random színekhez pedig találtam egy szintén nagyon menő szolgáltatást, a Colormind API-t, ami az általam igényelt szolgáltatáson túl egyéb, sokkal menőbb funkciókkal is rendelkezik. Tulajdonképpen színpalettákat generáló valami, ami deep learning technológiát használ. Minden nap új adathalmazt töltenek be (képeket, filmeket, stb), melyekből tanulhat.

Vad fejlesztés

Szóval megvoltak a meghívandó szolgáltatások. Mivel nagyon egyszerű valamit kellett csinálni, így nem gondoltam túl, de azért letöltöttem az axios, és a Vue.js script fájlait, és összeraktam az oldalt, mindeféle értelmes megjelenítés nélkül.

A Chome-ban az is nagyon jó, hogy a fejlesztőknek szóló részek mindenhol nagyon erősek. A még fejlesztés alatt álló projektet is simán be lehet tölteni a böngészőbe, ezáltal sokkal könnyebben tesztelhető lesz a bővítményünk.

Hogy lehet ezt megtenni? El kell menni a chrome://extensions oldalra, ahol a jobb felső sarokban van egy kapcsoló, amivel a fejlesztői módot lehet kapcsolgatni. És bár én elég sűrűn járok ezen a felületen, esköszöm, hogy eddig nem tűnt fel… 😉

Szóval ha ezt bekapcsoljuk, akkor előjön 3 lehetőség, melyből az első lesz nekünk most érdekes, hiszen ezt választva megadható az a mappa, melyben a bővítmény forrásfájljait tároljuk. Innen pedig, ha hibamentes volt a kód, akkor már be is kapcsolódik és tesztelhető.

Mivel széllel szemben meneteltem elég vadul, így természtesen bele is futottam néhány tipikus problémába (content security policy, CORS), de szerencsére ezek könnyen orvosolhatóak voltak. 🙂

Ráncfelvarrás

Miután funkcionálisan működött, jött az a része, hogy akkor nézzen is már ki valahogy… 🙂

Nulladik lépésként elneveztem brainstormernek, és csináltam egy logót.

Szóval igen, ez egy villanykörte akar lenni, csak kicsit szögletes….. 🙂 De nekem tetszik, mert letisztult és kapcsolódik erőteljesen az ötleteléshez.

Aztán választottam egy betűtípust nagy nehezen, de úgy gondolom, hogy megérte. Bár így visszatekintve, néha elég olvashatatlanok a szavak, de hátha ez is segít az asszociációban. 🙂


Publikáció

Miután minden elkészült, összeállt és letisztázódott, nem volt más hátra, mint hogy elérhetővé tegyem bárki számára.

Ehhez nem kellett mást tennem, mint hogy elmentem a Chrome Web Store-ba, ott pedig a kis fogaskereket kiválasztva eljutottam a Fejlesztői irányítópultba. Mielőtt bármit feltölthettem volna, ki kellett fizetnem 5 dollár regisztrációs díjat, amiért összesen 20 valamit tölthetek majd fel (ebbe nem számolódnak bele a témák).

Meg kellett adnon még egy pár plusz adatot, de utána már fel is tudtam tölteni a forrást zip fájlként és a képeket, kitölthettem a leírást.

Egy perccel később már volt egy bárki által elérhető Chrome bővítményem. Itt megtalálható: brainstormer. Próbáljátok ki, nagy szeretettel várok bármiféle visszajelzést! 🙂

A dolog gyorsaságát az is bizonyítja, hogy este 8 óra körül kezdtem bele, és hajnali 1 órakor már elérhető volt az áruházban. És ebben az időben benne volt az is, hogy egy csomó időt vaciláltam, hogy milyen betűtípust használjak, elkészítettem a logót, és a publikációhoz szükséges adatokat, leírásokat, stb megfogalmaztam, illetve elkészítettem.

Természetesen ettől lehetett volna sokkal menőbbet is csinálni, és még hibák is vannak benne bőven, de úgy gondolom, hogy a legelső, gyors kis ismerkedős projektnek ez bőven jól volt így is.. 🙂

Most, hogy végigvittem egy ilyen mini-projektet, lett egy csomó ötletem arra vonatkozóan, hogy milyen bővítményeket lehetne még megcsinálni.. 🙂

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük