SlideShare a Scribd company logo

Web browser extension development

•Download as PPTX, PDF•
•
A
alecsrusu

This document discusses different web browser extensions. It covers Google Chrome extensions which use manifest.json files to define permissions and components. It also covers Opera extensions which use config.xml files and have index.html and background files. Mozilla extensions add functionality using XUL files and components. Safari extensions use JavaScript APIs and inject scripts/stylesheets. Overall the document provides an overview of how extensions work across various browsers.

1 of 24
Web Browser Extension Development Lucian Novac and Rusu Alexandru Faculty of Computer Science, Al. I. Cuza University of Iaşi
Browsers Extensions
Browser Extension? • You write them using :HTML, JavaScript, and CSS.
Google Chrome Extensions • A manifest file • HTML files (unless the extension is a theme) • JavaScript files • Other files
Google Chrome Extensions .css .png .html manifest.json .js .crx Components
Google Chrome Extensions • manifest.json is a manifest file and is the most important.
Google Chrome Extensions Example 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" } }
Opera Extensions • based on the W3C Widgets specification . • add the browser UI and functionality • edit web pages
Opera Extensions The two basic parts of an Opera extension and how they communicate. From Opera
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
Opera Extensions • config.xml is mandatory and provides valuable meta data for the extension
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>
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>
Mozilla Extensions • Add new functionality to browser
Mozilla Extensions Firebug AdBlock Plus Delicious
Mozilla Extensions .xul .js Install.rdf Chrome.manifes .css t .png XPI Components
Mozilla Extensions Xul Components
Mozilla Extensions • XUL (XML User Interface Language) -alternative text, graphics and layout.
Safari Extensions • Safari application • Web content
Safari Extensions • JavaScript API • This API is documented in Safari Extensions Reference.
Safari Extensions The extension architecture From Safari
Safari Extensions • Extension Builder for make extensions • Safari 5.0
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
Bibliography • http://dev.opera.com • http://code.google.com • https://developer.mozilla.org • http://developer.apple.com

More Related Content

Web browser extension development

  • 1. Web Browser Extension Development Lucian Novac and Rusu Alexandru Faculty of Computer Science, Al. I. Cuza University of Iaşi
  • 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 Extensions Example 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- [email protected]">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