• Save
Cliw -  extension development
Upcoming SlideShare
Loading in...5

Like this? Share it with your network


Cliw - extension development






Total Views
Views on SlideShare
Embed Views



1 Embed 5

http://cliw-eustudent.appspot.com 5


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

Cliw - extension development Presentation Transcript

  • 1. Cojocaru Victor-George 3B
  • 2. browser extensionsare...
  • 3. computer programs that givesthe browser new functionalities
  • 4. Extension developing tools Web developer JavaScript Debugger DOM Inspector Komodo Edit
  • 5. Some of the technologies used indeveloping browser extensions  CSS/CSS3  HTML/HTML5  JavaScript  XML  and so on…
  • 6. Getting Started…
  • 7. The general structure of anExtension  metadata information  user interface extension functionality
  • 8. Chrome ExtensionsEach extension has its own folder, and therefore a Chromeext. folder looks like this : My_Extension manifest.json js_file.js other_files popup.html (optional) (optional)
  • 9. Note The manifest.json file gives information about theextension, such as the most important files and thecapabilities that the extension might use.Example :{ "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" }}
  • 10. Zipp’ing the Chrome extensionWe can either load our extension unpacked or using thezipped form - the .crx file js_file.js (optional) popup.html manifest.json other_files (optional) .CRX
  • 11. Publishing the chrome extensionhttps://chrome.google.com/extensions/developer/dashboard
  • 12. install.rdf Firefox Extensions The folder structure : My_Extension /chrome install.rdf chrome.manifest /content /locale /skin file.xul language file.css files image file.js files (opt)
  • 13. The files install.rdf : provides information about the extension chrome.manifest - maps out the file/structure layout of the extension for Firefox /chrome  /content : contains the extensions XUL and JavaScript Files  file.xul : the XML that creates the layout of the extension  file.js : the JavaScript that manages the action of each extension object  /locale : contains language files  /skin : contains images and CSS to control extension object layout  file.css - a CSS file controlling presentation, just like a website  file.png - image
  • 14. The files<?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>sample@example.net</em:id> <em:version>1.0</em:version> <em:type>2</em:type> <!-- Target Application this extension can install into, with minimum and maximum supported versions. --> <em:targetApplication> install.rdf <Description> <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id> <em:minVersion>1.5</em:minVersion> <em:maxVersion>4.0.*</em:maxVersion> </Description> </em:targetApplication> <!-- Front End MetaData --> <em:name>sample</em:name> <em:description>A test extension</em:description> <em:creator>Your Name Here</em:creator> <em:homepageURL>http://www.example.com/</em:homepageURL> </Description></RDF>
  • 15. The files XUL ??XML-based User-Interface Language that lets you buildfeature-rich cross platform applications that can runconnected or disconnected from the Internet.
  • 16. XUL file - example<?xml version="1.0"?><overlay id="sample" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <statusbar id="status-bar"> <statusbarpanel id="my-panel" label="Hello, World" /> </statusbar></overlay>
  • 17. Zipp’ing the Firefox extension .XPI
  • 18. Publishing the Firefox extensionhttps://addons.mozilla.org/en-US/firefox/extensions/
  • 19. Google Chrome Demo
  • 20. { "name": "Bookmark", "description": "Adds the current page to my bookmarking system.", "version": "1.0", "background_page": "background.html", "permissions": [ "tabs", "http://*/*", "https://*/*" ], "browser_action": { "default_title": "Bookmark This Page", "default_icon": "icon.png", "popup": "popup.html" } } manifest.json
  • 21. // This callback function is called when the content script has been // injected and returned its results function onPageInfo(o) { document.getElementById("title").value = o.title; document.getElementById("url").value = o.url; document.getElementById("summary").innerText = o.summary; } // POST the data to the server using XMLHttpRequest function addBookmark(f) { var req = new XMLHttpRequest(); req.open("POST", "http://mywebappurl/do_add_bookmark/", true); var params = "title=" + document.getElementById("title").value + "&url=" + document.getElementById("url").value + "&summary=" + document.getElementById("summary").value + "&tags=" + document.getElementById("tags").value; req.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); req.setRequestHeader("Content-length", params.length); req.setRequestHeader("Connection", "close"); req.send(params); req.onreadystatechange = function() { // If the request completed, close the extension popup if (req.readyState == 4) if (req.status == 200) window.close(); popup.html }; return false; } // Call the getPageInfo function in the background page, passing in // our onPageInfo function as the callback window.onload = function() { var bg = chrome.extension.getBackgroundPage(); bg.getPageInfo(onPageInfo); }
  • 22. <script> // Array to hold callback functions var callbacks = []; // This function is called onload in the popup code function getPageInfo(callback) { // Add the callback to the queue callbacks.push(callback); // Injects the content script into the current page chrome.tabs.executeScript(null, { file: "content_script.js" }); }; // Perform the callback when a request is received from the content script chrome.extension.onRequest.addListener(function(request) { // Get the first callback in the callbacks array // and remove it from the array var callback = callbacks.shift(); // Call the callback function callback(request); }); </script> background.html
  • 23. // Object to hold information about the current page var pageInfo = { "title": document.title, "url": window.location.href, "summary": window.getSelection().toString() }; // Send the information back to the extension chrome.extension.sendRequest(pageInfo); content_script.js
  • 24. After we have all there files in one folder, then we will load the extension as follows : Bring up the extensions management page by clicking the wrench icon and choosing Tools > Extensions. If Developer mode has a + by it, click the + to add developer information to the page. The + changes to a -, and more buttons and information appear. Click the Load unpacked extension button. A file dialog appears. In the file dialog, navigate to your extensions folder and click OK.And there you have it !
  • 25. Bibliographyhttp://en.wikipedia.org/wiki/Add-on_%28Mozilla%29#Extension_technologies.5B1.5Dhttp://code.google.com/chrome/extensions/overview.htmlhttp://markashleybell.com/articles/building-a-simple-google-chrome-extensionhttp://code.google.com/chrome/extensions/getstarted.htmlhttp://davidwalsh.name/firefox-extension-templatehttps://developer.mozilla.org/en/Chrome_Registrationhttp://kb.mozillazine.org/Getting_started_with_extension_development#hello.xul
  • 26. End of File