În acest articol, vom merge tot drumul pentru a crea un WebExtension pentru Firefox, de la început până la sfârșit. Acest add-on va adăuga pur și simplu un cadru roșu tuturor paginilor descărcate de pe "mozilla.org" sau subdomenii.
Mai întâi aveți nevoie de Firefox 45 sau o versiune ulterioară.
Scrierea unui WebExtension
Creați un director nou (dosar) și accesați-l:
manifest.json
Acum creați un fișier nou, denumiți-l "manifest.json" în dosarul "borderify". Inserați următorul cod:
- Primele trei chei sunt: manifest_version. numele și versiunea. sunt obligatorii și conțin metadate de bază despre adăugare.
- descrierea este opțională, dar recomandată: această descriere este afișată în Managerul de completare.
- icoanele sunt opționale, dar sunt recomandate: vă permite să specificați o pictogramă pentru add-on care va fi vizibilă în Managerul de completare.
- aplicațiile sunt necesare pentru Firefox. și definește ID-ul de adăugare. De asemenea, poate fi folosit pentru a specifica versiunea minimă și maximă a Firefox acceptată de extensie.
Cea mai interesantă cheie aici este content_scripts. care îi spune Firefox să încarce scriptul pe paginile Web a căror adresă URL corespunde șablonului specificat. În cazul nostru, solicităm ca Firefox să descarce un script cu numele "borderify.js" pe toate paginile HTTP sau HTTPS primite de la "mozilla.org" sau în oricare din subdomeniile sale.
În unele cazuri, trebuie să specificați ID-ul pentru add-on-ul dvs. Dacă trebuie să specificați ID-ul de adăugare, includeți cheia aplicațiilor în manifest.json și setați proprietatea gecko.id:
icoane / border-48.png
Suplimentul trebuie să aibă o pictogramă (pictogramă). Această pictogramă va fi afișată în lista de programe de completare din Managerul de completare. Fișierul manifest.json ne spune că pictograma va fi în fișierul "icons / border-48.png".
Creați o "pictogramă" de director (dosar) în interiorul directorului "borderify". Salvați pictograma în "border-48.png". Puteți folosi pictograma din exemplul nostru. care este preluat din setul de pictograme Design Google Material și este folosit sub licența Creative Commons Attribution-ShareAlike.
Puteți utiliza propria pictogramă. Dimensiunea sa trebuie să fie de 48x48 pixeli. De asemenea, puteți utiliza o pictogramă de 96x96 pixeli pentru a fi afișată pe monitoare de înaltă rezoluție. În acest caz, trebuie să îl specificați ca proprietatea "96" a obiectului "icoane" din fișierul manifest.json:
De asemenea, puteți crea o pictogramă în format SVG și va fi scalată corect.
borderify.js
În cele din urmă, creați un fișier numit "borderify.js" din directorul "borderify" și plasați codul de mai jos:
Acest script va fi încorporat într-o pagină care se potrivește cu șablonul specificat în key_scripts-ul fișierului manifest.json. Acest script are acces direct la întregul document, ca și cum ar fi fost încărcat de către pagina în sine.
Mai întâi, verificați cu atenție dacă ați plasat corect fișierele și le-ați dat numele corecte:
Începând cu Firefox 45, puteți instala temporar WebExtension de pe un disc local.
Deschideți pagina "despre: depanare", faceți clic pe "Încărcați add-on temporar" și selectați fișierul manifest.json:
Acum, programul dvs. de completare este instalat și va rămâne în browser înainte de a fi repornit.
Pentru a verifica, accesați pagina "about: addons" pentru a deschide Managerul de completare. Ar trebui să vedeți add-on-ul cu numele și pictograma:
De asemenea, puteți rula WebExtension din linia de comandă utilizând web-ext.
testarea
Acum mergeți la orice pagină a domeniului "mozilla.org" și va trebui să vedeți marginea roșie în jurul paginii:
Experimentați puțin. Modificați culoarea frontală sau faceți altceva cu conținutul paginii. După ce scriptul modificat este salvat și pagina este reîncărcată, veți vedea imediat modificările:
Rețineți că după modificarea fișierului manifest.json trebuie să reporniți manual add-on-ul. În acest moment, aceasta înseamnă că trebuie să reporniți Firefox, apoi reîncărcați add-on-ul pe pagina "about: debugging". Lucrăm să îmbunătățim acest proces.
Ambalare și publicare
Pentru alte persoane, pentru a utiliza suplimentul, trebuie să-l împachetați. Suplimentele Firefox în forma ambalată sunt fișiere XPI, care sunt arhive ZIP obișnuite cu extensia "xpi".
La ambalare este necesar să se ia în considerare următoarele: în arhiva ZIP ar trebui să existe numai fișiere și să nu conțină directorul lor (directorul "borderify" nu ar trebui să fie arhivat). Pentru a crea fișierul XPI corect din add-on-ul dvs., mergeți la directorul "borderify" din linia de comandă și executați următoarea comandă:
zip -r. /borderify.xpi *
Începând cu Firefox 43, toate suplimentele trebuie să fie semnate înainte de a fi instalate în browser. Puteți elimina această restricție numai în Firefox Developer Edition sau Firefox Nightly, utilizând următorii pași:
- mergeți la aproximativ: config în Firefox
- utilizați caseta de căutare pentru a găsi xpinstall.signatures.required
- Dând dublu clic pe această proprietate sau folosind meniul local (prin clic dreapta pe butonul mouse-ului), selectați "Toggle" pentru a seta valoarea la false.
Ce urmează?
Acum că aveți o idee despre cum să dezvoltați programe de completare pentru Firefox, puteți:
Articole similare
Trimiteți-le prietenilor: