Subscribe to RSS Feed

Extending Firebug

Firebug exposes set of extension points (API) that can be used to develop new features. This page summarizes list of posts that describes Firebug internal architecture and explains how to develop extensions for Firebug.

See also list of existing Firebug extensions.

Are you an author of a Firebug extension and want me to write a follow up about how to extend specific Firebug features? Just email your submissions to the Firebug discussion group or me.

Extending Firebug Tutorial

  1. Hello World! Introduction into Firefox and Firebug extension architecture. Classic Hello World! example explained.

  2. Toolbar How to customize Firebug toolbar. Appending creating toolbar in a new panel and appending buttons into an existing Firebug panel.

  3. Options How to use (mini panel tab) Options menu and create new options (preferences).

  4. Localization How to properly localize Firebug extension.

  5. Domplate Introduction into Domplate (the engine for Firebug UI).

  6. Yahoo Search More complex Domplate example (based on an online web-service and JSON).

  7. Customizable Net Panel How to customize the Net panel and show more info about HTTP response to the user.

  8. Net Panel Listener How to intercept HTTP traffic displayed in the Net panel.

  9. Activable Panel How to create activable panel and avoid performance penalties.

  10. Inspector This part explains how to use and extend Firebug inspector in extension.

  11. Infotip See how to utilize infotips (Firebug tooltips) in extensions.

  12. Hello AMD How to build an extension based on Asynchronous Module Definition syntax.