Mozilla Firefox Extensions Development Tutorial

1. Mozilla Firefox Extensions Development Tutorial 2007 July, SHIMODA Hiroshi

2. Agenda

3. Chapter 1Firefox architecture and technology Chapter 2The mechanismbehind Extensions Chapter 3Building an Extension

4. Chapter 1 Firefox architecture and technology

5. Firefox is closer to a Web app than a conventional application

6. Firefox HTA DHTML XUL HTML HTML JavaScript JScript JavaScript XPCOM ActiveX CGI Firefox architecture is very similar to web pages that use Dynamic HTML Structure Control Customized Processes

7. Keywords ・HTML ・CSS ・JavaScript ・XPCOM

8. XUL XML-based User-interface Language

9. XML based User Interface Markup Language

10. Creates framework of Firefox GUI

11. <vbox> <hbox> <label value="Make your selection"/> <menulist> <menupopup> <menuitem label="Foo 1" selected="true"/> <menuitem label="Foo 2"/> <menuitem label="Foo 3"/> </menupopup> </menulist> </hbox> <checkbox label="Select items" checked="true"/> <hbox> <label value="Enter text"/> <textbox size="15"/> </hbox> </vbox>

12. Similar to HTML A GUI widget like an HTML form Simplifies and standardizes GUI widgetsthat were difficult to build using DHTML (Drop-down lists, scrollbars, tabs, etc.)‏ Can be used on the web, not just in Firefox http://piro.sakura.ne.jp/latest/blosxom.cgi/mozilla/index.xul

13. HTML-like use of XUL

14. XUL allows a variety of widgets

15. “Logic” is defined rather than “Style” (Color, font size, etc. are defined using CSS, explained later)‏

16. Benefits

17. Read code, Understand logic

18. When defining menus using Java fileMenu = new JMenu(resbundle.getString("fileMenu")); fileMenu.add(new JMenuItem(newAction)): fileMenu.add(new JMenuItem(openAction)): fileMenu.add(new JMenuItem(saveAsAction)): mainMenuBar.add(fileMenu); editMenu = new JMenu(resbundle.getString("editMenu")); editMenu.add(new JMenuItem(undoAction)): editMenu.addSeparator(); editMenu.add(new JMenuItem(cutAction)): editMenu.add(new JMenuItem(pasteAction)): editMenu.add(new JMenuItem(clearAction)): editMenu.addSeparator(); editMenu.add(new JMenuItem(selectAllAction)): mainMenuBar.add(fileMenu); One needs to decipher the code

19. With XUL, one only needs to look <menubar> <menu label="&fileMenu.label;"> <menupopup> <menuitem label="&fileMenu.new.label;"/> <menuitem label="&fileMenu.open.label;"/> <menuitem label="&fileMenu.save.label;"/> </menupopup> </menu> <menu label="&editMenu.label;"> <menupopup> <menuitem label="&editMenu.undo.label;"/> <menuseparator/> <menuitem label="&editMenu.cut.label;"/> <menuitem label="&editMenu.paste.label;"/> <menuitem label="&editMenu.clear.label;"/> <menuseparator/> <menuitem label="&editMenu.selectAll.label;"/> </menupopup> </menu> </menubar>

20. Not as straightforward as WYSIWYG, but much more intuitive than writing conventional programs *WYSIWYG = What You See Is What You Get

21. Summary

22. XUL Specification Resources Mozilla Developer Center (MDC)‏ http://developer.mozilla.org/ XULPlanet.com http://www.xulplanet.com/

24. CSS Cascading Style Sheets

25. Stylesheet language used to describe the presentation of XML documents in an easy to read format #content { font-size: 10pt; border-width: 1pt; border-color: red; border-style: solid; }

26. XUL is also styled using CSS button[type="menu-button"] { -moz-box-align: center; -moz-box-pack: center; margin: 0; border: none; } .button-menu-dropmarker, .button-menubutton-dropmarker { margin: 1px; background-image: url("chrome://global/skin/arrow/arrow-dn.gif"); background-repeat: no-repeat; background-position: center center; min-width:11px; min-height:11px; }

27. Build the framework using XUL Dress it up using CSS

28. Same as building a web page

29. Benefits

30. Clean separation of presentation from application logic

31. Therefore

32. Each part can be altered independently

33. →“Theme”(or “Skin”)‏ of Firefox

34. Summary

36. JavaScript

37. Firefox is controlled by JavaScript

38. Object-oriented prototype-based language corresponding to ECMAScript(ECMA-262)3rd edition http://www.ecma-international.org/publications/ standards/Ecma-262.htm Not related to Java

39. JavaScript in Firefox 2 ・JavaScript 1.7 ECMAScript Edition 3 extended ・E4X （ECMAScript for XML） 　is supported

40. ・Grammar is similar to C (easier to learn)‏ ・Highly flexible ・Untyped variables (almost entirely)‏ ・There is garbage collection ・Not strictly structured like Java 　　　　　　　　　　　etc.

41. Useful when deployed strategically

42. XUL and JavaScript

43. Interoperate using DOM Document Object Model

44. Controls XML through API of JavaScript objects

45. Control through properties var checkbox = document.getElementById('check'); check.checked = true;

46. Control through methods var textbox = document.getElementById('input'); textbox.focus();

47. Create and append XUL elements var button = document.createElement('button'); button.setAttribute('label', 'button'); box.appendChild(button);

48. Useful when dynamically displaying message text

49. Summary