Web Browser Extension Development

of 40 /40
Web Browser Extension Development Acatrinei Tiberiu- Andrei Sumanaru Cristian An 3, Grupa 1A

Embed Size (px)

description

Web Browser Extension Development

Transcript of Web Browser Extension Development

  • 1. Web Browser Extension Development Acatrinei Tiberiu-Andrei Sumanaru Cristian An 3, Grupa 1A

2.

  • 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? 3. Exista diferente intre extensii si plugin-uri? 4.

  • 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 5.

  • 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.

6. Extensii Mozilla Firefox

  • Modificarea interfetei
  • Unele 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 7.

  • Adaugarea de noi trasaturi
  • Extensiile 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 web
  • Multe 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.

8.

  • Extensiile sunt ambalate si distribuite in fisiere ZIP sau Bundles, cu extensia XPI (pronunat 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 fiier Zip care a fost redenumit.

Construirea unei extensii Configurarea mediuluiu de dezolvtare 9.

  • Un exemplu de continut intr-un fisier tipic XPI:

10.

  • O instalare Manifest este o fila folosita
  • pentru 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 11.

  • Exmplu de un fisier .rdf:

12.

  • 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 deFirefox. Toate aplicatiile , de la
  • browser-ul global la extensii se inregistreaza cu acest
  • manager. Chrome foloseste URI-uri. Pentru a nu exista confuzii,
  • prefixul chrome este folosit in loc de http. De exmplu un
  • pachet numitbrowser are ca referintachrome://browser.

Chrome 13.

  • Avem in vedere fila chrome.manifest. De exemplu, vom
  • adauga o liniece ofera Firefox-ului informatia de a gasi si
  • a executaextensia: 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 14.

  • 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 dialogbox-uri ca si file .xul separate. Functionalitatea esteimplementanta folosind actiunile utilizator in file .js, sifolosind metodele DOM pentru a manipula widget-uri. Sepot folosi anumite reguli de stil in filele .css pentru a atasaimagini, schimba culori, etc. 15. Extensii Safari

  • Se pot creea extensii folosindExtension
  • Builder , care este realizat in Safari 5.0 si in versinule
  • urmatoare.
  • 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.

16.

  • Se poate realizaDEBUGpentru extensia
  • respectiva folosind Safaris 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.

17.

  • Extensiile pot realizaUPDATE
  • automat pe Web. Safari ofera o
  • modalitatea ce suporta verificarea
  • de update-uri pentru extensia
  • respectiva in mod automat: Update Manifest. Pur
  • si simplu sespecifica 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.

18. 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 19.

  • 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 carese 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 20. 21.

  • 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 resursele
  • necesare 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

22. Pasul 2 Setarile extensiei 23.

  • 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 1616 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.

24.

  • Pentru a controla, de exmplu un buton, este
  • necesar 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 25.

  • 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 3232 pixels.

Pasul 4 Adaugarea iconitei 26.

  • 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 Apples Safari.

Pasul 5 Construirea pachetului 27. 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.

28. Crearea unei extensii

  • O modalitatea simpla de a realiza extensiipentru
  • 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.

29.

  • 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.

30. Extensii Google Chrome

  • Multe extensii adauga elemente de UI browser-ului in
  • forma unorbrowser 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 31.

  • 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 32.

  • 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:// /
  • In acest URL, 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 33.

  • 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 34.

  • 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 celputin doua extensii instalate: un browser action(iconitagalbena) si un page action(iconita albastra). Ambeleextensii au cate un background page definit de fisiereHTML. Aceasta imagine arata background page-ulbrowser-action-ului, care este definit de bacground.html siare cod JavaScript care controleaza comportamentulbrowser action-ului in ambele ferestre. 35.

  • 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
  • folosichrome.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 36.

  • 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 37. Web Sticky Notes

  • Web Sticky Notes este o extensie originalapentru
  • 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.

38. 39.

  • http://yo9fah.net/extensii-firefox/ http://en.wikipedia.org/wiki/Add-on_%28Mozilla%29 http://metodepromovare.wordpress.com/2008/02/06/optimizare-pentru-firefox-plugins-firefox/ https:// developer.mozilla.org /en/Extensions http:// 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/ 40.

  • 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