Firefox Addon Development

1
Firefox Add-on Development

• Why and How

Pat Gill 2/18/2008 Reston, VA
2
Objectives

• Learn what the advantages are of making a Firefox
  Add-on vs. other browsers.
• Understand that it doesnt take years of
  programming experience to be able to make one.
• Gain knowledge of the basic elements of an add-on
  and basic development methods.
• Find out about freely available resources so,
  should you desire, you can start building your
  own.

3
Overview
1
Introduction and my Experience
Why a Firefox Add-on?
Building the Add-on
Summary and Resources
4
Introduction

• Senior Design Project Page Sleuth
• Browser toolbar to analyze web page design
• Inherited add-on on top of Greasemonkey
• Bad interface
• Drew toolbar onto page
• Covered up page elements
• Certain cites disabled functionality
• Entire project code in one file
• Hard to read and understand
• Difficult to add/change
• Implicit variable declaration (JavaScript)
  resulted in many bugs

5
Introduction

• Decided to refactor the project
• Garbage in, garbage out
• Adding more bad code to a bloated project
• We needed a better interface
• Shouldnt get in the way of user
• Should always be functional
• The future of the code
• It was likely someone else would inherit our code
• For our and future developers, the code should
  follow good design

6
Why a Firefox Add-on?

• Why an add-on at all?
• Convenience
• If you want to create some internet browsing
  functionality or just something while youre
  browsing its just convenient
• No reinventing the wheel
• In creating an independent client, a lot of
  functionality probably needs to be rewritten
• There is no point in rewriting what someone else
  has done, especially if it is right at your
  fingertips

7
Why a Firefox Add-on?

• Why Firefox?
• Popularity
• The amount of Firefox users is always increasing,
  IE users decreasing
• Ease of use
• Security
• Customizability
• Universal
• Windows
• Mac
• Linux/Unix
• Even Solaris

8
Why a Firefox Add-on?

• Easier Development
• Firefox add-ons only require basic knowledge of
  XML and JavaScript
• IE add-ons need to be written using languages
  like C and Visual Basic
• Easy packaging (.xpi)
• Built in Add-on management
• Extensive amount of existing add-ons, many free
  and open source

9
Building the Add-on

• Basic Framework
• install.rdf
• chrome.manifest
• chrome folder
• content folder
• .xul file
• JavaScript files
• skins folder (optional)
• image/icons
• Style sheet

10
Building the Add-on

• Dynamic Development
• This is so we dont have to repackage every time
  we make a change
• Create a new user using profilemanager
• place reference file in the users profile system
  folder
• reference file is named your add-ons unique id
• contains absolute path to your add-ons install.rdf

11
Building the Add-on

• install.rdf (Resource Description Framework)
• ltemidgt tag
• This id is a unique identifier used to
  distinguish your add-on from others
• Format youraddonname_at_yoursite.com
• Name, version, description, creator
• homepageURL
• iconURL
• aboutURL
• Target Application
• id tag
• Min/Max Versions

12
Building the Add-on

• chrome.manifest
• This is how we tell Firefox what packages and
  overlays the add-on will use
• content
• Sets our package name and location
• Name must be all lowercase
• overlay
• Tells where our overlay file is and on top of
  what overlay to modify

13
Building the Add-on

• .xul ("zool) XML using widgets
• overlay tag (everything else is a child to this)
• Unique id
• lttoolboxgt
• lttoolbargt
• toolbarname
• accesskey
• class
• context
• hidden
• persist
• Button/Menu Elements

14
Building the Add-on

• JavaScript
• simple .js files that go in /content
• must be referenced in the .xul to be called from
  it
• logic and functionality comes from these files

15
Building the Add-on

• Skins
• Using image files and a style sheet we can
  customize how our elements look
• Images/icons as well as .css (style sheet) go in
  skins folder
• In the style sheet we use rules which reference
  the images for our .xul elements
• The .xul must contain the reference to the style
  sheet

16
Building the Add-on

• Packaging
• Create .jar - Optional
• this zips up your /content and /skins
• Create .xpi (zippy)
• essentially a renamed .zip file
• zips your install.rdf, chrome.manifest, and
  /chrome
• Firefox recognizes .xpi as add-on installation
  files

17
Summary

• As far as add-ons go, ones on Firefox are good on
  any platform, are easier to develop, and there is
  a much larger pool of code from which to learn
  and use from.
• Creating an add-on is really as easy as some XML
  and JavaScript, two very simple and
  well-documented languages.
• Understanding the structure and layout of add-ons
  will help in realizing the potential of what
  they are really capable of doing.

18
Reference Sites

• http//www.borngeek.com/firefox/toolbar-tutorial/
• http//roachfiend.com/archives/2004/12/08/how-to-c
  reate-firefox-extensions/
• http//xulplanet.com/

19
Thank You!
www.PlatinumSolutions.com