SlideShare a Scribd company logo
Web Browser Extension Development Acatrinei Tiberiu-Andrei Sumanaru Cristian An 3, Grupa 1A
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Ce este o extensie?
Exista diferente intre extensii si plugin-uri?
[object Object],[object Object],Diferente intre extensii si plugin-uri
[object Object],[object Object]
Extensii Mozilla Firefox ,[object Object],[object Object],[object Object],[object Object],[object Object],Clasificarea extensiilor
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],Construirea unei extensii Configurarea mediuluiu de dezolvtare
[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Instalarea manifest
[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Chrome
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Chrome Manifest
[object Object],[object Object],[object Object],[object Object],Extinderea Browser-ului folosind XUL Creeare de componente pentru Interfata Utilizator Utilizatorul are posibilitatea de a creea fereste si dialog  box-uri ca si file .xul separate. Functionalitatea este  implementanta folosind actiunile utilizator in file .js, si  folosind metodele DOM pentru a manipula widget-uri. Se  pot folosi anumite reguli de stil in filele .css pentru a atasa  imagini, schimba culori, etc.
Extensii Safari ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Construirea unei extensii ,[object Object],[object Object],[object Object],[object Object],Pasul 0 - Inregistrare
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Pasul 1 – Extension Builder
 
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Pasul 2 – Setarile extensiei
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Pasul 3 – Crearea paginii globale
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Pasul 4 – Adaugarea iconitei
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Pasul 5 – Construirea pachetului
Extensii Internet Explorer ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Crearea unei extensii ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object]
Extensii Google Chrome ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Detalii privind UI-ul
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Fisiere
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Referinta
[object Object],[object Object],[object Object],[object Object],[object Object],Fisierul manifest
[object Object],[object Object],Arhitectura Pagina de Background Urmatoarea imagine afiseaza un browser care are cel  putin doua extensii instalate: un browser action(iconita  galbena) si un page action(iconita albastra). Ambele  extensii au cate un background page definit de fisiere  HTML. Aceasta imagine arata background page-ul  browser-action-ului, care este definit de bacground.html si  are cod JavaScript care controleaza comportamentul  browser action-ului in ambele ferestre.
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Pagini UI
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Comunicarea dintre pagini
Web Sticky Notes ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
 
[object Object],Bibliografie Mozilla Firefox Safari http://developer.apple.com/library/safari/#documentation/ http://net.tutsplus.com/tutorials/other/how-to-create-asafari-extension-from-scratch/
[object Object],[object Object],[object Object],Internet Explorer Google Chrome http:// code.google.com/chrome/extensions/overview.html

More Related Content

Similar to Web Browser Extension Development

Felicitari personalizate
Felicitari personalizateFelicitari personalizate
Felicitari personalizate
Balas Adina-Georgiana
 
Licenta web aplicatie.pptx
Licenta web aplicatie.pptxLicenta web aplicatie.pptx
Licenta web aplicatie.pptx
ElenaConstantin24
 
Galerie
GalerieGalerie
Galerie
mihaiov
 
Proiect dolce-maly.ro WEB
Proiect dolce-maly.ro WEBProiect dolce-maly.ro WEB
Proiect dolce-maly.ro WEB
Ligia Alexandra Gaspar
 
Web Storage Performance
Web Storage PerformanceWeb Storage Performance
Web Storage Performance
Mihai Valache
 
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
 
Aplicatii facebook adrian balcan -www.gamesball.info
Aplicatii facebook   adrian balcan -www.gamesball.infoAplicatii facebook   adrian balcan -www.gamesball.info
Aplicatii facebook adrian balcan -www.gamesball.info
cristiytzu
 
Prezentare Programare Web - Site de administrare blog
Prezentare Programare Web - Site de administrare blogPrezentare Programare Web - Site de administrare blog
Prezentare Programare Web - Site de administrare blogDinuSrs
 
Prezentare site Coafor Virtual
Prezentare site Coafor VirtualPrezentare site Coafor Virtual
Prezentare site Coafor VirtualAndreea Usatenco
 
Proiect programare web
Proiect programare webProiect programare web
Proiect programare webala2200
 
10 browsere de internet necunoscute
10 browsere de internet necunoscute10 browsere de internet necunoscute
10 browsere de internet necunoscuteDu Ghe
 
Indrumar laborator
Indrumar laboratorIndrumar laborator
Indrumar laboratorseyki
 
Google docs -chestionare web
Google docs -chestionare webGoogle docs -chestionare web
Google docs -chestionare webgalan
 

Similar to Web Browser Extension Development (20)

Felicitari personalizate
Felicitari personalizateFelicitari personalizate
Felicitari personalizate
 
Licenta web aplicatie.pptx
Licenta web aplicatie.pptxLicenta web aplicatie.pptx
Licenta web aplicatie.pptx
 
Capitolul 3
Capitolul 3Capitolul 3
Capitolul 3
 
Galerie
GalerieGalerie
Galerie
 
Galerie
GalerieGalerie
Galerie
 
Proiect dolce-maly.ro WEB
Proiect dolce-maly.ro WEBProiect dolce-maly.ro WEB
Proiect dolce-maly.ro WEB
 
Web Storage Performance
Web Storage PerformanceWeb Storage Performance
Web Storage Performance
 
Flori x
Flori xFlori x
Flori x
 
24365896 tutorial-instalare-wordpress-carteamea-net
24365896 tutorial-instalare-wordpress-carteamea-net24365896 tutorial-instalare-wordpress-carteamea-net
24365896 tutorial-instalare-wordpress-carteamea-net
 
Aplicatii facebook adrian balcan -www.gamesball.info
Aplicatii facebook   adrian balcan -www.gamesball.infoAplicatii facebook   adrian balcan -www.gamesball.info
Aplicatii facebook adrian balcan -www.gamesball.info
 
Prezentare Programare Web - Site de administrare blog
Prezentare Programare Web - Site de administrare blogPrezentare Programare Web - Site de administrare blog
Prezentare Programare Web - Site de administrare blog
 
Irina Cureraru
Irina CureraruIrina Cureraru
Irina Cureraru
 
Prezentare site Coafor Virtual
Prezentare site Coafor VirtualPrezentare site Coafor Virtual
Prezentare site Coafor Virtual
 
Proiect programare web
Proiect programare webProiect programare web
Proiect programare web
 
10 browsere de internet necunoscute
10 browsere de internet necunoscute10 browsere de internet necunoscute
10 browsere de internet necunoscute
 
Indrumar laborator
Indrumar laboratorIndrumar laborator
Indrumar laborator
 
Add on
Add onAdd on
Add on
 
formulare web
formulare webformulare web
formulare web
 
Google docs -chestionare web
Google docs -chestionare webGoogle docs -chestionare web
Google docs -chestionare web
 
Google Docs
Google DocsGoogle Docs
Google Docs
 

Recently uploaded

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
 
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
 
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
 
proiect Transfrontalier Mai.pptx simbiolurile primaverii
proiect Transfrontalier Mai.pptx simbiolurile primaveriiproiect Transfrontalier Mai.pptx simbiolurile primaverii
proiect Transfrontalier Mai.pptx simbiolurile primaverii
auraortacu
 
ANATOMIA-COLOANEI-VERTEBRALE........pptx
ANATOMIA-COLOANEI-VERTEBRALE........pptxANATOMIA-COLOANEI-VERTEBRALE........pptx
ANATOMIA-COLOANEI-VERTEBRALE........pptx
StoicaHoratiu
 

Recently uploaded (6)

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 "
 
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
 
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”
 
proiect Transfrontalier Mai.pptx simbiolurile primaverii
proiect Transfrontalier Mai.pptx simbiolurile primaveriiproiect Transfrontalier Mai.pptx simbiolurile primaverii
proiect Transfrontalier Mai.pptx simbiolurile primaverii
 
ANATOMIA-COLOANEI-VERTEBRALE........pptx
ANATOMIA-COLOANEI-VERTEBRALE........pptxANATOMIA-COLOANEI-VERTEBRALE........pptx
ANATOMIA-COLOANEI-VERTEBRALE........pptx
 

Web Browser Extension Development

  • 1. Web Browser Extension Development Acatrinei Tiberiu-Andrei Sumanaru Cristian An 3, Grupa 1A
  • 2.
  • 3. Exista diferente intre extensii si plugin-uri?
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.  
  • 21.
  • 22. Pasul 2 – Setarile extensiei
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.  
  • 39.
  • 40.