Noțiuni de bază
Manifest V3 se lansează în curând! Consultați documentația MV3 pentru mai multe informații și luați în considerare dezvoltarea extensiei dvs. în MV3.extensiile sunt realizate din componente diferite, dar coezive. Componentele pot include scripturi de fundal, scripturi de conținut, o pagină de opțiuni, elemente UI și diverse fișiere logice. Componentele extensiei sunt create cu tehnologii de dezvoltare web: HTML, CSS și JavaScript. Componentele unei extensii vor depinde de funcționalitatea acesteia și nu pot necesita fiecare opțiune.,acest tutorial va construi o extensie care permite utilizatorului să schimbe culoarea de fundal a oricărei pagini pe developer.chrome.com. va folosi multe componente de bază pentru a oferi o demonstrație introductivă a relațiilor lor.
pentru a începe, creați un nou director pentru a ține extensia”s files.extensia completă poate fi descărcată aici.
creați manifestul #
extensiile încep cu manifestul lor. Creați un fișier numit manifest.json și includeți următorul cod sau descărcați fișierul aici.,
directorul care deține fișierul manifest poate fi adăugat ca extensie în modul dezvoltator în starea sa actuală.
- Deschideți Pagina de gestionare a extensiilor navigând la
chrome://extensions.- pagina de gestionare a extensiilor poate fi deschisă și făcând clic pe meniul Chrome, trecând peste mai multe instrumente, apoi selectând extensii.
- activați Modul dezvoltator făcând clic pe comutatorul de comutare de lângă modul dezvoltator.
- Faceți clic pe butonul LOAD UNPACKED și selectați directorul de extensii.
Ta-da!, Extensia a fost instalată cu succes. Deoarece nu au fost incluse pictograme în manifest, va fi creată o pictogramă generică a barei de instrumente pentru extensie.
Add instruction #
deși extensia a fost instalată, nu are nicio instrucțiune. Introduceți un script de fundal creând un fișier intitulat background.js sau descărcându-l aici și plasându-l în directorul de extensii.scripturile de fundal și multe alte componente importante trebuie înregistrate în manifest., Înregistrarea unui script de fundal în manifest spune extensia Care fișier de referință, și modul în care ar trebui să se comporte acel fișier.extensia este acum conștientă de faptul că include un script de fundal non-persistent și va scana fișierul înregistrat pentru evenimente importante pe care trebuie să le asculte.această extensie va avea nevoie de informații de la o variabilă persistentă imediat ce este instalată. Începeți prin a include un eveniment de ascultare pentru runtime.onInstalled în scriptul de fundal. În interiorul ascultătorului onInstalled, extensia va seta o valoare folosind API-ul de stocare., Acest lucru va permite mai multor componente de extensie să acceseze acea valoare și să o actualizeze.
majoritatea API-urilor, inclusiv API-ul de stocare, trebuie înregistrate sub câmpul "permissions" din manifest pentru ca extensia să le folosească.
navigați înapoi la pagina de gestionare a extensiilor și faceți clic pe linkul reîncărcare. Un nou câmp, inspecta vizualizări, devine disponibil cu un link albastru, pagina de fundal.,
faceți Clic pe link pentru a vizualiza fundal script”s consola de jurnal, „The color is green.„
Introduce o interfață de utilizator #
Extensii poate avea mai multe forme de o interfață de utilizator, dar acesta va folosi un pop-up. Creați și adăugați un fișier intitulat popup.html în director sau descărcați-l aici. Această extensie utilizează un buton pentru a schimba culoarea de fundal.la fel ca scriptul de fundal, acest fișier trebuie să fie desemnat ca un pop-up în manifest sub page_action.,
desemnarea pentru pictogramele barei de instrumente este, de asemenea, inclusă sub page_action în câmpul default_icons. Descărcați folderul Imagini aici, dezarhivați-l și plasați-l în directorul extensiei. Actualizați manifestul astfel încât extensia să știe cum să folosească imaginile.
extensiile afișează, de asemenea, imagini pe pagina de gestionare a extensiilor, avertismentul privind permisiunile și favicon. Aceste imagini sunt desemnate în manifest sub icons.,
dacă extensia este reîncărcată în această etapă, aceasta va include o pictogramă la scară gri, dar nu va conține diferențe de funcționalitate. Pentru că page_action este declarată în manifest, este de până la extensia pentru a spune browser-ului atunci când utilizatorul poate interacționa cu popup.html.
Adăugare a declarat regulile de fundal script cu declarativeContent API în runtime.onInstalled ascultător eveniment.
extensia va avea nevoie de permisiunea de a accesa API-ul declarativeContent din manifestul său.,
browser-ul va afișa acum un full-color pagina de acțiune pictograma din bara de instrumente a browserului atunci când utilizatorii navighează de la un URL care conține "developer.chrome.com". Când pictograma este full-color, utilizatorii pot face clic pe ea pentru a vizualiza pop-up.html.ultimul pas pentru interfața pop-up este adăugarea de culoare la buton. Creați și adăugați un fișier numit https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js cu următorul cod în directorul de extensii sau descărcat aici.
acest cod apucă butonul de la popup.html și solicită valoarea culorii din stocare., Apoi se aplică culoarea ca fundal al butonului. Include un script tag https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js în popup.html.
Reîncărcați extensia pentru a vizualiza butonul verde.
Layer logic #
extensia știe acum că pop-up-ul ar trebui să fie disponibil pentru utilizatorii de pe developer.chrome.com și afișează un buton colorat, dar are nevoie de logică pentru interacțiunea ulterioară a utilizatorului. Actualizați https://developer.chrome.com/docs/extensions/mv2/getstarted/popup.js pentru a include următorul cod.,codul actualizat adaugă un eveniment onclick pe buton, care declanșează un script de conținut injectat programatic. Aceasta transformă culoarea de fundal a paginii aceeași culoare ca și butonul. Utilizarea programmatic injection permite scripturi de conținut invocate de utilizator, în loc de introducerea automată a codului nedorit în paginile web.
manifestul va trebui activeTab permisiune pentru a permite extinderea acces temporar la tabs API. Aceasta permite extensiei să apeleze tabs.executeScript.,
extensia este acum complet funcțională! Reîncărcați extensia, reîmprospătați această pagină, deschideți fereastra pop-up și faceți clic pe buton pentru a o transforma în verde! Cu toate acestea, unii utilizatori pot dori să schimbe fundalul într-o culoare diferită.
oferă utilizatorilor opțiuni #
extensia în prezent permite utilizatorilor să schimbe doar fundalul în verde. Includerea unei pagini de opțiuni oferă utilizatorilor mai mult control asupra funcționalității extensiei, personalizând în continuare experiența lor de navigare.,
începeți prin crearea unui fișier în directorul numitoptions.html și includeți următorul cod sau descărcați-l aici.
apoi înregistrați pagina opțiuni în manifest,
Reîncărcați extensia și faceți clic pe detalii.
Derulați în jos pagina de detalii și selectați Opțiuni de extensie pentru a vizualiza pagina de opțiuni, deși în prezent va apărea necompletată.
ultimul pas este să adăugați logica opțiunilor., Creați un fișier numit options.js în directorul de extensii cu următorul cod sau descărcați-l aici.
Patru opțiuni de culoare sunt furnizate apoi generate ca butoane pe pagina de opțiuni cu ascultătorii de evenimente onclick. Când utilizatorul face clic pe un buton, actualizează valoarea culorii din extensia „stocare globală”. Deoarece toate fișierele extensiei trag informațiile despre culoare din stocarea globală, nu trebuie actualizate alte valori.
Felicitări! Directorul deține acum o extensie Chrome complet funcțională, deși simplistă.
ce urmează?,prezentarea generală a extensiei Chrome face o copie de rezervă și completează o mulțime de detalii despre arhitectura extensiilor în general, iar unele concepte specifice pe care dezvoltatorii vor dori să le cunoască.