Web Browser Extension Development

Pandaciuc Gheorghe Ilie Grupa:4A

Ce este o extensie de browser?

O extensie de browser este un program care adaugă noi funcţionalități unui browser web, de exemplu winamp toolbar ne permite să controlăm winamp-ul direct din browser.

Structura unei extensii

Metadata information User interface extension functionality

Particularități în funcție de browserUna din problemele principale care face ca

extensiile pentru Internet Explorer să fie greu de dezvoltat este acela că trebuie create in C sau in .Net pe când la extensiile pentru Firefox sau Chrome folosim JavaScript-ul care este mult mai simplu. Extensia fișierului diferă la fiecare browser în parte:

Mozilla Firefox->.xpi,Google Chrome->.crx,Internet Explorer->.exe

  Microsoft Internet Explorer a început să suporte extensii de la versiunea 5, Google Chrome  de la versiunea 4, Opera a acceptat extensii de la versiunea 10, iar Safari  a început să suporte extensii native de la versiunea 5.

Extensii pentru Mozilla Firefox

Extensiile pentru Firefox sunt împachetate intr-un fisier cu extensia .xpi.

Un exemplu cu conținutul unui fisier .xpi arată cam așa:

Structura folderului

install.rdf chrome.manifest chrome\

content\ sample.xul

Exemple install.rdf

<?xml version="1.0"?> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-

syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">

<Description about="urn:mozilla:install-manifest"> <!-- properties --> </Description> </RDF>

Example XUL Overlay Document

<?xml version="1.0"?> <overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <statusbar id="status-bar"> <statusbarpanel id="my-panel" label="Hello, World" /> </statusbar> </overlay>

Example chrome manifest

Cele mai cunoscute extensii Firefox

AdBlock Plus Firebug Delicious Video DownloadHelper GreaseMonkey FasterFox

Extensii pentru Google Chrome

Extensiile pentru Chrome sunt împachetate într-un fisier cu extensia .crx.

Un exemplu cu conținutul unui fisier .crx arată cam așa:

•un fisier manifest•unul sau mai multe fisiere HTML

•opțional:unul sau mai multe fisiere javascript •opțional:alte tipuri de fișiere

{ "name": "My First Extension", "version": "1.0", "description": "The first extension that I made.", "browser_action": { "default_icon": "icon.png",

"popup" : "popup.html" }, "permissions": [ "http://api.flickr.com/" ]} manifest.json

Exemplu

<style>body { min-width:357px; overflow-x:hidden;}

img { margin:5px; border:2px solid black; vertical-align:middle; width:75px; height:75px;}</style> ...

popup.html

Exemplu

<script>var req = new XMLHttpRequest();req.open( "GET", "http://api.flickr.com/services/rest/?" + "method=flickr.photos.search&" + "api_key=90485e931f687a9b9c2a66bf58a3861a&" + "text=hello%20world&" + "safe_search=1&" + // 1 is "safe" "content_type=1&" + // 1 is "photos only" "sort=relevance&" + // another good one is "interestingness-desc" "per_page=20", true);req.onload = showPhotos;req.send(null);…</script>

popup.html

Exemplu

<script>...function showPhotos() { var photos = req.responseXML.getElementsByTagName("photo");

for (var i = 0, photo; photo = photos[i]; i++) { var img = document.createElement("image"); img.src = constructImageURL(photo); document.body.appendChild(img); }}

// See: http://www.flickr.com/services/api/misc.urls.htmlfunction constructImageURL(photo) { return "http://farm" + photo.getAttribute("farm") + ".static.flickr.com/" + photo.getAttribute("server") + "/" + photo.getAttribute("id") + "_" + photo.getAttribute("secret") + "_s.jpg";}</script>

popup.html

Exemplu

Cele mai cunoscute extensii Chrome

Gmail CheckerPageRankChrome GesturesGoogle TalkGBX: Google Bookmarks Extension FastestChrome

Extensii pentru Internet Explorer

O modalitate simplă de a crea extensii pentru Internet Explorer fără a scrie prea mult cod se poate realiza folosind Add-in Express.Aceasta modalitate este compatibilă începanda cu Internet Explorer 6. În schimb dacă nu vă place să programați în C sau în .Net atunci ați putea încerca să folosiți Crossrider care vă permite sa creați o extensie pentru IE folosind cod JavaScript.

Mai multe despre Crossrider

Crossrider este uun framework JavaScript ușor de folosit pentru a crea extensii de browser în doar câteva minute. Momentan acesta suportă Mozilla Firefox, Google Chrome și Internet Explorer.

Cele mai cunsoscute extensii pentru Internet Explorer

Altavista toolbar; Alexa toolbar; Fiddler; Earthlink toolbar; LuckyTabSave; Zemanta;

Bibliografie https://developer.mozilla.org/en/Chrome_Re

gistration http://code.google.com/chrome/extensions/

manifest.html

http://crossrider.com/ http://code.google.com/chrome/extensions/

getstarted.html

http://en.wikipedia.org/wiki/Browser_extension

https://developer.mozilla.org/en/Extensions