Crearea unei extensii pentru Google Chrome

Crearea unei extensii pentru Google Chrome

După ce ați citit articolul, puteți face următoarele:

1) Creați o extensie simplă.
2) Lucrul cu meniul contextual al browserului.






3) Lucrul cu stocarea locală.

preistorie


Recent am avut nevoie să scriu un proiect. Am avut de ales între un program pe VB sau o dezvoltare web și am ales extensia pentru Google Chrome. Pentru cei care nu știu:

Extensiile sunt funcții suplimentare pe care le puteți conecta cu ușurință la Google Chrome. Extensiile vă permit să adăugați numai funcțiile necesare în Google Chrome, evitându-le pe cele pe care nu le aveți nevoie.

Principalul avantaj al extensiilor este că acestea sunt executate direct în browser și simplifică utilizarea acestora. De asemenea, am vrut să înțeleg extensiile, deoarece nu există nicio documentație în limba rusă și nu există multe articole utile pe Internet. În acest articol voi atinge una din posibilitățile extensiei mele - galeria de imagini. Să presupunem că am găsit o imagine interesantă și l-am salvat, dar a fost pierdut într-un număr infinit de dosare. Este chiar mai ușor să obțineți toate imaginile salvate cu un singur clic și să nu căutați foldere.

Extensia noastră va funcționa astfel:

1) Dacă faceți clic pe imagine, veți accesa un meniu de comenzi rapide cu funcția "Adăugați la galerie".

3) Puteți șterge imagini inutile din galerie.

În forma finală, fereastra galeriei va arăta astfel:

Crearea unei extensii pentru Google Chrome

Structura de extindere

Notă: manifest.json este un document de text simplu, preferabil în UTF-8.

În primul rând, trebuie să vă spun despre arhitectura extensiei, care o împarte în mod condiționat în două părți: ce funcționează în contextul paginii pe care o vizualizați și ce funcționează în contextul browserului. Comunicarea dintre ele are loc prin mesaje. Privind în perspectivă, voi spune că vom folosi pagina de fundal pentru a adăuga imagini ale funcției noastre în meniul contextual.
am subliniat în manifest.json: rezoluție numele, pictograma, versiune a extensiei, precum și alte informații necesare. pentru citate ar trebui să fie monitorizat îndeaproape în acest fișier, pentru că dacă ați sărit peste cel puțin un caracter, nu va fi stabilită extensia.

Stocarea locală este o bază de date care se află pe partea clientului și în care sunt stocate perechi cheie-valoare. Datele acestei baze de date sunt stocate pe computer în browser. Fiecare browser are propriul spațiu de stocare local pe computer.

Întregul fișier manifest.json pe care l-am primit:


Notă: Parametrii de mai sus sunt de bază. Există și alți parametri, dar ei nu au nevoie să ne înclinăm. Icoanele trebuie să aibă dimensiunile de 16 * 16 și 48 * 48.

Instalarea extensiei


Pentru a instala extensia deschizând fișierul, trebuie să împachetați extensia, despre care voi vorbi la sfârșitul articolului. după aceea, nu puteți adăuga sau modifica nimic în extensie. Toate fișierele extensiei noastre vor fi în același folder. Prin urmare, instalarea va fi puțin mai mare decât deschiderea fișierului:

1) Faceți clic pe "Configurați și gestionați Google Chrome" (cheie).






2) Din apariția selectați "Opțiuni".
3) Selectați meniul "Extensii".
4) Faceți clic pe caseta de selectare "Modul dezvoltator", apoi pe "Descărcați extensia despachetată".
5) Selectați folderul cu extensia și faceți clic pe OK.

Dacă apare o eroare, probabil că ați făcut o greșeală în fișierul manifest.json și linia de eroare ar trebui să conțină o linie în fișierul care conține eroarea. Mai departe, în articol vom adăuga fișiere noi și vom adăuga un cod la ele. Extensia ar trebui actualizată automat, dacă nu se întâmplă acest lucru, accesați browserul.

Corpul galeriei


