Successfully reported this slideshow.
Mozilla Firefox
           Extensions
          Development
            Tutorial
2009, October FOSS GN09 @ Engineering Col...
Agenda
Chapter 1   Firefox architecture
            and technology
Chapter 2   The mechanism behind
            Extensions
Chapte...
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  ...
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" ...
Similar to HTML
A GUI widget like an HTML form
Simplifies and standardizes GUI widgets
that were difficult to build using ...
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...
With XUL, one only needs to look
  <menubar>
    <menu label="&fileMenu.label;">
      <menupopup>
        <menuitem label...
Not as straightforward as
WYSIWYG, but much more
   intuitive than writing
  conventional programs
  *WYSIWYG = What You S...
Summary
              Application
                Logic
Regular app    C++, etc.

 Web app        HTML

  Firefox        X...
XUL Specification Resources
 1.Mozilla Developer Center (MDC)
 http://developer.mozilla.org/

 2.Mozillazine.org
 http://m...
CSS
Cascading
  Style
 Sheets
Stylesheet language used to describe
the presentation of XML documents
      in an easy to read format
        #content {
...
XUL is also styled using CSS
button[type="menu-button"] {
  -moz-box-align: center;
  -moz-box-pack: center;
  margin: 0;
...
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.   ...
JavaScript
Firefox is
controlled by
 JavaScript
Object-oriented prototype-based language
corresponding to
ECMAScript(ECMA-262)3rd edition
 http://www.ecma-international.o...
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 collect...
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...
Useful when
dynamically displaying
    message text
Summary
              Application                Conditional
                          Presentation
                Logic ...
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 o...
XPCOM example
nsIFile::create(
  in unsigned long type,
  in unsigned long permissions
)

・Creates a file
・Has two paramet...
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
   XP...
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     Sim...
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']
      ...
Benefits
It is
cross-platform
  (This is it)
Summary
          Applicatio   Presentati   Conditional
                                                  Specialized task...
Review
Role of each technology in Firefox

          Defines presentation


              Controls all parts


                  ...
Compare to
similar projects
Conditional   Specialized
            Logic   Presentation
                                      tasks         tasks
 Fire...
Capable
                 Platform       Platform
                                          of flashy   Standard
          ...
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 ???
Firefox extension Development
Firefox extension Development
Firefox extension Development
Firefox extension Development
Firefox extension Development
Upcoming SlideShare
Loading in …5
×

Firefox extension Development

7,709 views

Published on

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

Published in: Technology

Firefox extension Development

  1. 1. Mozilla Firefox Extensions Development Tutorial 2009, October FOSS GN09 @ Engineering College Bikaner Abhinav Chittora, Google Summer of Code Student, Xiph.org Foundation 2009
  2. 2. Agenda
  3. 3. Chapter 1 Firefox architecture and technology Chapter 2 The mechanism behind Extensions Chapter 3 Building an Extension
  4. 4. Chapter 1 Firefox architecture and technology
  5. 5. Firefox is closer to a Web app than a conventional application
  6. 6. 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
  7. 7. Keywords ・HTML ・CSS ・JavaScript ・XPCOM
  8. 8. XUL XML-based User-interface Language
  9. 9. XML based User Interface Markup Language
  10. 10. Creates framework of Firefox GUI
  11. 11. <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>
  12. 12. 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
  13. 13. HTML-like use of XUL
  14. 14. XUL allows a variety of widgets
  15. 15. “Logic” is defined rather than “Style” (Color, font size, etc. are defined using CSS, explained later)
  16. 16. Benefits
  17. 17. Read code, Understand logic
  18. 18. 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
  19. 19. 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>
  20. 20. Not as straightforward as WYSIWYG, but much more intuitive than writing conventional programs *WYSIWYG = What You See Is What You Get
  21. 21. Summary Application Logic Regular app C++, etc. Web app HTML Firefox XUL
  22. 22. 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/
  23. 23. CSS Cascading Style Sheets
  24. 24. 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; }
  25. 25. 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; }
  26. 26. Build the framework using XUL Dress it up using CSS
  27. 27. Same as building a web page
  28. 28. Benefits
  29. 29. Clean separation of presentation from application logic
  30. 30. Therefore
  31. 31. Each part can be altered independently
  32. 32. →“Theme”(or “Skin”) of Firefox
  33. 33. Summary Application Presentation Logic Regular app C++, etc. C++, etc. Web app HTML CSS Firefox XUL CSS
  34. 34. JavaScript
  35. 35. Firefox is controlled by JavaScript
  36. 36. 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
  37. 37. JavaScript in Firefox 2 ・JavaScript 1.7 ECMAScript Edition 3 extended ・E4X ・ECMAScript for XML・ is supported
  38. 38. ・Grammar is similar to C (easier to learn) ・Highly flexible ・Untyped variables (almost entirely) ・There is garbage collection ・Not strictly structured like Java etc.
  39. 39. Useful when deployed strategically
  40. 40. XUL and JavaScript
  41. 41. Interoperate using DOM Document Object Model
  42. 42. Controls XML through API of JavaScript objects
  43. 43. Control through properties var checkbox = document.getElementById('check'); check.checked = true;
  44. 44. Control through methods var textbox = document.getElementById('input'); textbox.focus();
  45. 45. Create and append XUL elements var button = document.createElement('button'); button.setAttribute('label', 'button'); box.appendChild(button);
  46. 46. Useful when dynamically displaying message text
  47. 47. Summary Application Conditional Presentation Logic tasks Regular app C++, etc. C++, etc. C++, etc. JavaScript Web app HTML CSS Jscript Firefox XUL CSS JavaScript
  48. 48. XPCOM Cross Platform Component Object Model
  49. 49. Is a concept that binds together
  50. 50. Platform independent framework for component development
  51. 51. Components developed based on this framework
  52. 52. Functionality offered by these components
  53. 53. ・ Platform independent framework for component development ・Components developed based on this framework ・ Functionality offered by these components
  54. 54. 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
  55. 55. Performs 3 functions in Firefox
  56. 56. 1 Can focus on development while ignoring language differences
  57. 57. 2 Absorbs platform dependent differences Standardized API to handle multiple platforms →Simplifies Firefox development
  58. 58. 3 Use the programming language that is most suited to the task at hand
  59. 59. ・JavaScript calls XPCOM components written in C++ ・C++ calls XPCOM components written in JavaScript ・Java calls XPCOM components written in C++ ...
  60. 60. Take advantage of programming language traits and divide tasks
  61. 61. Each component is a black box
  62. 62. In Firefox
  63. 63. ・ speed is necessary If ・ the platform is If directly accessed Use C++
  64. 64. Development Need to Platform Execution Complexity Compile dependency Speed JavaScript Simple No Low Slow C++ Complex Yes High Fast
  65. 65. JavaScript and XPCOM
  66. 66. Interoperate using XPConnect
  67. 67. XPConnect Allows XPCOM to be accessed from JavaScript
  68. 68. Example: Create a temporary folder by calling XPCOM from JavaScript
  69. 69. 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); }
  70. 70. Benefits
  71. 71. It is cross-platform (This is it)
  72. 72. 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
  73. 73. Review
  74. 74. Role of each technology in Firefox Defines presentation Controls all parts Builds architectural framework Black box for specialized tasks
  75. 75. Compare to similar projects
  76. 76. Conditional Specialized Logic Presentation tasks tasks Firefox XUL CSS JavaScript XPCOM Adobe AIR HTML CSS JavaScript Flash
  77. 77. 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
  78. 78. Issues with developing XUL based applications
  79. 79. There are no WYSIWYG development environments
  80. 80. Lack of documentation (Source code is the documentation)
  81. 81. However
  82. 82. Only a text editor is needed for development
  83. 83. Agile Application Development with XUL!!
  84. 84. Thanks ! Any Query ???

×