Firefox Extension Development


Published on

Published in: Education
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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 />