Monday, May 17, 2010

Developing Firefox Extensions

  1. Create a development profile: 


    You need to install several extensions which may slow down firefox performance. So create a separate development profile using the following steps-
    • Open command prompt
    • [Firefox Installation Directory]\firefox.exe -no-remote -P
    • Create a new profile.
    • Start firefox next time with the command: [Firefox Installation Directory]\firefox.exe -no-remote -P [new profile name]

  2. Install some useful extensions: Firebug is the most useful one.


  3. Set some developer preferences: Type about:config in the address bar. Set or add, if do not already exist, the following properties:


    • javascript.options.showInConsole = true.
    • nglayout.debug.disable_xul_cache = true.
    • browser.dom.window.dump.enabled = true.
    • javascript.options.strict = true.
    • extensions.logging.enabled = true.
    • dom.report_all_js_exceptions = true.


  4. Directory structure: Different from usual programming frameworks, Firefox extension has a predefined directory structure for files. The browser will look in specified folder when it needs a file for e.g. installation, preference or visual overlays.


    • For new extension: Use the wizard in http://ted.mielczarek.org/code/mozilla/extensionwiz/. Copy the contents of the generated zip file into [Profile]\extensions\] folder. It is a folder with the name of your desired extension name. Rename this folder name into the extension ID from install.rdf or use some unique name like an e-mail address. Restart firefox. Your add-on should appear in the browser. Check Tools->Add-ons if your extension is listed there.
    • Existing extension: Copy extension into the [Profile]\extensions\] folder. Remember the filename or sub-folder for the extension must be same as the extension ID in install.rdf or a unique name like an e-mail address.

References:
  1. Building an extension: https://developer.mozilla.org/en/Building_an_Extension
  2. Setting up development environment: https://developer.mozilla.org/en/Setting_up_extension_development_environment
  3. Creating a status bar extension: https://developer.mozilla.org/en/Creating_a_status_bar_extension
  4. http://blog.mozilla.com/addons/2009/01/28/how-to-develop-a-firefox-extension/
  5. http://www.slideshare.net/littlebtc/ext-0509
  6. http://www.slideshare.net/robnyman/how-to-write-your-first-firefox-extensio?src=related_normal&rel=530642
  7. http://www.rietta.com/firefox/Tutorial/overview.html

No comments:

Post a Comment