Pisanje jednostavne Google Chrome ekstenzije [Vodič]

• 12Ovo se svidja korisnicima: Gedza98, Aco, _ivKe, Sale.S, Ričard, Default, E.L.I.T.E., NIx Car, TwinHeadedEagle, mcrule, vinted, Filodendron
  
  Registruj se da bi pohvalio/la poruku!

Uloguj se preko Facebooka da bi skinuo fajl:

Da ne smaram mnogo - Hteo sam neku mogućnost na nekom sajtu i dok sam pisao feedback administratorima, setim se da mogu i sam da napišem ekstenziju koja će mi omogućiti to što želim.

Uopšte nisam bio upoznat sa procesom do pre 15-tak minuta, pa je ovo više "smuti pa prospi" fazon.
Ispostavilo se da nije preteško.

Join in

'K, ako bacimo pogled na zvanični tutorijal za pisanje ekstenzija za GC : https://developer.chrome.com/extensions/getstarted

Vidimo da nam je ključan fajl u celoj priči manifest.json.
Ovaj fajl sadrži sve informacije koje su presudne za našu ekstenziju.

Mi ćemo napisati ekstenziju koja će se automatski aktivirati čim korisnik poseti neku stranicu a cilj te ekstenzije je da promeni vrednost nekog postojećeg elementa.

Neka nam MyCity forum bude zamorče.
Hajde da naziv svakog foruma promenimo u velika slova i na kraju dodamo uzvičnik.

Napravimo manifest.json i prekopiramo sledeće :

{  "manifest_version": 2,   "name": "MC Enlarger",   "description": "This extension changes size of forum titles",   "version": "1.0",   "content_scripts": [     {       "matches": ["http://www.mycity.rs/*"],        "js": ["mcEnlarge.js"]     }   ],   "permissions": [     "activeTab"   ] }

Dakle, vidimo neke osnove koje su jasne same po sebi :
Naziv ekstenzije
Opis ekstenzije
Verziju ekstenzije

Zatim vidimo sekciju "content_scripts".
Kako se naš kod izvršava automatski po učitavanju stranice i menja sadržaj, treba nam taj tip skripte.
Tamo imamo referencu ka sajtu na kom želimo da se aktiviraju skripte i referencu ka samoj skripti.
To je trenutno mcEnlarge.js.

Sačuvajte fajl kao manifest.json u novi folder koji možete imenovati po želji.

U tom istom folderu napravite tekst fajl i promenite naziv i esktenziju u : mcEnlarge.js

Otvorite fajl u bilo kom editoru teksta ili IDE-u.

Ako pogledamo source MyCity stranica, vidimo da nazivi foruma koriste klasu "forumtitle".



Hajde prvo da pokupimo sve elemente koji koriste tu klasu, u skripti pišemo prvu liniju :

var forumTitles = document.getElementsByClassName("forumtitle");

Zatim želimo da prođemo kroz svaki unos forumTitles-a i da mu modifikujemo innerHTML.

for (var i = 0; i < forumTitles.length; i++) {     var currTitle = forumTitles[i].innerHTML;     forumTitles[i].innerHTML = currTitle.toUpperCase() + " !"; }

Prvo sačuvamo vrednost innerHTML-a u promenljivoj currTitle, zatim kao vrednost innerHTML-a trenutne stavke dodelimo istu tu vrednost koju smo sačuvali, samo što je ovog puta provučemo kroz toUpperCase() i dodamo uzvičnik na kraju. To se isto ponavlja za svaku stavku koju smo ranije pronašli.



Otvorimo Settings > Extensions > Developer Mode (check) > Load Unpacked Extension > Izaberite folder sa json i js fajlovima.

Ukoliko ste ispratili uputstva lepo, sada imate novu ekstenziju koju smo upravo napisali u listi ekstenzija.



Hajde da je testiramo

U novom tabu otvorite bilo koji deo MyCity foruma i videćete da su naslovi foruma napisani velikim slovima i imaju znak uzvika na kraju.



p.s. i teme koriste istu tu klasu, sada sam video

Uglavnom, vidite da nije uopšte teško modifikovati sadržaj na postojećim stranicama.
Isto tako nije teško dodati nove elemente u DOM, kako sam video.

Meni je ovo svakako postalo interesantno sada još više, pa ću možda da posvetim malo vremena nekim jednostavnijim ekstenzijama.



Source :

https://www.mycity.rs/must-login.png

https://www.mycity.rs/must-login.png


Dopuna: Prvobitno napisano januara 2016. godine

• 0Niko još nije pohvalio poruku.
  Registruj se da bi pohvalio/la poruku!

Ovo je odlično. Nikad do sada nisam učio js, ali si me zainteresovao sa ekstenzijama pa ću se malo bolje upoznati sa njim.
Koliko je slično pisanje ekstenzija u Operi i u Chrome-u? Ja koristim Operu i trebće mi ekstenzije za nju.
Koliko sam primetio dosta je slično.

• 1Ovo se svidja korisniku: Filodendron
  
  Registruj se da bi pohvalio/la poruku!

^ Obzirom da je Opera od verzije 15 bazirana na Chromium projektu, pisanje ekstenzija ne bi trebalo da se po bilo čemu razlikuje tj. ekstenzije koje rade u Chrome-u će bez problema raditi i u Operi.

Evo još nekih korisnih informacija:

- Postoje dve vrste prikaza: browserAction i pageAction. Proširenje koje se radi sa browserAction će biti prikazano sve vreme u vidu ikonice sa strane pored podešavanja, a pageAction (koje sam ja koristio) prikazuje ikonicu u adress bar-u pod određenim uslovima. Evo primera:

"page_action": {      "default_icon": "icon16.png",      "default_popup": "manager.html",      "default_title": "Kliknite za pregled" }

- Sadržajne skripte su skup svih skripti preko kojih omogućujete interakciju sa proširenjem i web stranicom na kojoj se pokreće (ja sam recimo koristio event handler-e koji bi pri određenoj akciji slali podatke u IndexedDB bazu podataka).

- Popup prozor je oblačić koji se prikazuje kada kliknete na ikonicu proširenja - on može da sadrži informacije, ali i da prikuplja podatke sa udaljenog servera preko XMLHttpRequest.

- U proširenju možete da imate više ikonica različitih veličina (što je i preporučljivo) i da ih sve obuhvatite odjednom:

"default_icon" : {      "32": "icon32.png",      "48": "icon48.png",      "128": "icon128.png" }

Kada pakujete proširenje gledajte da sačuvate .pem fajl u kom se nalazi privatni ključ - ukoliko ga izgubite nećete moći više da ažurirate proširenje!