mozilla firefox extensions development tutorial
DESCRIPTION
Mozilla Firefox Extensions Development Tutorial. 2007 July, SHIMODA Hiroshi. Agenda. Chapter 1 Firefox architecture and technology Chapter 2 The m echanism behind Extensions Chapter 3 Building an Extension. Chapter 1 Firefox architecture and technology. Firefox is closer to a - PowerPoint PPT PresentationTRANSCRIPT
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!!