Cojocaru Victor-George                    3B
browser extensionsare...
computer programs that givesthe browser new functionalities
Extension developing tools     Web developer  JavaScript Debugger    DOM Inspector      Komodo Edit
Some of the technologies used indeveloping browser extensions          CSS/CSS3          HTML/HTML5          JavaScript...
Getting Started…
The general structure of anExtension  metadata information  user interface extension functionality
Chrome ExtensionsEach extension has its own folder, and therefore a Chromeext. folder looks like this :                   ...
Note  The manifest.json file gives information about theextension, such as the most important files and thecapabilities th...
Zipp’ing the Chrome extensionWe can either load our extension unpacked or using thezipped form - the .crx file            ...
Publishing the chrome extensionhttps://chrome.google.com/extensions/developer/dashboard
install.rdf                                 Firefox Extensions              The folder structure :                        ...
The files install.rdf : provides information about the extension chrome.manifest - maps out the file/structure layout of...
The files<?xml version="1.0"?><RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"  xmlns:em="http://www.mozilla.org/2...
The files                          XUL ??XML-based User-Interface Language that lets you buildfeature-rich cross platform ...
XUL file - example<?xml version="1.0"?><overlay id="sample"   xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is....
Zipp’ing the Firefox extension            .XPI
Publishing the Firefox extensionhttps://addons.mozilla.org/en-US/firefox/extensions/
Google Chrome    Demo
{        "name": "Bookmark",        "description": "Adds the current page to my bookmarking system.",        "version": "1...
// This callback function is called when the content script has been      // injected and returned its results      functi...
<script>     // Array to hold callback functions     var callbacks = [];     // This function is called onload in the popu...
// Object to hold information about the current page   var pageInfo = {      "title": document.title,      "url": window.l...
After we have all there files in one folder, then we will load the extension as follows : Bring up the extensions managem...
Bibliographyhttp://en.wikipedia.org/wiki/Add-on_%28Mozilla%29#Extension_technologies.5B1.5Dhttp://code.google.com/chrome/e...
End of File
Cliw -  extension development
Upcoming SlideShare
Loading in...5
×

Cliw - extension development

1,075

Published on

Published in: Education, Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,075
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Cliw - extension development

  1. 1. Cojocaru Victor-George 3B
  2. 2. browser extensionsare...
  3. 3. computer programs that givesthe browser new functionalities
  4. 4. Extension developing tools Web developer JavaScript Debugger DOM Inspector Komodo Edit
  5. 5. Some of the technologies used indeveloping browser extensions  CSS/CSS3  HTML/HTML5  JavaScript  XML  and so on…
  6. 6. Getting Started…
  7. 7. The general structure of anExtension  metadata information  user interface extension functionality
  8. 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. 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. 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. 11. Publishing the chrome extensionhttps://chrome.google.com/extensions/developer/dashboard
  12. 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. 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. 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. 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. 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. 17. Zipp’ing the Firefox extension .XPI
  18. 18. Publishing the Firefox extensionhttps://addons.mozilla.org/en-US/firefox/extensions/
  19. 19. Google Chrome Demo
  20. 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. 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. 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. 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. 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. 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. 26. End of File

×