Tutorial: crearea de extensii pentru Google Chrome/Chromium

Indiferent că folosiți Firefox, Opera, Chromium sau Google Chrome este imposibil să nu aveți acolo vreo extensie care să vă ajute în timp ce navigați pe internet. Personal am și eu câteva extensii sub Google Chrome, printre care amintesc aici Adblock Plus și Flag for Chrome, alături de multe altele care nu sunt decât simple marcaje. Nu știu voi, dar eu unul am foarte multe marcaje salvate în Chrome și din păcate nu toate pot fi adăugate din Chrome Web Store ca și extensii ceea ce m-a adus în fața unei întrebări: există oare vreo cale să îmi creez singur astfel de extensii?

Spre bucuria mea și a altora (îndrăznesc să cred) răspunsul la întrebare este DA. În cadrul saitului developer.chrome.com există o secțiune dedicată celor care doresc să contruiască extensii, în care un frumos tutorial numit ”Hello World” îi învață pe cei interesați cum să facă primii pași. Dacă primul pas vi se pare… doar un simplu prim pas, dezvoltatorii de extensii au creat o pagină cu numeroase exemple din care se pot construi extensii de la cele mai simple pănă la cele mai sofisticate. Personal pe mine nu mă interesează să construiesc ceva sofisticat ci doar să construiesc extensii ce au rol de marcaj, scutindu-mă să caut prin lista, imitând astfel interfața oferită de Android.

Studiu de caz: extensia ”Hi5Network”
Pentru a înțelege mai bine natura acestui tutorial o să folosesc ca exemplu extensia creată de mine numită ”Hi5Network”. După puține săpături am descoperit că extensia dorită de mine trebuie să conțină următoarele elemente:
– 3 pictograme cu următoarele dimensiuni 16x16px, 48x48px și 128x128px; acestea purtând denumirea icon16.png, icon48.png și respectiv icon128.png
– ”piesa de rezistență” fișierul manifest.json
Toate aceste elemente au ajuns într-un folder numit sugestiv 1.0.0 (reprezentând versiunea extensiei), care la rândul său a ajuns în cadrul folderului Hi5Network, model observat de mine și la celelalte extensii pe care le-am descărcat din Chrome Web Store.

Așa cum am zis mai sus fișierul manifest.json este piesa de rezistență, iar acesta conține următoarele linii de cod:
{
"app": {
"launch": {
"web_url": "http://www.hi5.com/home.html"
},
"urls": [ "http://www.hi5.com/home.html" ]
},
"description": "Play Free Online Games at Hi5.",
"icons": {
"128": "icon128.png",
"16": "icon16.png",
"48": "icon48.png"
},
"name": "Hi5 Network",
"manifest_version": 2,
"version": "1.0.0"
}

Pasul final al realizării mele era să încarc extensia în cadrul Chrome Web Store dar am ales să fiu român ”de criză”, să nu dau 5 dolari și să vă pun eu la dispoziție extensia creată. După ce ați descărcat extensia, instalarea ei se realizează în funcție de sistemul de operare avut, după cum urmează:
-linux: extrageți conținutul arhivei și mutați folderul Hi5network în locația /home/nume-utilizator/Documents/
-Windows 7: extrageți conținutul arhivei și mutați folderul Hi5network în locația C:/Users/Nume-utilizator/AppData/Local/Google/Chrome/User Data/Default/Extensions/

Pentru activarea extensiei este necesar să deschideți navigatorul Chrome/Chromium (dacă nu era deja), navigați în meniu pănă ajungeți la Settings (Setări), click pe Extensions (Extensii), bifați căsuța Developer Mode (Mod de dezvoltare), apăsați pe Load unpacked extension ( Încărcă extensia neîmpachetată) și apoi navigați în locația unde ați salvat extensia mai precis până în folderul care conține fișierul manifest.json, în cazul meu fiind /home/nume-utilizator/Documents/.

Distracție maximă la construcția de extensii vă doresc !

Leave a Reply

Your email address will not be published. Required fields are marked *