Pisanje jednostavne Google Chrome ekstenzije [Vodič]

Pisanje jednostavne Google Chrome ekstenzije [Vodič]

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

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: 94

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: 4111

^ 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 399 korisnika na forumu :: 27 registrovanih, 3 sakrivenih i 369 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, Drug pukovnik, DucicM, francis begbie, goxin, GrobarRomanticar, ikan, ivan979, ivance95, Joja2, JOntra2, ladro, Libertas, miodrag2, nenad812, raketaš, Ray1973, repac, rodoljub2, sakota79, shmele, vasa.93, vasaw, WS2, XBMC, Yellow Pinky2, 79693