Contenu connexe
Similaire à Browser extension (20)
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
- 8. Folder structure /chrome content locale skin install.rdf chrome.manifest file.xul file.js file.dtd file.properties file.css
- 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
- 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
- 21. Extension files skin folder Here we put the CSS file for styling the the xul file
- 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