Pisanje jednostavne Google Chrome ekstenzije [Vodič]

Pisanje jednostavne Google Chrome ekstenzije [Vodič]

offline
  • Pridružio: 14 Feb 2008
  • Poruke: 11636

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 Wink

'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 Very Happy

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 Mr. Green

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.

Ziveli

Source :

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

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


Dopuna: Prvobitno napisano januara 2016. godine



Registruj se da bi učestvovao u diskusiji. Registrovanim korisnicima se NE prikazuju reklame unutar poruka.
offline
  • Pridružio: 11 Apr 2012
  • Poruke: 88

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.



offline
  • Pridružio: 23 Maj 2012
  • Poruke: 3987

^ 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" }

Exclamation 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!

Ziveli

Ko je trenutno na forumu
 

Ukupno su 416 korisnika na forumu :: 28 registrovanih, 3 sakrivenih i 385 gosta   ::   [ Administrator ] [ Supermoderator ] [ Moderator ] :: Detaljnije

Najviše korisnika na forumu ikad bilo je 1567 - dana 15 Jul 2016 20:18

Korisnici koji su trenutno na forumu:
Korisnici trenutno na forumu: aramis s, Black Hawk, BlackPhantom, DARKMEN22, darkojbn, dobri covek, Drug pukovnik, dule_pacov, goran.vvv, helen1, lelemud, maCvele, Mikulino, milanstankovic087, mrvica78, Penzula, raketaš, Ray1973, rkekoke, rodoljub2, samsung2, tanakadzo, tomigun, Van71, vasa.93, VJ, Voja1978, Wisdomseeker