Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Firefox Extension Development


Published on

Published in: Education
  • Be the first to comment

Firefox Extension Development

  1. 1. Firefox Extension Development<br />
  2. 2. Why Firefox?<br />Performance<br />Security<br />User friendly (ease to use)<br />Security<br />Memory efficiency<br />Extensibility<br />Extension, extension and extensions<br />It has a strong development foundation<br /><br /><br />And many more<br />
  3. 3. Some facts!<br />W3C Web Browser Statistics<br />
  4. 4. Some Interesting add-ons<br />I read BBC Arabic????<br />
  5. 5. Part I. Using Add-on SDK<br />
  6. 6. Firefox profiles<br />You can run Firefox in many different profiles<br />Each profiles has its own configuration<br />Caching<br />Histories<br />Network settings<br />Add-ons<br />Etc<br />For our development we should create a new profile for Firefox.<br />In order to run Firefox in with a specific profile the following command is used<br />> firefox -no-remote -P profileName<br />
  7. 7. Making a translator add-on<br />
  8. 8. SDK commands<br />Go to the add-on folder and type<br />> binactivate.bat<br />Now the add-on sdk is ready.<br />You can now type<br />>cfx docs<br />This will bring you to<br />This documentation has a complete guide on how to make one add-on<br />
  9. 9. Initializing the package<br />Type the following commands to create a folder and move to that folder<br />> mkdirtestaddon<br />> cd testaddon<br />Initialize the configuration of one add-on<br />> cfxinit<br />
  10. 10. Google APIs<br />Google provides us many of its apis so we can use Google’s service<br />You can go to and then go to APIs and Tools.<br />Look for “Language…” and then go to “Translate”<br />We are going to use the google REST service.<br />One example of use is:<br />
  11. 11. Create translator.js<br />Change this to “|vi” if you would like it to be in Vietnamese<br />
  12. 12. In the main.js<br />
  13. 13. Deployment<br />Type the following to deploy it in Firefox and test<br />> cfx run <br />Packaging the add-on, Firefox add-on is actually a zip package with the extension “xpi”<br />Type the following to package the add-on<br />> cfxxpi<br />Drag and drop the xpi file to Firefox to install and run.<br />
  14. 14. <ul><li>Add-on typical structure
  15. 15. Resource Description Framework (RDF)
  16. 16. XML User Interface Language (XUL)
  17. 17. Tabbed Browser
  18. 18. Firefox Interfaces and Services</li></ul>Developing a Firefox Add-On from scratch<br />
  19. 19. Simple structure of an add-on<br />sampleapp/<br />chrome.manifest<br />install.rdf<br />content/<br />sampleapp.js<br />sampleapp.xul<br />somedialog.js<br />somedialog.xul<br />skin/<br />sampleapp.css<br />
  20. 20. chrome.manifest<br />Use to help Firefox to find where to add our xul component<br />Typical manifest file:<br />
  21. 21. Resource Description Framework (RDF)<br />RDF is a language for representing information about resources in the World Wide Web<br />It’s about “Making Statements About Resources”<br />Statement: “Mr. A creates”<br />Subject is “Mr. A”<br />Predicate is “creates”<br />Object is the page (“”)<br />How can we make this as machine-processable<br /><> <> <> .<br />RDF can be written in form of xml.<br />
  22. 22. install.rdf<br />
  23. 23. XML User Interface Language (XUL)<br />Window/Dialog/Overlay<br />Boxes<br />Widgets: label, toolbarbutton, menu, menuitem, contextmenu, etc…<br />
  24. 24. emailsplugin.xul<br />
  25. 25. DOM Inspector<br />Firefox add-on DOM Inspector helps us to inspect the browser chrome://browser/content/browser.xul<br />
  26. 26. Disable XUL Cache<br />Firefox caches some xul so it could work faster<br />During development it’s better that we disable the xul caching:<br />Open Firefox in development profile and type “about:config”<br />Right click > New > boolean<br />Name: nglayout.debug.disable_xul_cache and value false<br />
  27. 27. emailsplugin.css<br />
  28. 28. emailsplugin.js<br />You can go to the following page, it will help you about the “Tabbed Browser”<br />
  29. 29. Option dialog<br />Sometimes, if we need to input some options into your Firefox add-on.<br />That’s the time, you use a xul dialog.<br />
  30. 30. Option Dialog<br />We add the following files<br />optionsDialog.xul<br />optionsDialog.js<br />optionsDialog.css<br />Change the way we add new tab when user clicks the Open Mails button.<br />Make a for loop and open all pages in the option file<br />Add in the install.rdf one line describe about the option dialog:<br /><em:optionsURL>chrome://emailsplugin/content/optionsDialog.xul</em:optionsURL><br />
  31. 31. Filefox IO<br />You can do the IO operation (read/write to file) using Firefox XPCOM component<br />The followings are snippets to:<br />take current directory of the extension<br />read from a file<br />write to a file<br />
  32. 32. Read from a file<br />
  33. 33. Writing to a file<br />
  34. 34. Thank you and QA?<br />Further interests: contact<br />QA?<br />
  35. 35. References<br />Add-on SDK:<br />Google APIs:<br />RDF:<br />XUL: Firefox Programming Book or<br />DOM Inspector:<br />Tabbed browser:<br />IO with Firefox:<br />