Web Browser Extension Development
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Web Browser Extension Development

on

  • 1,279 views

Web Browser Extension Development

Web Browser Extension Development

Statistics

Views

Total Views
1,279
Views on SlideShare
1,223
Embed Views
56

Actions

Likes
0
Downloads
7
Comments
0

1 Embed 56

http://browserextension.blog.com 56

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web Browser Extension Development Presentation 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