Chrome este cu ușurință cel mai popular browser web de pe planetă. Conform sondajului privind cota de piață a browserului Statcounter, Chrome ia acasă un furios 65% din piață în browserele desktop de la sfârșitul anului 2017.
Cu acest tip de putere de definire a pieței, proiectarea pentru Chrome a devenit o prioritate. Același lucru este valabil și pentru extensii: Chrome oferă de departe cea mai mare bază de utilizatori pentru extensii, cu zeci de mii de extensii, teme și aplicații care populează Magazinul web Chrome.
Dacă doriți să profitați de această tendință, vă puteți construi propria extensie Chrome de bază. Veți avea nevoie doar de câteva abilități de bază de dezvoltare web (HTML, CSS și Javascript), precum și de o linguriță de JSON pentru a le lega pe toate.
Vom examina cea mai simplă structură necesară pentru a construi o extensie Chrome de bază în această postare. Pentru a vizualiza în detaliu posibilitățile disponibile, consultați Ghidul de extensii pentru dezvoltatori Chrome.
Scrierea unei extensii Chrome de bază: Manifest Destiny
Pentru acest tutorial vom construi o extensie Chrome de bază care afișează un mesaj popup simplu atunci când faceți clic. Vom avea nevoie de câteva fișiere importante: o pictogramă („icon.png”), un fișier HTML („popup.html”) și manifestul foarte important („manifest.json”). Toate aceste fișiere vor fi afișate în interiorul unui director cu numele extensiei dvs. În acest caz, se numește „Hello World”.
O extensie Chrome este definită de manifestul său. Acest fragment de JSON arată Chrome cum să interpreteze extensia, ce fișiere să se încarce și cum să interacționeze cu utilizatorul.
Fișierul manifest pentru extensia noastră de bază arată astfel:
{ "manifest_version": 2, "name": "Hello World!", "description": "My first Chrome extension.", "browser_action": { "default_icon": "icon.png", "default_popup": "popup.html" }, "permissions": [ "activeTab" ] }
Acest fișier manifest va pune o pictogramă în bara de instrumente a utilizatorului care, atunci când faceți clic, încarcă conținutul fișierului numit „popup.html”. Următorul este conținutul de pe restul conținutului:
-
manifest_versionîi spune Chrome cu ce versiune a marcajului manifest lucrați. Pentru extensiile moderne, va trebui să setați acest lucru la2. -
nameafișează numele pe care extensia îl va afișa în magazinul Chrome și „chrome: // extensions”. -
descriptionafișează textul descriptiv afișat pe „extensiile chrome: //”. -
browser actionîncarcă pictograma în bara de instrumente. De asemenea, permite extensiei să răspundă la introducerea utilizatorului prin afișarea unui sfat de instrumente, a unui popup sau a unei insigne. Check out a lista completă a tot ceea ce „browser_action” poate face. -
default_iconarată calea către pictogramă din directorul extensiei. -
default_popuparată calea către fișierul care se va încărca când se face clic pe pictograma extensiei. -
permissionslimitează regiunea funcțională a extensiei.activeTabeste cea mai comună, permițând extensiei să acceseze fila din partea frontală. Google oferă o listă de toate permisiunile pe care le poate solicita o extensie.
Dacă doriți o scufundare profundă în tot ceea ce poate declara manifestul unei extensii Chrome, verificați Documentele Google despre manifestări de extensie.
Scrierea unei extensii Chrome de bază: ferestre pop-up
Acum că am scris manifestul nostru, ne putem da seama ce va afișa extensia noastră. Asta depinde de fișierul nostru „popup.html”, care se va afișa când se încarcă extensia. Iată ce vom folosi pentru acest proiect:
<!doctype html> <html> <head> <title>Hello World</title> </head> <style type="text/css"> body { margin: 5px; } h1 { font-size: 15px; text-align: center; } </style> <body> <h1>Hello World!</h1> </body> </html>
După cum puteți vedea, acest lucru va reda un anumit text cu CSS. Dacă doriți să adăugați Javascript sau CSS extern la extensia dvs., aceasta necesită declararea scripturilor în manifest, sub content_scripts cheie. Odată ce ați făcut referire în manifest, puteți încărca aceste scripturi așa cum ați face în mod normal.
Scrierea unei extensii Chrome de bază: încărcare în Chrome
După ce am scris codul de bază pentru extensia noastră și am găsit o pictogramă potrivită, o putem încărca în Chrome.
1. Navigați la „chrome: // extensions” și activați „Developer Mode” bifând caseta de selectare din partea dreaptă sus.
2. Faceți clic pe butonul „Încărcați extensia neambalată…” și selectați directorul extensiei.
3. Odată ce extensia este încărcată, veți vedea pictograma acesteia în bara de meniu.
4. Faceți clic pe extensie pentru a vedea efectul său (foarte simplu).
Concluzie: extinderea extensiei Chrome
După ce ați terminat cu extensia și sunteți gata de publicare, va trebui să creați un cont de dezvoltator Chrome. Acesta nu este un proces exact simplu, dar Google oferă completați instrucțiunile pentru publicarea extensiei Chrome aici.
În mod evident, puteți face mult mai multe cu extensia dvs. Chrome, dar acest lucru depășește oarecum scopul acestei postări. Dacă doriți să aflați mai multe despre tot ce poate face extensiile Chrome, consultați Google Ghid de extensii pentru dezvoltatori Chrome.