Pentru a nu scrie galeria în sine, puteți descărca o versiune gata, beneficiul unei frumoase galerii jQuery poate fi găsit cu ajutorul Google. Am descarcat versiunea gata de la smoothgallery.jondesign.net. Aceasta este o galerie gratuită care utilizează jQuery și o putem adăuga și modifica. Putem lucra cu ea calm. După descărcare, l-am despachetat și am șters toate fișierele și imaginile cu ele, cu excepția demo.html. Acum puteți să mutați fișierele în folderul cu extensia noastră.


Ar trebui să arate astfel:

Crearea unei extensii pentru Google Chrome

Structura de extindere


Când faceți clic, funcția addImage va fi executată, în care va fi salvată adresa URL a imaginii. Vom crea depozite locale chimggali0, chimggali1. chimggali2 etc.

De asemenea, vom primi și stoca data când utilizatorul a salvat imaginea. Depozitele locale pentru datele: chdate0, chdate1, chdate2, etc. Facem o stocare locală pentru variabila i, care este responsabilă pentru numerotarea imaginilor. Dacă magazinul local nu există, atunci i = 0, altfel atribuim o valoare din depozit. După executarea funcției, i este incrementată cu 1 și stocată în seif.

Codul funcției în sine:


Pentru a obține valoarea "celulei", am folosit funcția readProperty pentru comoditate. Voi folosi această funcție în continuare.

Codul funcției idelete


Notă: echipa 1 - numărul de imagini.

Adăugăm codul în funcția de încărcare la numărul de miniaturi. Organizați ciclul adăugând o cruce mică în colț pentru a șterge fiecare imagine miniaturală. Adăugați un eveniment: când faceți clic pe o cruce mică, executați funcția idelete cu argumentul - numărul de ordine al miniaturii.

Există două moduri în această parte. Deoarece trebuie doar să deschidem galeria, nu putem folosi fereastra pop-up și făcând clic pe pictograma, deschidem imediat galeria. În caz contrar, va apărea o fereastră cu butonul "Galerie".

Pentru claritate, vă voi da un instantaneu al ferestrei pop-up rezultată:

Crearea unei extensii pentru Google Chrome

Prima opțiune (fără a utiliza pop-ul)

Dacă utilizați această opțiune, trebuie să eliminați linia "popup" din fișierul manifest.json: "popup.html".

Scrierea în background.html


Notă: chrome.browserAction.onClicked exclude utilizarea de pop-up și vice-versa.

Cu acest cod, când dăm clic pe pictogramă, deschidem o nouă filă cu galeria.

A doua opțiune (cu pop-up)

În fișierul popup.html, creăm un buton și dând clic pe buton când este făcut clic. Pentru a crea butoane frumoase cu CSS, puteți utiliza aceste site-uri (îmi place primul dintre acestea):

În funcția de clic, să creăm o filă nouă cu galeria (la fel ca în exemplul superior):

Extensie de ambalare


1) Faceți clic pe "Configurați și gestionați Google Chrome" (cheie).
2) Din apariția selectați "Opțiuni".
3) Selectați meniul "Extensii".
4) Faceți clic pe caseta de selectare "Modul dezvoltator", apoi pe "Ambalaj de expansiune".
5) În câmpul "Director rădăcină extensie", selectați folderul cu extensia. Al doilea câmp este lăsat gol.
6) Fereastra pop-up arată locația extensiei comprimate și fișierul cheie. Fișierul cheie va fi necesar pentru a instala actualizările pentru extensie, nu pentru copiile sale. Atunci când ambalați o nouă versiune a extensiei, pur și simplu specificați fișierul cheie din cel de-al doilea câmp la ambalare.

Notă: Deși extensia comprimată are extensia crx, este o arhivă zip regulată a dosarului specificat, cu adăugarea unui identificator unic.

Extensia noastră poate fi distribuită!


Vă mulțumesc pentru atenție! Scrierea unei extensii este, de fapt, o activitate foarte interesantă. În următorul articol, voi atinge subiectele: API-ul Chrome, XMLHttpRequest și expresiile regulate.

P.P.S. Discutați în acest thread.







Articole similare

Trimiteți-le prietenilor: