Am vrut întotdeauna să spun oamenilor despre oportunități interesante (tehnologie), care pot fi acum accesibile pentru toată lumea, dar din anumite motive, nu este disponibil pentru toată lumea. Da, s-a transformat o tautologie, dar reflectă pe deplin furia mea interioara pe acest subiect de ardere pentru mine. Orice ar fi fost, nu este acum că, așa cum se spune. Și vom vorbi astăzi despre crearea de extensii pentru browserul Google Chrome (Chrome).
Dacă ați gândit vreodată ideea de a crea extensii pentru Chrome, Firefox, Maxthon și alte browsere, probabil ați observat deja că un minim de efort aveți nevoie pentru a face la fel pentru Chromium. Puteți verifica acest lucru uitandu-te la documentația browserelor respective.
Declarația problemei
Scrierea începe cu descrierea extinde, și stabilirea unor obiective care vor decide. Din moment ce eu sunt propriul meu șef și termenele limită mă pot împiedica ori de câte ori doriți, atunci TK-mi să scrie nu este necesar - suficient pentru a înțelege că:
La prima vedere, totul este simplu și la îndemâna noastră. Cu toate acestea, în conformitate cu articolul vom pune în aplicare doar primele două puncte.
cadru de expansiune
surpriza Naipriyatneyshim pentru mine a fost faptul că la început am fost îndeplinite de caracterul descriptiv al acțiunii. Pur și simplu pune, avem nevoie pentru a descrie cererea noastră de drepturi și oportunitățile sale - pentru aceasta este fișierul manifest.json.
Primul pas este de a umple trei câmpuri obligatorii:
Dacă totul este clar cu numele și versiunea manifest este încă mai ușor, cu atât mai mult detalii aveți nevoie să stați cu versiunea extinsă.
Deci, toți suntem obișnuiți să, că versiunea de orice este format din trei numere separate prin perioade - Mazhornoe.Minornoe.Patch (se referă la un număr). Cu NPM, umbrar și alte delicii ale conversație scurtă: fie că sau nimic. Dar Google oferă următoarele opțiuni:
Cu toate acestea, sunt în favoarea versionare semantic și vă sfătuim să adere la ideea, dar nu insista.
Doar din cauza Chrome nu ajunge - avem nevoie de permisiune. Ei bine, restul lor:
Pentru a lista toate permisiunile pe care le puteți obține un sens eu nu văd de ce trecem pe acest link și mă întreb cât de bine conceput de documentare.
Printre altele, este necesar să se sublinieze că cererea noastră dorește să aibă o pictogramă în partea din dreapta sus:
Dacă o aplicație are o pagină de setări, trebuie să specificați, de asemenea:
Și, în sfârșit, aș spune că puteți specifica pagina de fundal:
Pagina de fundal - această pagină este invizibil, ceea ce este necesar pentru a uni toate filele. Link-uri către resurse pot fi specificate în fișierul manifest, și pagina în sine background.html.
Extinderea de multe ori au nevoie de comune pentru toate script file care asigură interacțiunea lor, păstrează starea. În final, se reunește într-un singur loc toate codul, mai degrabă decât descărcați-l pentru fiecare filă în mod individual.
Pagina de fundal - o pagină invizibilă care conține doar un astfel de scenariu. Acestea se întâmplă două tipuri: persistentă (permanentă) și evenimente (event-driven). Persistente, așa cum s-ar putea ghici, este încărcată continuu și eveniment pagină este încărcat numai atunci când este necesar, atunci când există un eveniment asociat cu acesta.
Asigurați-vă că pentru a citi articolul de Alexander în blogul său.
În acest caz, un fișier manifest este după cum urmează:
Din ceea ce nu a fost considerat anterior
- __MSG_key__ - Chrome este o variație pe internaționalizarea aplicației (i18n). Acesta poate fi folosit atât în fișierul manifest, și alte fișiere (chiar CSS).
- web_accessible_resources - o serie de resurse, moduri care vor fi utilizate ulterior în contextul paginilor web. Fără a preciza în ea modul în care - nu funcționează pentru a utiliza pe site-ul, în cazul în care este de așteptat un astfel de comportament.
extinderea resurselor
Un avantaj imens în Karma Chrome - ne putem conecta acum extinderea, desigur, dacă ați creat toate resursele menționate la manifest.json.
În fișierul commentblocker_on.css. nu este greu de ghicit, opusul este adevărat. Rețineți că, în mod direct CSS am folosi linia cu conținutul cheie de limbă: „__MSG_mode_enable__“. Este timpul pentru a crea un astfel de fișier, în cazul în care sunt stocate cheile.
La baza _locales noastre de extindere a crea un director și subdirectoare în ea și en ru. Mai târziu, în messages.json fișier descrie cheile noastre.
În plus față de câmpul mesajului, există alte domenii, care pot fi găsite în documentația.
Acum, creați fișiere background.html. să înceapă după cum urmează:
Este tot drumul în HTML obișnuit - nimic neobișnuit. Prin Apropo, background.html fișier nu poate crea, deoarece este generat automat pe baza câmpurilor din manifest.json.
extensie a alerga
- Configurarea și administrarea Google Chrome (Hamburger)
- instrumente suplimentare
- expansiune
- Tick „Mod dezvoltator“
- Încărcați extensiile despachetat
- Selectați dosarul cu extensia
Extinderea de descărcare și pentru a afișa meniul. Da, da, e aici este „B“.
Și astfel, fără a scrie o singură linie de cod, avem deja o extensie, sarcinile de bază care îi sunt încredințate.
animă extensie
Amintiți-vă ce am spus despre background.html. Da, da, despre faptul că aceasta nu poate crea. Să schimbăm ușor manifest.json:
La fel cum este imposibil de a împinge JS de pe pagina. Și aceeași problemă există nu numai cu script-uri. Deci, avem nevoie de a utiliza un executeScript special de injectare.
Mai întâi trebuie să adăugați un clic handler eveniment pe pictograma de expansiune:
Cred că cuvintele despre ceea ce această bucată de cod verifică pentru conectarea CSS noastre pe pagina și trage concluzii cu privire la necesitatea ca acesta să se conecteze sau deconectare va fi suficient.
Apropo, nu este disponibil atât de multe evenimente. care acoperă gama de nevoi diferite. De exemplu, există unele evenimente:
Este demn de remarcat faptul că evenimentul onUpdated este numit de două ori:
- Actualizarea paginii;
- Pagina de descărcare completă;
Pe StackOverflow sunt sfătuiți să verifice starea paginii
Poate fi foarte util, este de remarcat versiunea completă a extensiile mele Vk Comentariu Blocker, care este disponibil în Magazinul web Chrome. În plus, accesul la codul sursă complet pe GitHub.
După cum puteți vedea, este foarte simplu pentru a dezvolta extensii pentru Chrome. Puteți avea o cunoaștere destul de slabă în acest domeniu, dar în același timp, de a face ceva diferit. Desigur, acest lucru este doar un fir de praf în ocean a ceea ce se poate face acum în browser-ul, și, probabil, să faceți dacă începe să sape mai adânc decât cele descrise în acest articol.
Și ce despre fără material suplimentar? Crezut că am fost aici așa că te las să pleci?
Răspunsul este foarte simplu:
Articolele mele nu trebuie să vă dau cunoștințe complete și afară, în caz contrar care este punctul pe care ai citit? Nu vrei să afli mai multe, dacă vă dau răspunsuri la toate întrebările dvs. în acest articol. Și dacă te-aș înșela sau dau sfaturi proaste pe care le ia pentru a acordat? Glumeam.
Ponderea pe plata hosting sau cafea.
Cu cât este mai des beau cafea, cu atât mai mult am scrie articolul.