Studentski izvještaji

Na sastanku s mentorom i asistentima kolega Štoković i ja smo dobili zadatak zajedno obraditi temu plugina za browsere. Kao primjer je bio zadan plugin koji ispisuje opis i značenje riječi pri prelasku miša preko riječi.

Proučiti kako se rade pluginovi te što se sve može s njima postići i ostvariti.

Proučio kako se rade ekstenzije za browsere, tj. specifično za Google Chrome. Budući da je potrebno znanje Javascript-a i HTML-a za razvoj pluginova sam poradio i na tome jer se nisam prije susretao s tim programskim jezicima. Napravio dva jednostavna plugina za Google Chrome od kojih je jedan za izbor boje pozadine trenutne web stranice, a drugi za zamjenu svih pojava neke riječi ili izraza koju korisnik sam odabere nekom također proizvoljnom riječi ili izrazom na trenutno otvorenoj web stranici.

Proučiti kako napraviti kompleksnije ekstenzije kao npr. riječnik koji čita iz neke datoteke ili iz nekog drugog izvora te traži riječ nad kojom se nalazi miš.

Proučio razlike u razvoju ekstenzija Firefox-a i Google Chrome-a.

Glavna datoteka:

• manifest.json (Chrome)
• package.json (Firefox)

Dodavanje korisničkom sučelju browsera:

• Ako želimo dodati izbornike, gumbe na alatnoj traci ili slično u Google Chrome-u, moramo ih statički uključiti u manifest.json datoteku
• Firefox je fleksibilniji što se tiče toga jer su elementi za interakciju specificirani u glavnom modulu te se ekstenzija prilagođava stranici

Sadržajne skripte (Content Scripts):

• Chrome je najjednostavniji jer se Javascript i CSS mogu ubaciti u bilo kojem trenutku pomoću API poziva
• Za Firefox se koriste razni modovi za uključivanje skripti budući da je dosta kompliciraniji proces od Chrome-ovog

Pozadinski procesi i slanje poruka (Message Passing):

• Chrome ima jednostavan model za slanje poruka korištenjem prilično laganog API-ja, poruke se mogu slati međusobno iz iskočnih prozora browsera, pozadinskih skripti ili procesa te sadržajnih skripti koriištenjem takozvanih “message listeners”
• Firefox također ima prilično kvalitetan način za slanje poruka tako da se jednostavno doda “event listener” na određenu poruku koju želimo obraditi

Kodiranje:

• Može se koristiti bilo koji standardni HTML i Javascript editor
• Za ubacivanje ekstenzije u Chrome jednostavno iz browsera odaberemo lokaciju direktorija ekstenzije s računala te ako izmijenimo kod ekstenzije sve što trebamo napraviti da bi browser pokretao najnoviju verziju ekstenzije jest pritisnuti reload gumb unutar Chrome-a
• Firefox je dosta kompliciraniji od Chrome-a po tome što svaka promjena u kodu dovodi do obaveze za ponovnim kompajliranjem i reloadanjem ekstenzije

Debugiranje:

• Chrome je ponovno bolji budući da sadrži “web developer toolbar” te se unutar tog jednog sučelja mogu debuggati baš svi dijelovi ekstenzije uključujući pozadinske procese, sadržajne skripte te korisnička sučelja browsera, jednostavan dio Chrome-a console.log ispisuje sve poruke u konzoli
• Firefox nije toliko ugodan kao Chrome što se tiče debugiranja te je poprilično kompliciraniji, ali s određenim dodacima se može taj proces olakšati

Na temelju kratkog istraživanja zaključio sam da je Chrome jednostavniji za korištenje te sam i ja sam korisnik Chrome-a zbog čega sam se opredijelio za razvoj ekstenzije za Google Chrome.

Učiti Javascript i HTML detaljnije kako bih bio spreman na sve potrebe razvoja ekstenzije.

Kod razvoja ekstenzije u pregledniku Google Chrome imamo opciju dodati iskočni prozor koji se aktivira klikom na ikonu desno od adresne trake kao na slici.

Za početak moramo napraviti datoteku s nastavkom .html i spremiti ju unutar direktorija u kojem su sve ostale datoteke koje definiraju našu ekstenziju. Zatim trebamo navesti novu datoteku koju smo nazvali npr. popup.html unutar manifest.json datoteke u kojoj se nalaze glavne odrednice naše ekstenzije.

{
  "manifest_version":2,

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },

  "permissions": [
    "activeTab",
    "storage"
  ]
}

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.