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