FireFox Extensions

From Whirlwind eCommerce Wiki
Jump to: navigation, search

Development Environment

Create Profile

Launch separate instance of firefox as development profile. You dont want to use your regular firefox profile when developing as it will get manhandled.

Start -> Run "%ProgramFiles%\Mozilla Firefox\firefox.exe" -no-remote -P dev

Note, this dev profile can be run in tandem with your regular profile.

Setup Profile

In the address bar, enter "about:config" to see your configuration settings.

  1. javascript.options.showInConsole = true. Logs errors in chrome files to the Error Console.
  2. nglayout.debug.disable_xul_cache = true. Disables the XUL cache so that changes to windows and dialogs do not require a restart. This assumes you're using directories rather than JARs. Changes to XUL overlays will still require reloading of the document overlaid.
  3. browser.dom.window.dump.enabled = true. Enables the use of the dump() statement to print to the standard console. See window.dump for more info. You can also use nsIConsoleService from a privileged script.
  4. javascript.options.strict = true. Enables strict JavaScript warnings in the Error Console. Note that since many people have this setting turned off when developing, you will see lots of warnings for problems with their code in addition to warnings for your own extension. You can filter those with Console2.
  5. extensions.logging.enabled = true. This will send more detailed information about installation and update problems to the Error Console. (Note that the extension manager automatically restarts the application at startup sometimes, which may mean you won't have time to see the messages logged before the automatic restart happens. To see them, prevent the automatic restart by setting the environment NO_EM_RESTART to 1 before starting the application.)
  6. You might also want to set dom.report_all_js_exceptions = true

Some Useful Extensions

These will help you on your development journey

   *  DOM Inspector,  used to inspect and edit the live DOM of any web document or XUL application (Firefox and Thunderbird)
   * Venkman, a JavaScript Debugger (Firefox version, Thunderbird version)
   * Extension Developer's Extension a suite of tools for extension development (Firefox)
   * Console2 enhanced JavaScript console (Firefox version, Thunderbird version)
   * Javascript Command for writing/testing javascript on Firefox windows
   * Chrome List navigate and view files in chrome:// (Firefox version, Thunderbird version)
   * Chrome Edit Plus  a user file editor (Firefox and Thunderbird)
   * Extension Wizard a web-based application that generates an extension skeleton (Firefox and Thunderbird)
   * Firebug a variety of development tools (Firefox)
   * Chromebug combines elements of a JavaScript debugger and DOM (Firefox, "kinda works for Thunderbird")
   * MozRepl explore and modify Firefox and other Mozilla apps while they run (Firefox and Thunderbird)
   * ExecuteJS an enhanced JavaScript console (Firefox version, Thunderbird version)
   * XPCOMViewer an XPCOM inspector (Firefox and Thunderbird)
   * JavaScript shells to test snippets of JavaScript (Firefox and Thunderbird)
   * SQLite Manager to manage the SQLite database (Firefox and Thunderbird)
   * ViewAbout enables access to various about: dialogs from the View menu (Firefox version, Thunderbird version)
   * Crash Me Now! useful for testing debug symbols and the crash reporting system (Firefox and Thunderbird)

Start Building Here

Useful app that will build a framework for your extension: http://ted.mielczarek.org/code/mozilla/extensionwiz/

Sources

https://developer.mozilla.org/en/Setting_up_extension_development_environment http://lifehacker.com/264490/how-to-build-a-firefox-extension