Post on 17-Jan-2016
description
transcript
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