web browser extension development
DESCRIPTION
Web Browser Extension DevelopmentTRANSCRIPT
Web Browser Extension Development
Acatrinei Tiberiu-Andrei
Sumanaru CristianAn 3, Grupa 1A
O extensie este un mic programel,
o mica “arhiva” ce contine fisiere – HTML, CSS,
JavaScript, imagini care adauga noi functionalitati
browser-ului.
Extensiile pot adauga noi motoare de cautare,
dictionare in limbi straine, toolbar-uri sau pot
modifica infatisarea browser-ului
Ce este o extensie?
Exista diferente intre extensii si plugin-uri?
• Un plugin poate adauga suport pentru media intr-un browser. O extensie poate aduga mai multe caracteristici browser-ului.
• Atat extensiile cat si plug-in-urile maresc capacitatile browser-ului. Plugin-urile ajuta browser-ul sa afiseze continut media pe care acesta nu le arata in mod nativ. Extensiile personalieaza browser-ul in sine si pot interactiona cu un anumit continut HTML.
Diferente intre extensii si plugin-uri
• Un plug-in este o fila binara – o aplicatie in sine, pe care browser-ul o foloseste pentru a reda un anumit continut media.
• O extensie este o colectie de file HTML, JavaScript si CSS pe care browser-ul le foloseste pentru a-si extinde setul sau de caracteristici.
Extensii Mozilla Firefox
Modificarea interfeteiUnele extensii sunt folosite pentru a schimba interfata
aplicatiei. De remarcat faptul ca acestea nu trebuie confundate cu “personas”, care reprezinta o caracteristica de management – tema.
Clasificarea extensiilor
Adaugarea de noi trasaturiExtensiile sunt in general folosite pentru a
adauga noi functii aplicatiei. Exemple de noi functii sunt cititoarele RSS, organizatoare de bookmark, toolbar-uri, programe website specifice client, FTP, e-mail, instrumente pentru dezvoltatori.
Modificarea modului in care userul vede o pagina webMulte extensii pot schimba modul in care
continul unei pagini web este interpretata. De exmplu, extensia Adblock poate impiedica browser-ul de a incarca anumite imagini care defapt sunt reclame.
Extensiile sunt ambalate si distribuite in fisiere ZIP sau Bundles, cu extensia XPI (pronunţat “zippy”). Cu alte cuvinte, o extensie de Firefox este o colectie de fisiere si foldere care au fost comprimate intr-un fisier cu extensia XPI. Acesta nu este nimic mai mult decat un fişier Zip care a fost redenumit.
Construirea unei extensii
Configurarea mediuluiu de dezolvtare
Un exemplu de continut intr-un fisier tipic XPI:
O instalare Manifest este o fila folositapentru a furniza informatii despre un addon Firefox (extensie, plugin, componenta), in timp ce este instalat. Fisierul contine metadate ce identifică addon-ul, furnizarea de informatii despre cine a creat-o, ce aplicatii şi versiuni sunt compatibile precum si alte informatii.
Pentru a crea instalarea Manifest, se poate folosi un fisier .rdf.
Instalarea manifest
Exmplu de un fisier .rdf:
Inainte de a vorbi despre fila Manifest Chrome, trebuie mentionat ce inseamna “Chrome” in contextul Mozilla Firefox. Chrome este termenul folosit pentru a desemna Pachete de Interfata (Interface Packages) create pentru Firefox.
Browser-ul Firefox contine o componenta numita Managerul de Chrome, care se ocupa de instalarea diverselor parti de Firefox. Toate aplicatiile , de la browser-ul global la extensii se inregistreaza cu acestmanager.
Chrome foloseste URI-uri. Pentru a nu exista confuzii, prefixul “chrome” este folosit in loc de “http”. De exmplu un pachet numit “browser” are ca referinta“chrome://browser”.
Chrome
Avem in vedere fila chrome.manifest. De exemplu, vom adauga o linie ce ofera Firefox-ului informatia de a gasi si a executa extensia:
content sample chrome/chromeFiles/content/
Aceasta linie spune ca pentru pachetul chrome numit “sample”, Firefox poate gasi continutul respectiv in locatia chrome/chromeFiles/content ce reprezinta o cale relativa pentru locatia chrome.manifest.
Este recomandat un nume unic in loc de “sample” in cazul in care utilizatorul doreste realizarea unei noi extensii.
Chrome Manifest
Intefrata utilizator din Firefox este scrisa in XUL si in JavaScript. XML aduce in special interfetei grafice widget-uri, butoane, meniuri, toolbar-uri. Actiunile userului detin functionalitate cu ajutorul la JavaScrip
Extinderea Browser-ului folosind XUL
Creeare de componente pentru Interfata Utilizator
Utilizatorul are posibilitatea de a creea fereste si dialog box-uri ca si file .xul separate. Functionalitatea este implementanta folosind actiunile utilizator in file .js, si folosind metodele DOM pentru a manipula widget-uri. Se pot folosi anumite reguli de stil in filele .css pentru a atasa imagini, schimba culori, etc.
Extensii Safari
Se pot creea extensii folosind ExtensionBuilder, care este realizat in Safari 5.0 si in versinuleurmatoare.
Se pot defini anumite setari utilizator in Extension Builder. Astfel, extensia respectiva va avea propriile ei setari. Se pot defini setarile, itemii interfetei utilizatori precum si valorile default in Extension Builder.
Se poate realiza DEBUG pentru extensia
respectiva folosind Safari’s Built-In Tools. Se pot
utiliza astfel instrumentele de dezoltare Safari
pentru a raporta erorile HTML si JavaScript,
afisarea mesajelor la consola. Ofera de asemeni
interactivitate utilizatorului, acesta avand
posibilitatea sa obtina valori de variabile, sa
apeleze functii, sa foloseasca break-point-uri.
Fiecare bara de extensie si pagina globala detin
consola lor proprie.
Extensiile pot realiza UPDATE automat pe Web. Safari ofera o modalitatea ce suporta verificarea de update-uri pentru extensia respectiva in mod automat: Update Manifest. Pur si simplu se specifica o adresa web, si Safari compara periodic varianta instalata a extensiei cu ultima varianta de pe website-ul respectiv. Daca pagina web detine o varianta mai noua, atunci Safari ofera useru-ului un update.
Construirea unei extensii
Primul lucru pe care este nevoit sa-l realizeze utilizatorul
este de a se inregestra ca un Safari Developer pe
apple.com. Aceasta il va ajuta sa isi realizrz un certificat
care este necesar pentru a folosi Extension Builder.
Pasul 0 - Inregistrare
Extension Builder reprezinta tool-ul principar pentru realizarea de extensii.
Extension Builder este realizat dintr-o bara plasata in partea din stanga ce afiseaza extensiile la care se lucreaza, precum si un panel in partea dreapta ce ajuta la inspectarea extensiei, pentru a-i edita proprietatile si setarile, pentru a o instala etc.
Pasul 1 – Extension Builder
Pentru a crea o extensie se da click pe inconita “+” din partea stanga-jos si se selecteaza “New extension”. Se alege un nume extensiei si se salveaza. Astfel se va crea cu folder cu numele .”safariextension”.
Acest folder contine toate filele si resurselenecesare extensiei respective. Aici vom introduce script-uri HTML, CSS, imagini pentru a finaliza extensia. Default, folder-ul va contine o fila numita “Info.plist” unde sunt stocate informatii despre extensie, in format XML
Pasul 2 – Setarile extensiei
Multe setari sunt usor de inteles, precum Name, Author si Description. Se pot aduga extensii de bare (“Bars”), iteme de meniu context precum si butoane toolbar.
• Label – reprezinta numele butonul.• Image – reprezinta iconita butonului. Este
recomandat ca aceasta sa fie 16×16 pixels.• Identifier – poate fi folosit pentru a identifica
butonul dintr-un script.• Command – este numele comenzii ce va fi
trimisa in momentul in care se apasa butonul.
Pentru a controla, de exmplu un buton, estenecesar un script, si pentru aceasta este necesar o fila HTML pentru a incarca script-ul. Acea fila reprezinta pagina globala HTML.
Pagina globala este un loc unde se pun scripturi, date si resurse care nu necesita o interfata user. Este o pagina HTML simpla care nu este afisata. Pagina globala este incarcata o data pe o sesiune Safari.
Pasul 3 – Crearea paginii globale
Pentru a finisa lucrurile, se poate aduga o iconita
extensiei. Pentru a realiza acest lucru sunt
necesare trei imagini in format .png in folderul
extensiei: Icon-32.png, Icon-48.png, Icon-64.png.
Fiecare fila trebuie sa detina size-ul
corespunzator. De exmplu Icon-32.png trebuie sa
aiba dimensiunea 32×32 pixels.
Pasul 4 – Adaugarea iconitei
Extensia este aproape finalizata. Pentru a exporta
se da click pe butonul “Build Package” si se
salveaza. Extensia poate fi instalata in momentul
in care aceasta este deschisa dau daca este
“trasa” in browser. In acest moment fila poate fi
trimisa, publicata pe internet sau se poate incerca
trimiterea la galeria Apple’s Safari.
Pasul 5 – Construirea pachetului
Extensii Internet Explorer
Extensiile pentru browser-ul Internet Explorer au fost intruduse incepand cu versiunea 5.0, si le-a permis dezvoltatorilor sa aduca functionalitatea browser-ului precum si de a spori interfata cu utilizatorul intr-un mod care nu este direct legat de coninutul vizual al paginii web.
Crearea unei extensii
O modalitatea simpla de a realiza extensii pentru Internet Explorer este de a folosi “Add-in Express™ for Internet Explorer® and Microsoft® .net”.
Add-In Express pentru Internet Explorer este singurul program all-in-one care ofera o modalitate simpla si rapida de a personaliza Internet Explorer cu extensii proprii. Suporta Internet Explorer Extensibility API si ofera o serie coerenta de componente .net si tool-uri. De mentionat este faptul ca suporta varintele Internet Explorer 6,7,8 si 9.
Add-In Express este bazat in intregime pe Rapid Application Development si este folosit pentru a dezvolta extensii profesionale pentru Internet Explorer, cu doar cateva click-uri.
Extensii Google Chrome
Multe extensii adauga elemente de UI browser-ului in
forma unor browser actions sau page actions.
De asemeni, extensiile pot prezenta un UI in alte moduri,
precum adaugarea elementelor in meniul de context, o
pagina de optiuni, sau folosirea unui content script care
schimba modul de afisare a paginilor.
Detalii privind UI-ul
Fiecare extensie contine urmatoarele fisiere:• un fisier manifest • unul sau mai multe fisiere HTML • optional: unul sau mai multe fisiere javascript • optional: orice alte fisiere necesare extensiei – ex: imagini.
In timpul dezvoltarii extensiei, toate aceste fisiere vor fi intr-un folder. In timpul distribuirii extensiei, continutul folderului va fi impachetat intr-un fisier ZIP cu extensia crx, care poate fi instalat de utilizatorii ce folosesc Chrome.
Fisiere
De obicei, referirea la fisiere se face folosind un URL relativ, precum se face si intr-o pagina HTML normala. Ex:
In unele cazuri, e necesar un URL absolut, care se face in felul urmator:• chrome-extension://<extensionID>/<pathToFile>
In acest URL, <extensionID> e un identificator unic pe care sistemul de extensii il genereaza pentru fiecare extensie.
Dupa impachetare, extensia primeste un ID permanent, care ramane acelasi si dupa update-uri ale extensiei. Odata ce ID-ul este permanent, se pot inlocui toate aparitiile @@extension_id cu adevaratul ID
Referinta
Fisierul manifest, numit manifest.json da informatii
despre estensie, precum fisierele cele mai importante si
capabilitatile pe care le-ar putea folosi extensia.
Exemplu de fisier manifest care foloseste informatii de
pe google.com:
Fisierul manifest
Multe extensii au o pagina de background, o pagina invizibila care tine logica principala a extensiei.
Arhitectura
Pagina de Background
Urmatoarea imagine afiseaza un browser care are cel
putin doua extensii instalate: un browser action(iconita
galbena) si un page action(iconita albastra). Ambele
extensii au cate un background page definit de fisiere
HTML. Aceasta imagine arata background page-ul
browser-action-ului, care este definit de bacground.html si
are cod JavaScript care controleaza comportamentul
browser action-ului in ambele ferestre.
Extensiile pot contine pagini HTML care afiseaza UI-ul extensiei. De exemplu, un browser action poate avea un popup, care este implementat de un fisier HTML. Orice extensie poate avea o pagina de optiuni, care le permite utilizatorilor sa configure modul in care functioneaza extensia. Alt tip de pagina speciala este o pagina override. Pentru a afisa alte fisiere HTML din extensie, se poate folosi chrome.tabs.create() sau window.open() .
Paginile HTML dintr-o extensie au acces deplin la DOM-ul celorlalte, si pot invoca functii pe acestea.
Pagini UI
Deoarece toate paginile extensiilor se executa intr-un singur proces si un singur thread, paginile pot face apeluri directe de functii intre ele.
Pentru a gasi pagini in extensie, se folosesc metode chrome.extension precum getViews() si getBackgroudnPage(). Odata ce o pagina are o referinta la alte pagini dintr-o extensie, prima pagina poate invoca functii din celelalte pagini, si le poate manipula DOM-ul.
Comunicarea dintre pagini
Web Sticky NotesWeb Sticky Notes este o extensie originala pentru
Google Chrome, care le permite utilizatorilor sa-si creeze
notite pe care sa le puna oriunde doresc acestia pe o
pagina web.
Notitele introduse de utilizator raman doar pe pagina in
care acesta le-a adaugat, notitele persistand chiar daca s-a
parasit pagina sau s-a inchis browser-ul. Acestea reapar in
momentul in care utilizatorul reviziteaza pagina unde le-a
introdus.
http://yo9fah.net/extensii-firefox/http://en.wikipedia.org/wiki/Add-on_%28Mozilla%29http://metodepromovare.wordpress.com/2008/02/06/optimizare-pentru-firefox-plugins-firefox/
https://developer.mozilla.org/en/Extensionshttp://www.rietta.com/firefox/Tutorial/conf.html
Bibliografie
Mozilla Firefox
Safari
http://developer.apple.com/library/safari/#documentation/
http://net.tutsplus.com/tutorials/other/how-to-create-asafari-extension-from-scratch/
http://msdn.microsoft.com/enus/library/aa753587%28v=vs.85%29.aspx
http://msdn.microsoft.com/enus/library/aa753588%28v=VS.85%29.aspx
http://www.add-in-express.com/programming-internetexplorer/index.php
Internet Explorer
Google Chrome
http://code.google.com/chrome/extensions/overview.html