1 / 20

Web Browser Extension Development

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.

zody
Download Presentation

Web Browser Extension Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Browser Extension Development Pandaciuc Gheorghe Ilie Grupa:4A

  2. 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.

  3. Structura unei extensii • Metadata information • User interface extension • functionality

  4. Particularități în funcție de browser Una 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.

  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:

  6. Structura folderului • install.rdf • chrome.manifest • chrome\ • content\ • sample.xul

  7. Exemple install.rdf <?xml version="1.0"?> <RDFxmlns="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>

  8. 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>

  9. Example chrome manifest

  10. Cele mai cunoscute extensii Firefox • AdBlock Plus • Firebug • Delicious • Video DownloadHelper • GreaseMonkey • FasterFox

  11. 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: •unfisiermanifest •unulsaumaimultefisiereHTML•opțional:unulsaumaimultefisierejavascript •opțional:alte tipuri de fișiere

  12. Exemplu { "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

  13. 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

  14. 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

  15. 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.html function 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

  16. Cele mai cunoscute extensii Chrome • Gmail Checker • PageRank • Chrome Gestures • Google Talk • GBX: Google Bookmarks Extension • FastestChrome

  17. 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.

  18. 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.

  19. Cele mai cunsoscute extensii pentru Internet Explorer • Altavista toolbar; • Alexa toolbar; • Fiddler; • Earthlink toolbar; • LuckyTabSave; • Zemanta;

  20. Bibliografie • https://developer.mozilla.org/en/Chrome_Registration • 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

More Related