Browser extension
Download as POT, PDF1 like1,231 views
The document provides a comprehensive overview of web browser extension development, detailing the technologies involved such as HTML, CSS, and JavaScript. It outlines the structure and components necessary for creating extensions for both Firefox and Google Chrome, including specific file formats like install.rdf and manifest.json. Additionally, it includes links for publishing extensions on respective browser stores and a bibliography for further reading.
![<Description about="urn:mozilla:install-manifest"> <em:id> [email_address] </em:id> <em:name>XUL School Hello World</em:name> <em:description>Welcome to XUL School!</em:description> <em:version>0.1</em:version> <em:creator>Appcoast</em:creator> <em:homepageURL> https://developer.mozilla.org/en/XUL_School </em:homepageURL> <em:type>2</em:type> … </Description> install.rdf (metadata) Extension files Extension folder](https://image.slidesharecdn.com/browserextension-110115112944-phpapp01/85/Browser-extension-11-320.jpg)
![{ "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](https://image.slidesharecdn.com/browserextension-110115112944-phpapp01/85/Browser-extension-26-320.jpg)
![<script> ... function showPhotos() { var photos = req.responseXML.getElementsByTagName("photo"); for (var i = 0, photo; photo = photos[i]; i++) { var img = document.createElement("image"); img.src = constructImageURL(photo); document.body.appendChild(img); } } // See: http://www.flickr.com/services/api/misc.urls.html function constructImageURL(photo) { return "http://farm" + photo.getAttribute("farm") + ".static.flickr.com/" + photo.getAttribute("server") + "/" + photo.getAttribute("id") + "_" + photo.getAttribute("secret") + "_s.jpg"; } </script> popup.html](https://image.slidesharecdn.com/browserextension-110115112944-phpapp01/85/Browser-extension-29-320.jpg)
Browser extension
- 1. Web browser extension development Chisan Petrisor Laurentiu Stefanache Pavel Cosmin
- 2. What is a browser extension?
- 3. A browser extension is a computer program that extends the functionality of a web browser in some way.
- 4. Technologies used for browser extension development HTML CSS Javascript XML based languages HTML5 API ..and many other technologies
- 5. Structure of an Extension metadata information user interface extension functionality
- 7. Web Developer AdBlock Plus Firebug Delicious
- 8. Folder structure /chrome content locale skin install.rdf chrome.manifest file.xul file.js file.dtd file.properties file.css
- 9. Everything zipped in an .xpi file extention.xpi
- 10. <?xml version="1.0"?> <RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <Description about="urn:mozilla:install-manifest"> <em:id>helloworld@xulschool.com</em:id> <em:name>XUL School Hello World</em:name> <em:description>Welcome to XUL School!</em:description> <em:version>0.1</em:version> <em:creator>Appcoast</em:creator> <em:homepageURL>https://developer.mozilla.org/en/XUL_School</em:homepageURL> <em:type>2</em:type> <!-- Mozilla Firefox --> <em:targetApplication> <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>3.0</em:minVersion> <em:maxVersion>4.0</em:maxVersion> </Description> </em:targetApplication> </Description> </RDF> install.rdf (metadata) Extension files Extension folder
- 11. <Description about="urn:mozilla:install-manifest"> <em:id> [email_address] </em:id> <em:name>XUL School Hello World</em:name> <em:description>Welcome to XUL School!</em:description> <em:version>0.1</em:version> <em:creator>Appcoast</em:creator> <em:homepageURL> https://developer.mozilla.org/en/XUL_School </em:homepageURL> <em:type>2</em:type> … </Description> install.rdf (metadata) Extension files Extension folder
- 12. <Description about="urn:mozilla:install-manifest"> ... <!-- Mozilla Firefox --> <em:targetApplication> <Description> <em:id> {ec8030f7-c20a-464f-9b0e-13a3a9e97384} </em:id> <em:minVersion>3.0</em:minVersion> <em:maxVersion>4.0</em:maxVersion> </Description> </em:targetApplication> </Description> install.rdf (metadata) Extension files Extension folder
- 13. content xulschoolhello jar:chrome/xulschoolhello.jar!/content/ skin xulschoolhello classic/1.0 jar:chrome/xulschoolhello.jar!/skin/ locale xulschoolhello en-US jar:chrome/xulschoolhello.jar!/locale/en-US/ overlay chrome://browser/content/browser.xul chrome://xulschoolhello/content/browserOverlay.xul chrome.maifest (file references) Extension files Extension folder Extension files Extension folder
- 14. <?xml version="1.0"?> <?xml-stylesheet type="text/css" href="chrome://global/skin/" ?> <?xml-stylesheet type="text/css" href="chrome://xulschoolhello/skin/browserOverlay.css" ?> <!DOCTYPE overlay SYSTEM "chrome://xulschoolhello/locale/browserOverlay.dtd"> <overlay id="xulschoolhello-browser-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <script type="application/x-javascript" src="chrome://xulschoolhello/content/browserOverlay.js" /> <stringbundleset id="stringbundleset"> <stringbundle id="xulschoolhello-string-bundle" src="chrome://xulschoolhello/locale/browserOverlay.properties" /> </stringbundleset> <menupopup id="menu_ToolsPopup"> <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloMenu.accesskey;" insertafter="javascriptConsole,devToolsSeparator"> <menupopup> <menuitem id="xulschoolhello-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloItem.accesskey;" oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" /> </menupopup> </menu> </menupopup> </overlay> browserOverlay.xul Extension files content folder
- 15. Extension files Content folder Extension files Content folder Extension files content folder <overlay id="xulschoolhello-browser-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> browserOverlay.xul
- 16. browserOverlay.xul <script type="application/x-javascript" src="chrome://xulschoolhello/content/ browserOverlay.js" /> Extension files content folder
- 17. <menupopup id="menu_ToolsPopup"> <menu id="xulschoolhello-hello-menu" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloMenu.accesskey;" insertafter="javascriptConsole,devToolsSeparator"> <menupopup> <menuitem id="xulschoolhello-hello-menu-item" label="&xulschoolhello.hello.label;" accesskey="&xulschoolhello.helloItem.accesskey;" oncommand="XULSchoolChrome.BrowserOverlay.sayHello(event);" /> </menupopup> </menu> </menupopup> browserOverlay.xul Extension files content folder
- 18. /** * XULSchoolChrome namespace. */ if ("undefined" == typeof(XULSchoolChrome)) { var XULSchoolChrome = {}; }; /** * Controls the browser overlay for the Hello World extension. */ XULSchoolChrome.BrowserOverlay = { /** * Says 'Hello' to the user. */ sayHello : function(aEvent) { let stringBundle = document.getElementById("xulschoolhello-string-bundle"); let message = stringBundle.getString("xulschoolhello.greeting.label"); window.alert(message); } }; browserOverlay.js Extension files content folder
- 19. browserOverlay.dtd <!ENTITY xulschoolhello.hello.label "Hello World "> <!ENTITY xulschoolhello.helloMenu.accesskey "l"> <!ENTITY xulschoolhello.helloItem.accesskey "H"> Extension files locale folder
- 20. browserOverlay.properties xulschoolhello.greeting.label = Hello! Extension files locale folder
- 21. Extension files skin folder Here we put the CSS file for styling the the xul file
- 22. Tools for development Komodo Edit Web developer DOM Inspector JavaScript Debugger
- 23. Developing google chrome extension
- 24. Folder structure / manifest.json popup.html file_name.js * Any file* * optional files
- 25. Now, let's see a simple exemple
- 26. { "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
- 27. <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
- 28. <script> var req = new XMLHttpRequest(); req.open( "GET", "http://api.flickr.com/services/rest/?" + "method=flickr.photos.search&" + "api_key=90485e931f687a9b9c2a66bf58a3861a&" + "text=hello%20world&" + "safe_search=1&" + // 1 is "safe" "content_type=1&" + // 1 is "photos only" "sort=relevance&" + // another good one is "interestingness-desc" "per_page=20", true); req.onload = showPhotos; req.send(null); … </script> popup.html
- 29. <script> ... function showPhotos() { var photos = req.responseXML.getElementsByTagName("photo"); for (var i = 0, photo; photo = photos[i]; i++) { var img = document.createElement("image"); img.src = constructImageURL(photo); document.body.appendChild(img); } } // See: http://www.flickr.com/services/api/misc.urls.html function constructImageURL(photo) { return "http://farm" + photo.getAttribute("farm") + ".static.flickr.com/" + photo.getAttribute("server") + "/" + photo.getAttribute("id") + "_" + photo.getAttribute("secret") + "_s.jpg"; } </script> popup.html
- 30. We can load our extension uppacked or zipped in a .crx file manifes.json .js .html .css .png CRX
- 31. And what's next ?
- 32. Publish your firefox extension https://addons.mozilla.org/en-US/firefox/extensions/
- 33. Publish your chrome extension https://chrome.google.com/extensions/developer/dashboard