Continuăm seria articolelor noastre "Școala", dedicată creării de extensii și aplicații pentru browserul Google Chrome. Și astăzi vom încerca să creăm cea mai simplă extensie "Buna ziua!" cu un singur API Chrome - acțiuni de browser. Apropo, este foarte plăcut ca dezvoltatorul Vadim să se alăture ciclului nostru de articole. care a schițat un exemplu de prelungire pentru această lecție și Lecția # 4 complet pregătită.
Și acum continuăm să creăm extensia. Creați un dosar special pentru noul proiect. Să spunem așa ceva. Toate fișierele noastre vor fi create și vor fi în el.
Cum începem să creăm o extensie și care este fundamentul oricărui add-on pentru Google Chrome? Acest lucru este manifest.json. Pur și simplu creați un fișier text și redenumiți-l la manifestul (de altfel, suntem cu toții oameni cumsecade și nu folosesc ascund extensiile pentru tipurile de fișiere cunoscute, sau poate fi fișier manifest.json.txt care pare o prostie și nu va funcționa în viitor). Deschidem manifestul creat și îi scriem.
Aceasta este partea de bază recomandată în fiecare manifest.json. Ce am scris? Mai întâi de toate, am specificat numele extensiei noastre. Acesta va fi folosit acum peste tot: în director, în lista extensiilor de browser etc. Descrierea extensiei (descriere) nu este necesară, dar este de dorit! Este folosit atât în director cât și în browser și, în general, îi ajută pe utilizatori să formeze prima vedere a ceea ce face dezvoltarea dvs. Numărul versiunii curente a extensiei dvs. (versiune). Fără ea, nicăieri. Efectuați o actualizare - modificați numărul versiunii la o versiune mai mare. Cum de a schimba numerele este de până la tine: 2.0 sau 1.1 sau 1.0.0.1. După cum vă place. Indicați și setul de pictograme care vor fi utilizate. Se recomandă utilizarea dimensiunilor 128, 48 și 16. Așa cum este prezentat la noi.
Am specificat icoanele din manifest? Deci, acum trebuie să le punem în dosarul extinderii noastre. Și să o numim așa cum am descris-o. Apropo, se recomandă din nou să utilizați tipul de PNG din documentație, deși alte suporturi sunt acceptate. Imaginile din lecția noastră aleg ceea ce doriți. Ele vor reprezenta dezvoltarea ta.
Am descris baza. Dar dorim ca extinderea noastră să creeze un buton pe bara de instrumente. dând clic pe care a deschis fereastra. Ie Trebuie să descriem blocul Acțiuni pentru browser în manifestul nostru. Îl adăugăm și îl obținem.
Aici am indicat ce vrem să creăm. Și anume buton cu default_title din titlu, cu o pictogramă default_icon, făcând clic pe care se va deschide o fereastră popup.html. Am folosit o pictogramă de dimensiunea 48, deși bara de instrumente se poate potrivi doar până la 19 pixeli. Dar e în regulă. Se va scala singur.
Am descris complet manifestul nostru. Și acum trebuie să creăm actualul popup.html, la care ne referim. Noi îl creăm, precum și manifest.json. Popup.html în sine este cel mai comun document HTML. Sper că aveți deja o înțelegere de bază despre HTML. Prin urmare, în documentul creat adăugăm următoarele.
Pur și simplu, pagina noastră va include o imagine și expresia "Bună ziua, lumea!".
Extensia este gata! Și acum să-l testăm. În secțiunea chrome: // extensions / page, accesați modul dezvoltator și faceți clic pe butonul "Descărcare extensie despachetată". Specificăm dosarul nostru acolo și asta este! Extensia este instalată și funcționează. Găsiți pictograma de pe bara de instrumente și faceți clic pe ea. Vedeți pagina? Excelent =)
Un eșantion din ceea ce ar fi trebuit obținut poate fi descărcat.
Documentația detaliată este disponibilă aici.
Vă mulțumesc pentru atenție. Întrebări?
Trimiteți-le prietenilor: