firefox extension development

Mozilla FirefoxExtensions

DevelopmentTutorial

2009, October FOSS GN09 @ Engineering College BikanerAbhinav Chittora, Google Summer of Code Student,

Xiph.org Foundation 2009

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

XUL

JavaScript

XPCOM

HTML

HTML

JScript

ActiveX

DHTML

HTML

JavaScript

CGI

Structure

Control

CustomizedProcesses

Keywords・HTML・CSS・JavaScript・XPCOM

XULXML-based

User-interfaceLanguage

XML basedUser Interface

Markup Language

Creates frameworkof Firefox GUI

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 Firefoxhttp://sakshama.org/latest/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 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

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

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

2.Mozillazine.orghttp://mozillazine.org/

3.Extension developer toolhttp://ted.mielczarek.org/code/mozilla/ extensionwiz/

XUL Specification Resources

http://developer.mozilla.org/ja/

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

Summary

Application Logic

Presentation

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 editionhttp://www.ecma-international.org/publications/

standards/Ecma-262.htm

Not related to Java

JavaScript in Firefox 2

・JavaScript 1.7ECMAScript 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 properties

var 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

Jscript

Firefox 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 independentframework for componentdevelopment

・Components developedbased on this framework

・Functionality offered bythese 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 functionsin 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 callsXPCOM components written in C++

・C++ callsXPCOM components written in JavaScript

・Java callsXPCOM 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 CSSJavaScript

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

Thanks !Any Query ???

firefox extension development

Technology