Your SlideShare is downloading. ×
Cliw -  extension development
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Cliw - extension development


Published on

Published in: Education, Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 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://*", "https://*"], "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 extension
  • 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="" xmlns:em=""> <Description about="urn:mozilla:install-manifest"> <em:id></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></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=""> <statusbar id="status-bar"> <statusbarpanel id="my-panel" label="Hello, World" /> </statusbar></overlay>
  • 17. Zipp’ing the Firefox extension .XPI
  • 18. Publishing the Firefox extension
  • 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();"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. Bibliography
  • 26. End of File