Razlike

Slijede razlike između dviju inačica stranice

--- studenti:shadi_zahran:sz_dnevnik [2018/01/10 15:27]
szahran
+++ studenti:shadi_zahran:sz_dnevnik [2023/06/19 16:21] (trenutno)
@@ Redak 82: / Redak 82: @@
   "manifest_version":2,
-  **"browser_action": {
+  "browser_action": {
     "default_icon": "icon.png",
     "default_popup": "popup.html"
-  }**,
+  },
   "permissions": [
@@ Redak 94: / Redak 94: @@
 </code>
-U navedenom isječku gledamo zadebljani dio koda. Pod default_icon navodimo puno ime slike za koju zelimo da bude zadana slika naše ekstenzije, a pod default_popup navodimo puno ime datoteke koju smo napravili za naš iskočni prozor. Slika koju smo izabrali će biti vidljiva pored adresne trake te će se na nju moći kliknuti što će izazvati otvaranje iskočnog prozora koji izgleda onako kako smo definirali u datoteci koju smo naveli pod default_popup. Budući da je izgled i funkcionalnost iskočnog prozora definirana html datotekom, uređujemo ga kao bilo koju drugu stranicu koju bi uređivali pomoću HTML-a.
+U navedenom isječku gledamo dio koda koji spada pod browser_action. Pod default_icon navodimo puno ime slike za koju zelimo da bude zadana slika naše ekstenzije, a pod default_popup navodimo puno ime datoteke koju smo napravili za naš iskočni prozor. Slika koju smo izabrali će biti vidljiva pored adresne trake te će se na nju moći kliknuti što će izazvati otvaranje iskočnog prozora koji izgleda onako kako smo definirali u datoteci koju smo naveli pod default_popup. Budući da je izgled i funkcionalnost iskočnog prozora definirana html datotekom, uređujemo ga kao bilo koju drugu stranicu koju bi uređivali pomoću HTML-a.
-== Daljnji koraci ==
 ----
@@ Redak 104: / Redak 102: @@
 == Dosadašnji rad ==
-{{https://developer.chrome.com/static/images/gettingstarted-icon.png?nolink&127x127}}
+{{https://developer.chrome.com/static/images/gettingstarted-icon.png?nolink&127x127}}Daljnje istraživanje JavaScripta i načina na koji možemo implementirati označavanje teksta. Zaključili da će se trebati koristiti Chrome-ov runtime.sendMessage API i funkcija addListener. Funkcija addListener osluškuje događaj koji smo definirali, tj. čeka da se taj isti događaj dogodi te potom poduzima neku akciju koju također definiramo. Mi želimo dodati Listener na kraj selekcije budući da nam to signalizira kraj selekcije teksta. Za to nam koristi događaj "mouseup" što označava otpuštanje klika miša. Osim mouseup eventa, tj. događaja postoje još i:
+  * onclick,
+  * ondblclick,
+  * onmouseover,
+  * onmouseout,
+  * oncontextmenu,
+i mnogi drugi. Unutar funkcije koja se izvede kada se naš mouseup događaj dogodio smo koristili jedan poziv funkcije runtime.sendMessage te smo kao parametar iskoristili tekst koji smo dobili ranije. Korištenjem sendMessage funkcije smo tako označeni tekst poslali u pozadinsku, odnosno background, skriptu kojoj mogu pristupati svi ostali elementi, odnosno skripte, ekstenzije. U pozadinskoj skripti smo koristili funkciju onMessage pomoću koje smo primili i spremili dobiveni tekst u varijablu.
+----
+=== 6. tjedan (13.11.2017.-19.11.2017.) ===
+== Dosadašnji rad ==
+Osmislili i započeli dizajn iskočnog prozora uređivanjem popup.html datoteke. Cilj nam je da ekstenzija bude jednostavna za koristiti te da samim time ima i jednostavan izgled. Na vrhu će biti ime naše ekstenzije (Sequoia), postojat će izbor jezika u select elementu te gumb na čiji klik će se prevesti označeni tekst. Ispod gumba će biti 2 paragraph elementa pravokutnog oblika unutar kojih se pojavljuju označeni tekst, odnosno prijevod.
+----
+=== 7. tjedan (20.11.2017.-26.11.2017.) MEĐUISPITI ===
+----
+=== 8. tjedan (27.11.2017.-03.12.2017.) MEĐUISPITI ===
+----
+=== 9. tjedan (04.12.2017.-10.12.2017.) ===
+== Dosadašnji rad ==
+Napisali kod za popup.html datoteku, tj. napravili dizajn iskočnog prozora te je sve ostalo kako je bilo planirano. Za manevriranje podacima i obavljanje prijevoda smo napravili skriptu popup.js u kojoj iz select elementa iskočnog prozora preuzmemo odabrani jezik te pomoću chrome.runtime.getBackgroundPage() funkcije povlačimo označeni tekst, koji smo prethodno pohranili u background skriptu, u novonapravljenu skriptu popup.js.
+----
+=== 10. tjedan (11.12.2017.-17.12.2017.) ===
+== Dosadašnji rad ==
+Kako bi mogli ostvariti željeni prijevod, počeli smo razmatrati opcije za ostvarivanje istog. Kao opcije smo imali korištenje API-ja nekog online prevoditelja, stvaranje tekstualne datoteke s bazom riječi i definicijama istih ili preuzimanje tekstualne datoteke s riječnikom određenog jezika s nekog web poslužitelja i čitanje definicija odabranih riječi iz te tekstualne datoteke. Odlučili smo se za korištenje API-ja online prevoditelja budući da se tako može lakše dinamički prevesti željeni tekst na bilo koji jezik s puno manje napora.
+Prva opcija nam je bio Google Translate, no budući da se korištenje njegovog API-ja plaća (postoji free trial opcija koja traje mjesec dana) trebali smo naći neku drugu opciju te smo se odlučili za Yandex i njegov Translate API. Na njihovoj službenoj stranici su bile sve upute koje su potrebne za slanje API zahtjeva.
+[[https://tech.yandex.com/translate/doc/dg/concepts/About-docpage/|Yandex Translate API dokumentacija]]
+----
+=== 11. tjedan (18.12.2017.-24.12.2017.) ===
+== Dosadašnji rad ==
+Nakon biranja načina prevođenja, jedino nam je preostalo doraditi kod kako bi se ostvario prijevod. Za to koristimo klasu XMLHttpRequest. Ta klasa sadrži metode "open" i "send" kojima definiramo vrstu zahtjeva koji šaljemo te URL koji je napravljen po uputama na Yandex Translate API dokumentaciji. Unutar još jedne metode XMLHttpRequest klase, "onreadystatechange", smo definirali ponašanje u trenutku kada readyState varijabla bude 4 (operacija zahtjeva je završena) te status varijabla bude 200 (dobiven je odgovor te pohranjen unutar tijela naše instance XMLHttpRequest klase). Yandex Translate API vraća odgovor u formatu XML te smo iz njega izvukli prijevod našeg teksta razdvajanjem odgovora po tagovima (slično kao tagovi u HTML-u).
+[[https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/readyState|XMLHttpRequest readyState]]
+[[https://developer.mozilla.org/en-US/docs/Web/HTTP/Status|XMLHttpRequest status]]
+----
+=== 12. tjedan (25.12.2017.-31.12.2017.) PRAZNICI ===
+----
+=== 13. tjedan (01.01.2018.-07.01.2018.) ===
+== Dosadašnji rad ==
+Poboljšavanje rada ekstenzije:
+  - Ako nije označen nikakav tekst, javi korisniku da označi tekst
+  - Tekst koji je bio prethodno odabran ostaje spremljen i prikazan unutar iskočnog prozora ekstenzije iako više nije odabran
+  - Odabrani jezik ne ostaje spremljen kao zadnje odabrani, već se mora svaki put birati pri otvaranju iskočnog prozora ekstenzije
+Točku 1 smo ostvarili tako da smo provjerili sadržaj varijable u koju spremamo tekst te ako nema smisleni sadržaj (u našem slučaju neki String), prikaže se odgovarajuća poruka.
+Točku 2 smo ispravili na način da smo varijablu u kojoj je spremljena riječ resetirali, tj. izbrisali prethodno izabrani sadržaj, ali ne u skripti iskočnog prozora, nego u background, odnosno pozadinskoj, skripti jer se svaki put pri otvaranju iskočnog prozora povlači sadržaj varijable iz iste.
+Točku 3 smo ispravili tako što smo na klik gumba "translate" spremili indeks jezika koji je odabran te pri svakom otvaranju iskočnog prozora namjestili da unutar "select" elementa bude odabran taj jezik.
+----
-== Daljnji koraci ==
+=== 14. tjedan (08.01.2017.-14.01.2018.) Male promjene izgleda iskočnog prozora ekstenzije, dodana arhiva ekstenzije preko upravitelja datoteka na stranici studentskih izvještaja, izrada tehničke i projektne dokumentacije te priprema za prezentaciju projekta ===
 ~~NOTOC~~

Studentski izvještaji

Korisnički alati

Site alati

Razlike

Stranični alati