Your SlideShare is downloading. ×
Web Browser Extension Development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

Web Browser Extension Development

966
views

Published on

Web Browser Extension Development

Web Browser Extension Development

Published in: Education

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
966
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
7
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 (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
  • 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 de Firefox. 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 numit “browser” are ca referinta“chrome://browser”.
    Chrome
  • 13.
    • 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
  • 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 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.
  • 15. Extensii Safari
    • Se pot creea extensii folosind Extension
    • 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 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.
  • 17.
    • 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.
  • 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 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
  • 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 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.
  • 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 32×32 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 Apple’s 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 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.
  • 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 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
  • 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:// <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
  • 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 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.
  • 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
    • 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
  • 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 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.
  • 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