Studentski izvještaji

Na sastanku s mentorom i asistentima privukla me tema koja se bavi pluginovima. Kao primjer, meni i kolegi Zahranu, dan je plugin koji prelaženjem pokazivača preko riječi ispisuje opis i značenje te riječi.

Proučiti rad plugina te njegove mogućnosti.

Za izradu najjednostavnijeg plugina, potrebno je znanje htmla i javascripta. Uspio sam sa dosadašnjim znanjem sklepati poprilično jednostavni plugin u Chromeu.

Naučiti baratati htmlom i javascriptom te istražiti dalje mogućnosti pluginova.

Proučavao sam razlike između preglednika (Google Chrome, Mozilla Firefox i Opera) te smo se odlučili za Chrome. Sve ekstenzije, za početak, moraju imati datoteku koja definira osnovno ponašanje ekstenzije, kod Chrome je to manifest datoteka. Što se tiče unošenja skripti u stranicu, Chrome je najjednostavniji, JavaScript i CSS mogu biti unešeni u bilo kojem trenutku pomoću API poziva. Sva tri preglednika imaju različite načine prenošenja poruka između sadržajnih skripti, preglednikovih dijelova za interakciju i pozadinske skripte. Chrome je, opet, najjednostavniji, koristeći jednostavne APIje. Porukama se barata pomoću message listenera. Bilo koji standardni HTML i JavaScript editor se može koristiti za izradu ekstenzija kod sva tri preglednika. Chrome u potpunosti zasjenjuje suparnike kad je u pitanje debugiranje. Samo jednim sučeljem, svi dijelovi ekstenzije, uključujući pozadinske procese, sadržajne skripte i korisnička sučelja preglednika, mogu se deboguirati. Jednostavna datoteka console.log piše sve poruke u konzolu. Kad je ekstenzija spremna, sva tri preglednika imaju sučelje nalik trgovini gdje korisnici mogu otkrivati i skidati ekstenzije. Kod Chrome-a ekstenzije jednostavno trebaju biti zipane i uploadane u store. Ekstenzija mora biti odobrena prije nego postane vidljiva.

Daljnje učenje htmla i javascripta.

Prilikom pritiska na ikonu ekstenzije, otvara se iskočni prozor. Kako će taj prozor izgledati, navodimo u popup.html datoteci (koju treba navesti u manifest.json-u pod default_popup). On je u potpunosti izmjenjiv, odnosno nismo forsirani na neku strukuturu unutar njega, nego imamo potpunu slobodu i kontrolu što će se u njemu nalaziti jer se uređuje kao i bilo koja druga stranica sadržana u html datoteci.

5. tjedan (06. - 12.11.2017.)

S obzirom da želimo prevesti označeni tekst, prvo taj tekst nekako moramo dohvatiti. To ćemo učiniti pomoću Chrome-ovog API-ja (za razmjenjivanje poruka između sadržajnih skripti i background skripte) kojeg će aktivirati funkcija addListener. Ta funkcija čeka na neki događaj, u našem slučaju će to biti otpuštanje miša, “mouseup”. Kada dođe do toga, pozvat će se funkcija sendMessage koja će kao argument primati označeni tekst. Kada ti podaci dođu do pozadinske skripte (preko funkcije onMessage), njemu mogu pristupiti i ostale sadžajne skripte.

6. tjedan (13. - 19.11.2017.)

Dizajn našeg iskočnog prozora, definiramo u datoteci popup.html. Na vrhu će se nalaziti ime ekstenzije (Sequoia), ispod toga će biti padajući izbornik za izbor jezika, potom gumb čiji klik će pokretati prijevod, a ispod njega nalazit će se 2 pravokutnika u kojima će biti označeni tekst i dobiveni prijevod.

Napisana je popup.html datoteka. Time je napravljen dizajn iskočnog prozora onako kako je i planiran. Nije pametno manevrirati podacima u pozadinskoj skripti, pa smo zato dodali još i popup.js skriptu koja služi upravo tome. U njoj se pohranjuje izbor jezika (iz select elementa, padajućeg izbornika, naše ekstenzije) te se dohvaća označeni tekst iz background skripte.

Na red je došlo prevođenje označenog teksta. Od nekoliko opcija (API, čitanje iz datoteke-rječnika,…) odlučili smo se za korištenje API-ja nekog online prevoditelja. Razlog tome je jednostavnost i podložnost promjenama. Prvo smo htjeli iskoristiti Google Translate, no njega bismo besplatno mogli korisititi svega mjesec dana, tako da smo se na kraju odlučili za Yandex Translate. Kako ga koristiti, pročitali smo na njihovoj službenoj stranici.

https://tech.yandex.com/translate/doc/dg/concepts/About-docpage/

Prijevod preko Yandexovog API-ja dobivamo slanjem i primanjem XMLHttpRequesta. Ta klasa sadrži metode “send” i “open”, pomoću kojih se definira vrsta http zahtjeva koji šaljemo, “onreadystatechange” u kojoj je definirano ponašanje po završetku operacije zahtjeva i dobivanju, tj. spremanju XML-a, i URL koji je napravljen po uputama iz Yandexove dokumentacije. Prijevod nije u potpunosti serviran, odnosno mora ga se izvući iz XML-a razdvajanjem po tagovima.

Ekstenzija radi. Dodano da, ukoliko nije označen tekst, ekstenzija to javlja korisniku porukom na odgovarajućem jeziku. Nakon odrađenog prijevoda, u ekstenziji bi ostao zadnje označeni tekst. Taj dio ispravljen je resetiranjem varijable u koju se sprema označeni tekst u pozadinskoj skripti. S obzirom da će korisnik, vrlo vjerojatno, prevesti više stvari za redom (vjerojatno na isti jezik) želimo da taj jezik ostane pohranjen, odnosno da se ne mora svaki put iznova označavati jezik na koji se prevodi. To je riešeno spremanjem indeksa zadnjeg odabranog jezika pomoću kojeg se, pri otvaranju iskočnog prozora, namješta zadani jezik.

Malene promjene u izgledu ekstenzije. Izrađena tehnička i projektna dokumentacija. U tijeku pripreme za prezentaciju projekta.