SlideShare a Scribd company logo
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]

More Related Content

Similar to Web browser extension development

Web Browser Extension Development
Web Browser Extension DevelopmentWeb Browser Extension Development
Web Browser Extension Development
Acatrinei Tiberiu-Andrei
 
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 HTML5
Sabin Buraga
 
24365896 tutorial-instalare-wordpress-carteamea-net
24365896 tutorial-instalare-wordpress-carteamea-net24365896 tutorial-instalare-wordpress-carteamea-net
24365896 tutorial-instalare-wordpress-carteamea-net
Costache Paul
 
Flash Super Marathon
Flash Super MarathonFlash Super Marathon
Web Storage Performance
Web Storage PerformanceWeb Storage Performance
Web Storage Performance
Mihai 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-uri
Asociatia 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 JavaScript
Sabin 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 aplicatii
Sabin Buraga
 

Similar to 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
 

Recently uploaded

Raport proiect transfrontalier „Educație online fără hotare”
Raport proiect transfrontalier „Educație online fără hotare”Raport proiect transfrontalier „Educație online fără hotare”
Raport proiect transfrontalier „Educație online fără hotare”
SemenNicoleta
 
Elemente geometrice din portul popular,,
Elemente geometrice din portul popular,,Elemente geometrice din portul popular,,
Elemente geometrice din portul popular,,
OlgaFalca
 
Raport " Talentele copiilor de pretutindeni "
Raport " Talentele copiilor de pretutindeni "Raport " Talentele copiilor de pretutindeni "
Raport " Talentele copiilor de pretutindeni "
AndreeaChelaru7
 
ANATOMIA-COLOANEI-VERTEBRALE........pptx
ANATOMIA-COLOANEI-VERTEBRALE........pptxANATOMIA-COLOANEI-VERTEBRALE........pptx
ANATOMIA-COLOANEI-VERTEBRALE........pptx
StoicaHoratiu
 
proiect Transfrontalier Mai.pptx simbiolurile primaverii
proiect Transfrontalier Mai.pptx simbiolurile primaveriiproiect Transfrontalier Mai.pptx simbiolurile primaverii
proiect Transfrontalier Mai.pptx simbiolurile primaverii
auraortacu
 
Boli ale Sistemul Nervos Central (SNC) pptx
Boli ale Sistemul Nervos Central (SNC) pptxBoli ale Sistemul Nervos Central (SNC) pptx
Boli ale Sistemul Nervos Central (SNC) pptx
valerio13mai
 

Recently uploaded (6)

Raport proiect transfrontalier „Educație online fără hotare”
Raport proiect transfrontalier „Educație online fără hotare”Raport proiect transfrontalier „Educație online fără hotare”
Raport proiect transfrontalier „Educație online fără hotare”
 
Elemente geometrice din portul popular,,
Elemente geometrice din portul popular,,Elemente geometrice din portul popular,,
Elemente geometrice din portul popular,,
 
Raport " Talentele copiilor de pretutindeni "
Raport " Talentele copiilor de pretutindeni "Raport " Talentele copiilor de pretutindeni "
Raport " Talentele copiilor de pretutindeni "
 
ANATOMIA-COLOANEI-VERTEBRALE........pptx
ANATOMIA-COLOANEI-VERTEBRALE........pptxANATOMIA-COLOANEI-VERTEBRALE........pptx
ANATOMIA-COLOANEI-VERTEBRALE........pptx
 
proiect Transfrontalier Mai.pptx simbiolurile primaverii
proiect Transfrontalier Mai.pptx simbiolurile primaveriiproiect Transfrontalier Mai.pptx simbiolurile primaverii
proiect Transfrontalier Mai.pptx simbiolurile primaverii
 
Boli ale Sistemul Nervos Central (SNC) pptx
Boli ale Sistemul Nervos Central (SNC) pptxBoli ale Sistemul Nervos Central (SNC) pptx
Boli ale Sistemul Nervos Central (SNC) pptx
 

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.