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