Your SlideShare is downloading. ×
0
Web browser extension development
Web browser extension development
Web browser extension development
Web browser extension development
Web browser extension development
Web browser extension development
Web browser extension development
Web browser extension development
Web browser extension development
Web browser extension development
Web browser extension development
Web browser extension development
Web browser extension development
Web browser extension development
Web browser extension development
Web browser extension development
Web browser extension development
Web browser extension development
Web browser extension development
Web browser extension development
Web browser extension development
Web browser extension development
Web browser extension development
Web browser extension development
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web browser extension development

10,482

Published on

Published in: Technology, Design
1 Comment
0 Likes
Statistics
Notes
  • Try Kango framework - cross-browser extension development tool http://kangoextensions.com/
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
10,482
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
17
Comments
1
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Web Browser Extension DevelopmentLucian Novac and Rusu AlexandruFaculty of Computer Science, Al. I. Cuza University of Iaşi
  • 2. Browsers Extensions
  • 3. Browser Extension?• You write them using :HTML, JavaScript, and CSS.
  • 4. Google Chrome Extensions• A manifest file• HTML files (unless the extension is a theme)• JavaScript files• Other files
  • 5. Google Chrome Extensions .css .png .html manifest.json .js .crx Components
  • 6. Google Chrome Extensions• manifest.json is a manifest file and is the most important.
  • 7. Google Chrome ExtensionsExample of manifest file provided by Google Chrome:{ "name": "My Extension","version": "2.1","description": "Gets information from Google.","icons": { "128": "icon_128.png" },"background_page": "bg.html",“permissions": ["http://*.google.com/", "https://*.google.com/"], "browser_action": { "default_title": "", "default_icon": "icon_19.png", "default_popup": "popup.html" } }
  • 8. Opera Extensions• based on the W3C Widgets specification .• add the browser UI and functionality• edit web pages
  • 9. Opera Extensions The two basic parts of an Opera extension and how they communicate. From Opera
  • 10. Opera Extensions• /config.xml• /index.html• /background.js• /popup.html• /icons/example.png• /locales/no/index.html• /locales/no/background.js• /locales/no/popup.html• /options.html
  • 11. Opera Extensions• config.xml is mandatory and provides valuable meta data for the extension
  • 12. Opera Extensions• config.xml file(provided by Opera):<?xml version="1.0" encoding="utf-8"?><widget xmlns="http://www.w3.org/ns/widgets" id="http://www.example.org/example"><name>My test extension</name><description>API experiments and testing.</description><author href="http://foo-bar.example.org/" email="foo- bar@example.org">Foo Bar Corp</author><icon src="icons/example.png"/></widget>
  • 13. Opera Extensions• index.html file(provided by Opera):<!doctype html><html><head><script>window.addEventListener("load", function(){var theButton;var UIItemProperties = { disabled: false, title: "101 - createItem w popup big", icon: "icon.png", popup: { href: "popup.html", width: 250, height: 500 } } theButton = opera.contexts.toolbar.createItem( UIItemProperties ); opera.contexts.toolbar.addItem( theButton ); }, false);</script></head><body></body></html>
  • 14. Mozilla Extensions• Add new functionality to browser
  • 15. Mozilla Extensions Firebug AdBlock Plus Delicious
  • 16. Mozilla Extensions .xul .js Install.rdf Chrome.manifes .css t .png XPI Components
  • 17. Mozilla Extensions Xul Components
  • 18. Mozilla Extensions• XUL (XML User Interface Language) -alternative text, graphics and layout.
  • 19. Safari Extensions• Safari application• Web content
  • 20. Safari Extensions• JavaScript API• This API is documented in Safari Extensions Reference.
  • 21. Safari Extensions The extension architecture From Safari
  • 22. Safari Extensions• Extension Builder for make extensions• Safari 5.0
  • 23. Safari Extensions• The main ingredients of an extension are: oGlobal HTML page oContent (HTML, CSS, JavaScript, media) oMenu Items (labels, images) oInjected scripts oInjected style sheets oIcon image
  • 24. Bibliography• http://dev.opera.com• http://code.google.com• https://developer.mozilla.org• http://developer.apple.com

×