SlideShare uma empresa Scribd logo
1 de 20
Web Browser Extension Development Pandaciuc Gheorghe Ilie  Grupa:4A
Ce este o extensie de browser? ,[object Object]
Structura unei extensii ,[object Object],[object Object],[object Object]
Particularități în funcție de browser ,[object Object],[object Object],[object Object],[object Object],[object Object]
Extensii pentru Mozilla Firefox ,[object Object],[object Object]
Structura folderului ,[object Object],[object Object],[object Object],[object Object],[object Object]
Exemple  install.rdf ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Example XUL Overlay Document ,[object Object]
Example chrome manifest
Cele mai cunoscute e xtensii Firefox ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Extensii pentru Google Chrome ,[object Object],[object Object],[object Object],[object Object],[object Object]
{ "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( &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
<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
Cele mai cunoscute e xtensii Chrome ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Extensii pentru Internet Explorer ,[object Object]
Mai multe despre  Crossrider ,[object Object]
Cele mai cunsoscute extensii pentru Internet Explorer ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Bibliografie ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

Mais conteúdo relacionado

Semelhante a Web browser extension development

Web browser extensions development
Web browser extensions developmentWeb browser extensions development
Web browser extensions developmentConstantin Lucian
 
[Web Days] Introducere In Silverlight 2
[Web Days] Introducere In Silverlight 2[Web Days] Introducere In Silverlight 2
[Web Days] Introducere In Silverlight 2Diana Tataran
 
Aplicații Firefox OS cu HTML5
Aplicații Firefox OS cu HTML5Aplicații Firefox OS cu HTML5
Aplicații Firefox OS cu HTML5Sabin Buraga
 
24365896 tutorial-instalare-wordpress-carteamea-net
24365896 tutorial-instalare-wordpress-carteamea-net24365896 tutorial-instalare-wordpress-carteamea-net
24365896 tutorial-instalare-wordpress-carteamea-netCostache Paul
 
Web Storage Performance
Web Storage PerformanceWeb Storage Performance
Web Storage PerformanceMihai Valache
 
A B C in WordPress. Introducere pentru ONG-uri
A B C in WordPress. Introducere pentru ONG-uriA B C in WordPress. Introducere pentru ONG-uri
A B C in WordPress. Introducere pentru ONG-uriAsociatia Techsoup Romania
 
Mozilla firefox features meetup
Mozilla firefox features   meetup Mozilla firefox features   meetup
Mozilla firefox features meetup Vlad Maniak
 
Analiza si evolutia vulnerabilitatilor web
Analiza si evolutia vulnerabilitatilor webAnaliza si evolutia vulnerabilitatilor web
Analiza si evolutia vulnerabilitatilor webDefCamp
 
[Web Days] Manipularea Datelor, Conectivitate Si Performanta In Silverlight 2
[Web Days] Manipularea Datelor, Conectivitate Si Performanta In Silverlight 2[Web Days] Manipularea Datelor, Conectivitate Si Performanta In Silverlight 2
[Web Days] Manipularea Datelor, Conectivitate Si Performanta In Silverlight 2Diana Tataran
 
CLIW 2017-2018 (7/12) JavaScript în navigatorul Web. De la DOM la Ajax şi mas...
CLIW 2017-2018 (7/12) JavaScript în navigatorul Web. De la DOM la Ajax şi mas...CLIW 2017-2018 (7/12) JavaScript în navigatorul Web. De la DOM la Ajax şi mas...
CLIW 2017-2018 (7/12) JavaScript în navigatorul Web. De la DOM la Ajax şi mas...Sabin Buraga
 
CLIW 2015-2016 (9/13) Ingineria dezvoltării aplicațiilor JavaScript
CLIW 2015-2016 (9/13) Ingineria dezvoltării aplicațiilor JavaScriptCLIW 2015-2016 (9/13) Ingineria dezvoltării aplicațiilor JavaScript
CLIW 2015-2016 (9/13) Ingineria dezvoltării aplicațiilor JavaScriptSabin Buraga
 
Programare Web - De la CGI la servere de aplicatii
Programare Web - De la CGI la servere de aplicatiiProgramare Web - De la CGI la servere de aplicatii
Programare Web - De la CGI la servere de aplicatiiSabin Buraga
 

Semelhante a Web browser extension development (15)

Web Browser Extension Development
Web Browser Extension DevelopmentWeb Browser Extension Development
Web Browser Extension Development
 
Web browser extensions development
Web browser extensions developmentWeb browser extensions development
Web browser extensions development
 
[Web Days] Introducere In Silverlight 2
[Web Days] Introducere In Silverlight 2[Web Days] Introducere In Silverlight 2
[Web Days] Introducere In Silverlight 2
 
Aplicații Firefox OS cu HTML5
Aplicații Firefox OS cu HTML5Aplicații Firefox OS cu HTML5
Aplicații Firefox OS cu HTML5
 
24365896 tutorial-instalare-wordpress-carteamea-net
24365896 tutorial-instalare-wordpress-carteamea-net24365896 tutorial-instalare-wordpress-carteamea-net
24365896 tutorial-instalare-wordpress-carteamea-net
 
Flash Super Marathon
Flash Super MarathonFlash Super Marathon
Flash Super Marathon
 
Web Storage Performance
Web Storage PerformanceWeb Storage Performance
Web Storage Performance
 
A B C in WordPress. Introducere pentru ONG-uri
A B C in WordPress. Introducere pentru ONG-uriA B C in WordPress. Introducere pentru ONG-uri
A B C in WordPress. Introducere pentru ONG-uri
 
Mozilla firefox features meetup
Mozilla firefox features   meetup Mozilla firefox features   meetup
Mozilla firefox features meetup
 
Analiza si evolutia vulnerabilitatilor web
Analiza si evolutia vulnerabilitatilor webAnaliza si evolutia vulnerabilitatilor web
Analiza si evolutia vulnerabilitatilor web
 
Comunicarea in AS3
Comunicarea in AS3Comunicarea in AS3
Comunicarea in AS3
 
[Web Days] Manipularea Datelor, Conectivitate Si Performanta In Silverlight 2
[Web Days] Manipularea Datelor, Conectivitate Si Performanta In Silverlight 2[Web Days] Manipularea Datelor, Conectivitate Si Performanta In Silverlight 2
[Web Days] Manipularea Datelor, Conectivitate Si Performanta In Silverlight 2
 
CLIW 2017-2018 (7/12) JavaScript în navigatorul Web. De la DOM la Ajax şi mas...
CLIW 2017-2018 (7/12) JavaScript în navigatorul Web. De la DOM la Ajax şi mas...CLIW 2017-2018 (7/12) JavaScript în navigatorul Web. De la DOM la Ajax şi mas...
CLIW 2017-2018 (7/12) JavaScript în navigatorul Web. De la DOM la Ajax şi mas...
 
CLIW 2015-2016 (9/13) Ingineria dezvoltării aplicațiilor JavaScript
CLIW 2015-2016 (9/13) Ingineria dezvoltării aplicațiilor JavaScriptCLIW 2015-2016 (9/13) Ingineria dezvoltării aplicațiilor JavaScript
CLIW 2015-2016 (9/13) Ingineria dezvoltării aplicațiilor JavaScript
 
Programare Web - De la CGI la servere de aplicatii
Programare Web - De la CGI la servere de aplicatiiProgramare Web - De la CGI la servere de aplicatii
Programare Web - De la CGI la servere de aplicatii
 

Web browser extension development

  • 1. Web Browser Extension Development Pandaciuc Gheorghe Ilie Grupa:4A
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 10.
  • 11.
  • 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. <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. <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. <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.
  • 17.
  • 18.
  • 19.
  • 20.