• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Firefox extension Development

Firefox extension Development



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

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



Total Views
Views on SlideShare
Embed Views



6 Embeds 51

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



Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.


12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    Firefox extension Development Firefox extension Development Presentation Transcript

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