1. Firefox Addon development tutorial 谢烜 xxie@mozilla.com 2011-7-4

2. Mozilla Corporation3/15/2011 What we should learn Learn what extension are, what they can do, the staff they are made of Configure your development environment Make an extension Package and test it

3. Mozilla Corporation3/15/2011 Required Gears A Linux Mac or Windows machine A terminal application(Gnome Terminal, Terminal, Command Prompt) A text editor(Notpad++, TextEdit, Komodo Edit, Vim or Emacs) A zip archiver (zip or 7-zip) Basic knowledge of HTML CSS and JavaScript

4. Mozilla Corporation3/15/2011 What is an extension? A package of files that modify Firefox's appearance and/or behavior In the zip file archive format (but in.xpi file extension) Two manifesto file describe content Distribute, browse and search via AMO Install, manage uninstall via Add-ons window

5. Mozilla Corporation3/15/2011 What can they do? Add and remove interface elements (menu, button, etc.) Modify appearance of elements (color, border, icon, etc.) Listen and response to events (page loads, mouse clicks, etc.) Access modules and components (file manipulation,networking,data storage,etc.) Add their own modules and components and override the build-in ones

6. Mozilla Corporation3/15/2011 Content vs. Chrome Content is a webpage that Firefox load in browser tabs. Chrome is Firefox user interface (i.e. everything around the browser tabs, including other windows like preferences and add-ons)

7. Mozilla Corporation3/15/2011 Why use chrome? Chrome privilege are the ability to do anything that Firefox can do. Extensions are part of chrome and have chrome privilege!

8. Mozilla Corporation3/15/2011 Extension building blocks XUL and XHTML for structure, widgets CSS for appearance and style JavaScript for behavior DTDs and properties for localization JavaScript and C++ for modules/components

9. Mozilla Corporation3/15/2011 XUL XML Interface Language XML vocabulary for building interfaces Like HTML, but for application Tags like Different layout(box) model Much of Firefox’s interface is built with XUL You can mix XUL and XHTML

10. Mozilla Corporation3/15/2011 Develop environment Firefox profile (firefox -P) Developer preferences Developer extensions Extension dictionary

11. Mozilla Corporation3/15/2011 Profiles A hidden feature of Firefox Directory that store user’s data(preferences, bookmarks, saved passwords, etc.) Extensions are profile-specific Use develop profile to develop your add-on and default profile for normal use

12. Mozilla Corporation3/15/2011 How to use profile Use “–P” argument, on Windows platform, add this argument to shortcut, on Linux and Mac, use command line. Use two profiles at the same time, use “–no-remote” argument or add “MOZ- NO-REMOTE=1” to environment variable. Use “-console” to display console window.

13. Mozilla Corporation3/15/2011 Developer preferences Make it easier for developer Type “about:config” at url bar extensions.logging.enable(true): show logging error in Error Console javascript.opitions.showInConsole(true): show JavaScript error in Error Console browser.dom.window.dump.enable(true) :use “dump” function at dom context, and show information at console window

14. Mozilla Corporation3/15/2011 Developer Extension DOM Inspector Console² Firebug Chrome Bug Rainbow XPCOM Viewer SQLite Manager

15. Mozilla Corporation3/15/2011 The install manifest Tell Firefox about the extension(its name, versions, compatible Firefox versions, etc.) Written in RDF, an XML vocabulary. Must be at the top level of extension directory Must be called install.rdf

16. Mozilla Corporation3/15/2011 The chrome regestration Tell Firefox about the location of source code files and resource files. Also tell Firefox how they add themselves to Firefox Must be at the top level of extension directory Must be called chrome.manifest

17. Mozilla Corporation3/15/2011 Install your Extension Link file method for developer Create a text file inside the extensions/ sub directory of your develop profiles The name of the file must be the ID of your extension, no suffix! The content of the file must a single line specify the path of your extensions directory D:\xxie\helloworld /home/xxie/helloworld

18. Mozilla Corporation3/15/2011 Show How to write an addon Write a XUL Write a JavaScript Include css file Include DTD file Include property file

19. Mozilla Corporation3/15/2011 References https://developer.mozilla.org/en/Setting_up_extensio n_development_environment https://developer.mozilla.org/en/Setting_up_extensio n_development_environment https://developer.mozilla.org https://wiki.mozilla.org http://mxr.mozilla.org https://addons.mozilla.org/en- US/developers https://addons.mozilla.org/en- US/developers http://www.google.com/ https://developer.mozilla.org/en/JavaScrip t/Guide https://developer.mozilla.org/en/JavaScrip t/Guide