Docstoc

firefox extensions

Document Sample
firefox extensions Powered By Docstoc
					Firefox Extensions
Shane Caraveo, Sr. Developer, ActiveState
      ShaneC@ActiveState.com

      blogs.activestate.com
                      Agenda
What are they, and why would you use
them
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
    applications.
    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
                      XUL
  Javascript              SVG              C++
                 Toolkit      XPCOM
         XBL          XFT      DTD Ruby
 PHP        XPInstall
                             CSS         CView
      XPConnect
                 Python            Plugin
Venkman                      Perl
         XPFE        DOM Inspector
Breath....
All you need to know to get started is....


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

                    ...It’s as easy as HTML
mozilla.org
What can Extensions do?
  Add new features to existing applications
   blogging, dev tools, news, spell check and more
  Custom interfaces for websites
   del.icio.us, GMail,Yahoo! Toolbar, TinyURL
  Modify DOM in the browser
   GreaseMonkey, Ad blockers
Why use Firefox?
        ...as 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
XUL
 “XML User interface Language”
 Provides:
   layout and base widget set
  Uses CSS for styling
  Event handling via Javascript and command sets
  Overlays

 May be loaded remotely or locally
XUL

 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
   chrome://package/content/...

  Skin: CSS and images
   chrome://package/skin/...

  Locale: Language files (DTD, properties)
   chrome://package/locale/...
   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
  bubble.
  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
  elements
  oncommand attribute can catch command
  events
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

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

  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
DOM
 Follows W3C DOM level 2 (some level 3)
 DOM is used to store XUL nodes (and
 HTML, XML, SVG*)
 accessed by Javascript (or other XPCOM
 languages)
 Every XUL element has a base set of
 attributes, properties...and yes, member
 functions
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
  providers”
  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
XPCOM
 Cross Platform Components
 In C++, XBL or Javascript
 Also in scripting languages (PyXPCOM)
 Components are global to all chrome
 packages
 Possibly the most important part of GRE
XPI: Cross Platform Installer
   Packaged in JAR files
   Uses install script for Mozilla, XML file for
   Firefox
   Uninstaller on Firefox
   Uses RDF extensively
   xpistubs simplifies Installer creation
Other Stuff

  CSS and Locales
  Overlays
  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)
  xpistubs
Javascript and XUL

  jslib
  XULUnit (XUL Unit testing)
  XULPlanet.com References and Tutorials
Resources

  mozilla.org (lxr, bugzilla, dev area’s)
  mozdev.org
  xulplanet.com
    Thank you!

ShaneC@ActiveState.com