Web browser extension development

1,316 views

Published on

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,316
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web browser extension development

  1. 1. Web Browser Extension Development Pandaciuc Gheorghe Ilie Grupa:4A
  2. 2. Ce este o extensie de browser? <ul><li>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 . </li></ul>
  3. 3. Structura unei extensii <ul><li>Metadata information </li></ul><ul><li>User interface extension </li></ul><ul><li>functionality </li></ul>
  4. 4. Particularități în funcție de browser <ul><li>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: </li></ul><ul><li>Mozilla Firefox- > . xpi, </li></ul><ul><li>Google Chrome-> . crx, </li></ul><ul><li>Internet Explorer-> . exe </li></ul><ul><li>  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. </li></ul>
  5. 5. Extensii pentru Mozilla Firefox <ul><li>Extensiile pentru Firefox sunt împachetate intr-un fisier cu extensia .xpi. </li></ul><ul><li>Un exemplu cu conținutul unui fisier .xpi arată cam așa: </li></ul>
  6. 6. Structura folderului <ul><li>install.rdf </li></ul><ul><li>chrome.manifest </li></ul><ul><li>chrome </li></ul><ul><ul><li>content </li></ul></ul><ul><ul><ul><li>sample.xul </li></ul></ul></ul>
  7. 7. Exemple install.rdf <ul><li><?xml version=&quot;1.0&quot;?> </li></ul><ul><li><RDF xmlns=&quot;http://www.w3.org/1999/02/22-rdf-syntax-ns#&quot; xmlns:em=&quot;http://www.mozilla.org/2004/em-rdf#&quot;> </li></ul><ul><li><Description about=&quot;urn:mozilla:install-manifest&quot;> </li></ul><ul><li><!-- properties --> </li></ul><ul><li></Description> </li></ul><ul><li></RDF> </li></ul>
  8. 8. Example XUL Overlay Document <ul><li><?xml version=&quot;1.0&quot;?> <overlay id=&quot;sample&quot; xmlns=&quot; http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul &quot;> <statusbar id=&quot; status-bar &quot;> <statusbarpanel id=&quot;my-panel&quot; label=&quot;Hello, World&quot; /> </statusbar> </overlay> </li></ul>
  9. 9. Example chrome manifest
  10. 10. Cele mai cunoscute e xtensii Firefox <ul><li>AdBlock Plus </li></ul><ul><li>Firebug </li></ul><ul><li>Delicious </li></ul><ul><li>Video DownloadHelper </li></ul><ul><li>GreaseMonkey </li></ul><ul><li>FasterFox </li></ul>
  11. 11. Extensii pentru Google Chrome <ul><li>Extensiile pentru Chrome sunt împachetate într-un fisier cu extensia .crx. </li></ul><ul><li>Un exemplu cu conținutul unui fisier .crx arată cam așa: </li></ul><ul><li>• un fisier manifest </li></ul><ul><li>• unul sau mai multe fisiere HTML •op ț ional:unul sau mai multe fisiere javascript </li></ul><ul><li>• op țional:alte tipuri de fișiere </li></ul>
  12. 12. { &quot;name&quot;: &quot;My First Extension&quot;, &quot;version&quot;: &quot;1.0&quot;, &quot;description&quot;: &quot;The first extension that I made.&quot;, &quot;browser_action&quot;: { &quot;default_icon&quot;: &quot;icon.png&quot;, &quot;popup&quot; : &quot;popup.html&quot; }, &quot;permissions&quot;: [ &quot;http://api.flickr.com/&quot; ] } manifest.json Exemplu
  13. 13. <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
  14. 14. <script> var req = new XMLHttpRequest(); req.open( &quot;GET&quot;, &quot;http://api.flickr.com/services/rest/?&quot; + &quot;method=flickr.photos.search&&quot; + &quot;api_key=90485e931f687a9b9c2a66bf58a3861a&&quot; + &quot;text=hello%20world&&quot; + &quot;safe_search=1&&quot; + // 1 is &quot;safe&quot; &quot;content_type=1&&quot; + // 1 is &quot;photos only&quot; &quot;sort=relevance&&quot; + // another good one is &quot;interestingness-desc&quot; &quot;per_page=20&quot;, true); req.onload = showPhotos; req.send(null); … </script> popup.html Exemplu
  15. 15. <script> ... function showPhotos() { var photos = req.responseXML.getElementsByTagName(&quot;photo&quot;); for (var i = 0, photo; photo = photos[i]; i++) { var img = document.createElement(&quot;image&quot;); img.src = constructImageURL(photo); document.body.appendChild(img); } } // See: http://www.flickr.com/services/api/misc.urls.html function constructImageURL(photo) { return &quot;http://farm&quot; + photo.getAttribute(&quot;farm&quot;) + &quot;.static.flickr.com/&quot; + photo.getAttribute(&quot;server&quot;) + &quot;/&quot; + photo.getAttribute(&quot;id&quot;) + &quot;_&quot; + photo.getAttribute(&quot;secret&quot;) + &quot;_s.jpg&quot;; } </script> popup.html Exemplu
  16. 16. Cele mai cunoscute e xtensii Chrome <ul><ul><ul><li>Gmail Checker </li></ul></ul></ul><ul><ul><ul><li>PageRank </li></ul></ul></ul><ul><ul><ul><li>Chrome Gestures </li></ul></ul></ul><ul><ul><ul><li>Google Talk </li></ul></ul></ul><ul><ul><ul><li>GBX: Google Bookmarks Extension </li></ul></ul></ul><ul><ul><ul><li>FastestChrome </li></ul></ul></ul>
  17. 17. Extensii pentru Internet Explorer <ul><li>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. </li></ul>
  18. 18. Mai multe despre Crossrider <ul><li>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. </li></ul>
  19. 19. Cele mai cunsoscute extensii pentru Internet Explorer <ul><li>Altavista toolbar ; </li></ul><ul><li>Alexa toolbar; </li></ul><ul><li>Fiddler; </li></ul><ul><li>Earthlink toolbar ; </li></ul><ul><li>LuckyTabSave; </li></ul><ul><li>Zemanta ; </li></ul>
  20. 20. Bibliografie <ul><li>https://developer.mozilla.org/en/Chrome_Registration </li></ul><ul><li>http://code.google.com/chrome/extensions/manifest.html </li></ul><ul><li>http://crossrider.com/ </li></ul><ul><li>http://code.google.com/chrome/extensions/getstarted.html </li></ul><ul><li>http://en.wikipedia.org/wiki/Browser_extension </li></ul><ul><li>https://developer.mozilla.org/en/Extensions </li></ul>

×