Firefox extension Development

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

Agenda

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

Chapter 1 Firefox architecture and technology

Firefox is closer to a Web app than a conventional application

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

Keywords ・HTML ・CSS ・JavaScript ・XPCOM

XUL XML-based User-interface Language

XML based User Interface Markup Language

Creates framework of Firefox GUI

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

HTML-like use of XUL

XUL allows a variety of widgets

“Logic” is defined rather 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 as WYSIWYG, but much more intuitive than writing conventional programs *WYSIWYG = What You See Is What You Get

Summary Application Logic Regular app C++, etc. Web app HTML Firefox XUL

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/

CSS Cascading Style Sheets

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

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

Build the framework using XUL Dress it up using CSS

Same as building a web page

Benefits

Clean separation of presentation from application logic

Therefore

Each part can be altered independently

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

Summary Application Presentation Logic Regular app C++, etc. C++, etc. Web app HTML CSS Firefox XUL CSS

JavaScript

Firefox is controlled 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

XUL and JavaScript

Interoperate using DOM Document Object Model

Controls XML through API 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 when dynamically displaying message text

Summary Application Conditional Presentation Logic tasks Regular app C++, etc. C++, etc. C++, etc. JavaScript Web app HTML CSS Jscript Firefox XUL CSS JavaScript

XPCOM Cross Platform Component Object Model

Is a concept that binds together

Platform independent framework for component development

Components developed based on this framework

Functionality offered by these components

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

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

Performs 3 functions in Firefox

1 Can focus on development while ignoring language differences

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

3 Use the programming language that is most suited 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 advantage of programming language traits and divide tasks

Each component is a black box

In Firefox

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

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

JavaScript and XPCOM

Interoperate using XPConnect

XPConnect Allows 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 is cross-platform (This is it)

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

Review

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

Compare to similar projects

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

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

Issues with developing XUL based applications

There are no WYSIWYG development environments

Lack of documentation (Source code is the documentation)

However

Only a text editor is needed for development

Agile Application Development with XUL!!

Thanks ! Any Query ???

http://www.slideshare.net	43
http://wiki.nhncorp.com	3
http://webcache.googleusercontent.com	1
http://a0.twimg.com	1
https://twimg0-a.akamaihd.net	1

Firefox extension Development

by Abhinav Chittora on Nov 14, 2009

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 49

Statistics

Firefox extension Development — Presentation Transcript