Crearea unei extensii pentru Google Chrome

Proiectul este de fapt un depozit online de cod open-source. Dezvoltarea sa poate fi plasat aici tuturor participanților, iar proiectele de acces sunt disponibile tuturor utilizatorilor oriunde în lume.

Avem o bibliotecă în care o mulțime de mostre de cod interesante în diferite limbaje de programare.

Pentru a lucra cu extensiile de care aveți nevoie pentru a comuta la actualizarea canalului Dev sau beta.

Extensia va avea un buton cu o pictogramă din bara de instrumente Chrome. Prin apăsarea butonului se va deschide fereastra (pop-up), cu o imagine aleatoare din galerie imagini telescopul Hubble. În partea de sus a ferestrei va fi plasat butoane: Configure (afișați pagina de setări), actualizare (arată o altă fotografie), aproape (pentru a închide fereastra pop-up).

Extinderea va conține pagina de setări (opțiuni), unde puteți selecta limba de interfață (română și engleză), și selectați dimensiunea imaginii (mici, mari).

Crearea unei extensii începe cu crearea de dosare în care vom crea toate fișierele necesare pentru extindere. HubblePics dosar Sozadim. Apoi, creați un fișier care va conține o descriere a expansiunii noastre - manifest.json. Acest fișier este necesar pentru fiecare prelungire. Aceasta se datorează faptului că Chrome primește toate informațiile necesare cu privire la extinderea (nume, versiune, rezoluție, pagini de extensie, etc).

O descriere detaliată a manifestul puteți obține aici

Creați o pagină de setări - options.html. Aici este cod complet Nu mă duc la pagina doar interesantă, în punctele mele de vedere, și anume conservarea, setările de preluare și localizare.

Puteți salva setările în obiectul localStorage, care, în esență, este un tablou asociativ care stochează o pereche de „nume“, „valoare“. De exemplu, pentru a salva starea unui buton radio „Dimensiune imagine - mic“, folosit codul:

Pentru a restabili starea:

În proiectul meu am înfășurat apel la localStorage la funcția readProperty pentru a scăpa de inspecții inutile și pentru a obține posibilitatea de valori implicite:

Cu setările sortate, vom proceda pentru a localiza. Metoda, pe care nu am putea fi cel mai bun, dar la moment mai bun nimic nu am putut gândi. Dacă cineva spune o alta, mai simplă opțiune - Mă bucur.

Ideea este simplă - există o serie de elemente care trebuie să fie traduse. Ei au ID-uri. Se creează un tablou asociativ sau obiect în care identificatorul elementului corespunde textului localizat. Funcția, care este angajată în localizarea „ruleaza“ pe matrice de ID-ul este controlul și stabilește textul său.

Creați un fișier cu numele elementelor și o indicație a limbii. limbă „înregistrată“, prin adăugarea unui element din lista verticală „Language“. De exemplu, limba română adaugă la elementul lista cu textul «rusă» și «valoare ru_ru».

Acest script se adaugă la pagina de setări (options.html)

Pe pagina, toate elementele localizate trebuie să aibă identificatorii adecvate, de exemplu:

Sediu funcție este angajată Localizeaza

Acum, dacă avem nevoie pentru a adăuga o nouă limbă, cum ar fi limba engleză, vom crea un director de \ locale \ en_us, ea a crea un script options.js

Și adăugați script-ul la pagina

În interiorul fișierului popup.html de marcare simplu, care oferă spațiu pentru imagini încărcate, butoane de control și indicator al procesului de boot.

În general, nimic interesant. Toate interesați prestate în fișierul popup.js.

Acest script utilizează XMLHttpRequest pagina de descărcări hubblesite.org/gallery/wallpaper/, găsi link-uri către imagini, selectează aleatoriu și afișează pop-up-e.

Instalarea și ambalarea extensie

Extinderea creat, acum trebuie să-l încărcați în Chrome. Rulați Chrome, faceți clic pe butonul Setări și control. selectați meniul Extensii.

În fila următoare, apăsați extensia de încărcare. specificați calea către directorul și, dacă este făcută corect, vom vedea un nou buton de pe bara de instrumente.

Și în lista de extensii vedem expansiunea noastră.

Acum, pachetul nostru de expansiune, astfel încât să poată fi pus pe orice resursă și orice utilizator poate descărca și instala în câteva clicuri. Pentru a face acest lucru, pe aceeași filă extensii instalate, faceți clic pe butonul pachet pentru extensie. specificați calea către directorul care conține fișierele de extensie, domeniu privat fișier cheie pentru prima dată, lăsați necompletat.

Faceți clic pe OK, vom vedea un mesaj care indică faptul că extensia este ambalat.

Dacă vom lansa versiuni actualizate ale extensiei - Salvați fișierul cu un HubblePics.pem cheie și va indica modul în care să-l la fiecare pachet de extindere ulterioară, sau de fiecare dată când un nou fișier va fi generat, ceea ce va duce la numirea unei noi identități pentru extinderea noastră, și acest lucru, la rândul său, va conduce la faptul că, în loc de actualizare, utilizatorul va instala o nouă copie a extensiei.

Practic, toate informațiile necesare pentru a dezvolta extensii axate pe Google Chrome Extensii pagina: Dezvoltator Documentația. În cazul în care acest lucru va parea un pic, puteți lua întotdeauna o extensie gata, schimbați extensia de la CRX la zip, unzip și a vedea cum se face „ei.“

Aceeași sursă de informații, ca să spunem așa, prima parte, ar putea fi o listă a modificărilor în noile versiuni ale Google Chrome.