Downloaded 21 times
![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" }
}](https://image.slidesharecdn.com/webbrowserextensiondevelopment-120109172146-phpapp01/75/Web-browser-extension-development-7-2048.jpg)
![Coded Agents – with UiPath SDK + LangGraph [Virtual Hands-on Workshop]](https://cdn.slidesharecdn.com/ss_thumbnails/codedagentsdeck-251215155422-5497c599-thumbnail.jpg?width=640&height=640&fit=bounds)
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
- 2.
- 3. Browser Extension? • Youwrite 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 Exampleof 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 • basedon 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.xmlis mandatory and provides valuable meta data for the extension
- 12. Opera Extensions • config.xmlfile(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.htmlfile(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 • Addnew 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 • Safariapplication • Web content
- 20. Safari Extensions • JavaScriptAPI • This API is documented in Safari Extensions Reference.
- 21. Safari Extensions The extension architecture From Safari
- 22. Safari Extensions • ExtensionBuilder for make extensions • Safari 5.0
- 23. Safari Extensions • Themain 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