Learn how to make Firefox extensions. I am sure it will help you.

1. Mozilla Firefox
Extensions
Development
Tutorial
2009, October FOSS GN09 @ Engineering College Bikaner
Abhinav Chittora, Google Summer of Code Student,
Xiph.org Foundation 2009

2. Agenda

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

4. Chapter 1
Firefox architecture
and technology

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

6. Firefox architecture is very similar to
web pages that use Dynamic HTML
Firefox HTML DHTML
Structure XUL HTML HTML
Control JavaScript JScript JavaScript
Customized XPCOM ActiveX CGI
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 widgets
that were difficult to build using DHTML
(Drop-down lists, scrollbars, tabs, etc.)
Can be used on the web, not just in Firefox
http://sakshama.org/latest/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
Application
Logic
Regular app C++, etc.
Web app HTML
Firefox XUL

22. XUL Specification Resources
1.Mozilla Developer Center (MDC)
http://developer.mozilla.org/
2.Mozillazine.org
http://mozillazine.org/
3.Extension developer tool
http://ted.mielczarek.org/code/mozilla/
extensionwiz/

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
Application
Presentation
Logic
Regular app C++, etc. C++, etc.
Web app HTML CSS
Firefox XUL CSS

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
Application Conditional
Presentation
Logic tasks
Regular app C++, etc. C++, etc. C++, etc.
JavaScript
Web app HTML CSS
Jscript
Firefox XUL CSS JavaScript

51. XPCOM
Cross
Platform
Component
Object
Model

52. Is a concept
that binds together

53. Platform independent
framework
for component development

54. Components
developed based on
this framework

55. Functionality
offered by
these components

56. ・ Platform independent
framework for component
development
・Components developed
based on this framework
・ Functionality offered by
these components

57. XPCOM example
nsIFile::create(
in unsigned long type,
in unsigned long permissions
)
・Creates a file
・Has two parameters
File type (File or Directory)
Permission (UNIX-style)
=> Permission value is ignored
depending on the environment

58. Performs 3
functions
in Firefox

59. 1
Can focus on development
while ignoring
language differences

60. 2
Absorbs platform
dependent differences
Standardized API to handle
multiple platforms
→Simplifies Firefox development

61. 3
Use the programming language
that is most
suited to the task at hand

62. ・JavaScript calls
XPCOM components written in C++
・C++ calls
XPCOM components written in JavaScript
・Java calls
XPCOM components written in C++
...

63. Take advantage
of programming
language traits
and divide tasks

64. Each component
is a black box

65. In
Firefox

66. ・ speed is necessary
If
・ the platform is
If
directly accessed
Use C++

67. Development Need to Platform Execution
Complexity Compile dependency Speed
JavaScript Simple No Low Slow
C++ Complex Yes High Fast

68. JavaScript
and
XPCOM

69. Interoperate using
XPConnect

70. XPConnect
Allows XPCOM to
be accessed from
JavaScript

71. Example:
Create a temporary
folder by calling
XPCOM from
JavaScript

72. const nsILocalFile = Components.interfaces.nsILocalFile;
var file = Components.classes['@mozilla.org/file/local;1']
.createInstance(nsILocalFile);
file.initWithPath('C:');
file.append('temp');
if (!file.exists()) {
file.create(nsILocalFile.DIRECTORY_TYPE, 0755);
}

73. Benefits

74. It is
cross-platform
(This is it)

75. Summary
Applicatio Presentati Conditional
Specialized tasks
n Logic on tasks
Regular C++, C++, COM .NET
C++, etc. Framework
app etc. etc.
JavaScript ActiveX CGI
Web app HTML CSS Jscript script
Firefox XUL CSS JavaScript XPCOM

76. Review

77. Role of each technology in Firefox
Defines presentation
Controls all parts
Builds architectural framework
Black box for
specialized tasks

79. Compare to
similar projects

80. Conditional Specialized
Logic Presentation
tasks tasks
Firefox XUL CSS JavaScript XPCOM
Adobe AIR HTML CSS JavaScript Flash

81. Capable
Platform Platform
of flashy Standard
compatibility dependency
tasks
Machine code High High High -
Java Low Low High Open
Flash/AIR Low Low High Closed
Silverlight ? Low High Closed
XUL Modestly high Low Slight Open
Not flashy but it is solid

83. Issues with
developing XUL
based applications

84. There are no
WYSIWYG
development
environments

85. Lack of
documentation
(Source code is the
documentation)

86. However

87. Only a text editor
is needed for
development

88. Agile
Application
Development
with XUL!!

89. Thanks !
Any Query ???