firefox extensions

Document Sample
firefox extensions Powered By Docstoc
					Firefox Extensions
Shane Caraveo, Sr. Developer, ActiveState
What are they, and why would you use
Technology roundup (all the bits that make
the bytes)
Step by step example of an extension
Dev Tools (and the lack thereof)
30 Second Extension

  Use XPIStubs and forget half of what you
  need to know!
    Simple config/make to generate xpi
    Tempates to create toolbars, sidebars and
    Still needs a bit of love
Demo XPIStubs
Thank you for coming to my talk!
   Now What?
 RDF           DOM                Chrome
       XRE            XulRunner            IDL
Overlay         GRE               XForms
  Javascript              SVG              C++
                 Toolkit      XPCOM
         XBL          XFT      DTD Ruby
 PHP        XPInstall
                             CSS         CView
                 Python            Plugin
Venkman                      Perl
         XPFE        DOM Inspector
All you need to know to get started is....

    XPIStubs to get a quick stub
    XUL and Javascript for UI for reference

                    ...It’s as easy as HTML
What can Extensions do?
  Add new features to existing applications
   blogging, dev tools, news, spell check and more
  Custom interfaces for websites, GMail,Yahoo! Toolbar, TinyURL
  Modify DOM in the browser
   GreaseMonkey, Ad blockers
Why use Firefox? a development platform
  Cross platform applications
  Add your content to the users browser
  Provide the user with a better experience
  through client side customization
  Easier than many alternatives
  because it’s cool
 “XML User interface Language”
   layout and base widget set
  Uses CSS for styling
  Event handling via Javascript and command sets

 May be loaded remotely or locally

 Elements are widgets
 Attributes can define options, look and feel
 (via CSS) and provide event handlers
 Most widgets are actually defined in XBL
 Layout controlled by boxes
Chrome Packages
  The “package” structure for Mozilla
  Multiple chrome packages allowed
  RDF files contain registration of packages
  Command Line: firefox -chrome chrome://....
  XPI supports installing chrome packages
Chrome URLs
  Content: XUL, XBL & Javascript

  Skin: CSS and images

  Locale: Language files (DTD, properties)
   Transparent access to locale specific directories
Event Handling
  Basic event handlers same as in HTML
   onclick, onmousemove, etc.
   Follows W3C DOM Events specification

  event object provided to all events
  Two phase event system, capture and
  Dynamic event handling via Event Listeners
Command Events
  Possibly the most important event
  Keys can be bound to commands
  Commands can update menu status
  Commands can be used from multiple
  oncommand attribute can catch command
Command Handlers
  The command element defines commands
  observes attribute binds an elements
  command event handler to a command
  Commands can be enabled/disabled, and
  command observers inherit that state
  Elements can also use oncommand directly

  Broadcasters are commands that propagate
  its attributes to the command observers
  onbroadcast event sent to observers when
  changes occur on the broadcaster element

  Command sets can call on controllers in
  response to events (eg. focus)
  Controllers are Javascript classes that
  updates state for commands
  Controllers can be attached to any element
 Follows W3C DOM level 2 (some level 3)
 DOM is used to store XUL nodes (and
 accessed by Javascript (or other XPCOM
 Every XUL element has a base set of
 attributes, properties...and yes, member
RDF and Templates
  Allows you to define a template for
  displaying RDF data
  Harder to use, but *VERY* cool
  You can have non-RDF “RDF data
  Rules allow you to limit or modify data
  being selected for presentation
XBL Bindings
  XML Binding Language
  Allows you to create new widgets or modify
  existing widgets
  XBL allows inheritance at the XML level
  Provides for event handlers and methods
  Can implement XPCOM intefaces
  Bound to XUL through CSS
 Cross Platform Components
 In C++, XBL or Javascript
 Also in scripting languages (PyXPCOM)
 Components are global to all chrome
 Possibly the most important part of GRE
XPI: Cross Platform Installer
   Packaged in JAR files
   Uses install script for Mozilla, XML file for
   Uninstaller on Firefox
   Uses RDF extensively
   xpistubs simplifies Installer creation
Other Stuff

  CSS and Locales
  Windows, Wizards and Dialogs
  Native Open/Save Dialogs (not linux)
Dev Tools
  Best Bet...Notepad...err...Komodo
  DOM Inspector
  cview (XPCOM inspector)
  Venkman (Javascript debugger)
Javascript and XUL

  XULUnit (XUL Unit testing) References and Tutorials
Resources (lxr, bugzilla, dev area’s)
    Thank you!