Mozilla Firefox Extensions Development Tutorial

Mozilla FirefoxExtensions

DevelopmentTutorial

2007 July, SHIMODA Hiroshi

Agenda

Chapter 1 Firefox architectureand technology

Chapter 2 The mechanism behind Extensions

Chapter 3 Building an Extension

Chapter 1Firefox architecture

and technology

Firefoxis closer to a

Web appthan a conventional

application

Firefox architecture is very similar to web pages that use Dynamic HTML

Firefox

XULXUL

JavaScriptJavaScript

XPCOMXPCOM

HTA

HTMLHTML

JScriptJScript

ActiveXActiveX

DHTML

HTMLHTML

JavaScriptJavaScript

CGICGI

Structure

Control

CustomizedProcesses

Keywords・ HTML・ CSS・ JavaScript・ XPCOM

XULXML-based

User-interfaceLanguage

XML basedUser Interface

Markup Language

Creates frameworkof Firefox GUI

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

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 Firefoxhttp://piro.sakura.ne.jp/latest/blosxom.cgi/mozilla/index.xul

HTML-like use of XUL

XUL allows a variety of widgets

“Logic” is definedrather than “Style”

(Color, font size, etc. are defined using CSS, explained later)

Benefits

Read code,Understand logic

When defining menus using JavafileMenu = 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

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>

Not as straightforward asWYSIWYG, but much more

intuitive than writingconventional programs*WYSIWYG = What You See Is What You Get

Summary

Application Logic

Regular app C++, etc.

Web app HTML

Firefox XUL

Mozilla Developer Center (MDC)http://developer.mozilla.org/

XULPlanet.comhttp://www.xulplanet.com/

XUL Specification Resources

CSSCascading

StyleSheets

Stylesheet language used to describethe presentation of XML documents

in an easy to read format

#content { font-size: 10pt; border-width: 1pt; border-color: red; border-style: solid;}

XUL is also styled using CSSbutton[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;}

Build the framework using XULDress it up using CSS

Same as buildinga web page

Benefits

Clean separation of presentation from application logic

Therefore

Each part can bealtered independently

→“Theme”(or “Skin”) of Firefox

SummaryApplication

LogicPresentation

Regular app C++, etc. C++, etc.

Web app HTML CSS

Firefox XUL CSS

JavaScript

Firefox iscontrolled by

JavaScript

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

JavaScript in Firefox 2

・ JavaScript 1.7 ECMAScript Edition 3

extended

・ E4X （ ECMAScript for XML ） is supported

・ Grammar is similar to C (easier to learn)

・ Highly flexible

・ Untyped variables (almost entirely)

・ There is garbage collection

・ Not strictly structured like Java

etc.

Useful when deployed

strategically

XULand

JavaScript

DOMDocument

ObjectModel

Interoperate using

Controls XML throughAPI of

JavaScript objects

Control through propertiesvar checkbox = document.getElementById('check');check.checked = true;

Control through methods

var textbox = document.getElementById('input');textbox.focus();

Create and append XUL elements

var button = document.createElement('button');button.setAttribute('label', 'button');box.appendChild(button);

Useful whendynamically displaying

message text

Summary

Application Logic

PresentationConditional

tasks

Regular app C++, etc. C++, etc. C++, etc.

Web app HTML CSSJavaScript

JscriptFirefox XUL CSS JavaScript

XPCOMCross

PlatformComponent

ObjectModel

Is a concept that binds together

Platform independent framework

for component development

Componentsdeveloped based on

this framework

Functionalityoffered by

these components

・ Platform independent framework for component development

・ Components developed based on this framework

・ Functionality offered by these components

XPCOM examplensIFile::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 ignoreddepending on the environment

Performs 3 functions in Firefox

1Can focus on development

while ignoringlanguage differences

2Absorbs platform

dependent differences

Standardized API to handlemultiple platforms→Simplifies Firefox development

3Use the programming language

that is mostsuited to the task at hand

・ JavaScript calls XPCOM components written in C++

・ C++ calls XPCOM components written in JavaScript

・ Java calls XPCOM components written in C++

...

Take advantageof programminglanguage traits

and divide tasks

Each componentis a black box

InFirefox

・ If speed is necessary

・ If the platform is directly accessed

Use C++

Development Complexity

Need to Compile

Platform dependency

Execution Speed

JavaScript Simple No Low Slow

C++ Complex Yes High Fast

JavaScriptand

XPCOM

Interoperate using

XPConnect

XPConnectAllows XPCOM to be accessed from JavaScript

Example:Create a temporary folder by calling XPCOM from JavaScript

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);}

Benefits

It iscross-platform

(This is it)

Summary

Application Logic

Presentation

Conditional tasks

Specialized tasks

Regular app

C++, etc.

C++, etc.

C++, etc. COM .NET Framework

Web app HTML CSS JavaScript Jscript

ActiveX CGI script

Firefox XUL CSS JavaScript XPCOM

Review

Role of each technology in Firefox

Defines presentation

Controls all parts

Builds architectural framework

Black box for specialized tasks

Compare tosimilar projects

Logic PresentationConditional

tasksSpecialized

tasks

Firefox XUL CSS JavaScript XPCOM

Adobe AIR HTML CSS JavaScript Flash

Not flashy but it is solid

Platform compatibility

Platform dependency

Capable of flashy

tasksStandard

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

Issues withdeveloping XUL

based applications

There are no WYSIWYGdevelopment environments

Lack of documentation

(Source code is the documentation)

However

Only a text editoris needed fordevelopment

AgileApplication

Developmentwith XUL!!