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

Firefox extension Development

on

  • 8,537 views

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.

Statistics

Views

Total Views
8,537
Views on SlideShare
8,486
Embed Views
51

Actions

Likes
5
Downloads
143
Comments
2

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

Accessibility

Categories

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.

Cancel

12 of 2 previous next

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
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 ???