Subscribe to RSS Feed

Firebug 1.10 introduces new API for building extensions based on Asynchronous Module Definition (AMD) syntax. Firebug itself is already using AMD to improve its internal structure and modularization of the code base.

The Asynchronous Module Definition (AMD) API specifies a mechanism for defining modules such that the module and its dependencies can be asynchronously loaded.

One reason why Firebug uses AMD syntax is to support module sharing between Firebug and Firebug Lite. This post explains how to build Firebug extension based on AMD.

Hello AMD!

Let's start with an example extension. It'll be based on XUL Overlay for now to focus only on AMD in this post (next part of the tutorial will be about how to build a bootstrapped Firebug extension based on AMD).

The structure of the extension is following (it's just like standard XUL based extension, you can compare with the one from the first part):

- <extension-directory>
    - chrome
        - content
            * main.js
            * mainOverlay.js
            * mainOverlay.xul
            * myPanel.js
        * chrome.manifest
        * install.rdf

Initialization Sequence

We are using XUL Overlay to load our extension. See how mainOverlay.xul and mainOverlay.js files look like.

mainOverlay.xul

<?xml version="1.0"?>
    <overlay xmlns=
        "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

    <script type="application/x-javascript"
        src="chrome://helloamd/content/mainOverlay.js"/>

</overlay>

The overlay loads only mainOverlay.js script file, which looks as follows:

var config = {id: "helloamd@janodvarko.cz"};
Firebug.registerExtension("helloamd", config);

The only thing the extension really needs to do is to register itself, by calling Firebug.registerExtension and Firebug will automatically look for a main module in the same directory to load it.

The first helloamd argument represents extension's name (extName) and is used to construct chrome URL for the main module as follows:

"chrome://" + extName + "/content/main"

In fact, the loader maps extName to:

"chrome://" + extName + "/content"

So, helloamd/myPanel module ID is automatically translated to:

chrome://helloamd/content/myPanel.js

(the loader also appends the js file extension)

The main module is using AMD syntax and is responsible for loading further extension modules. In our case we want to load a panel module.

define([
    "helloamd/myPanel",
],
function(MyPanel) {

var theApp =
{
    initialize: function()
    {
        // TODO: Extension initialization
    },

    shutdown: function()
    {
        // TODO: Extension shutdown
    }
}

return theApp;
});

You'll see in the next part of this tutorial, that the main module looks exactly the same for bootstrapped extensions. Just the Firebug registration won't be done in an overlay.

Panel Implementation

You should be already familiar with how to implement a new Firebug panel and Firebug model (Part I.) so, the rest of the extension should be very easy. The only difference is that we are using AMD syntax.

define([
    "firebug/lib/lib",
    "firebug/lib/trace",
],
function(FBL, FBTrace) {

function MyPanel() {}
MyPanel.prototype = FBL.extend(Firebug.Panel,
{
    name: "helloamd",
    title: "Hello AMD World!",

    initialize: function()
    {
        Firebug.Panel.initialize.apply(this, arguments);

        // TODO: Panel initialization (there is one
        // panel instance per browser tab)
    },

    destroy: function(state)
    {
        Firebug.Panel.destroy.apply(this, arguments);
    },
});

Firebug.registerPanel(MyPanel);
return MyPanel;
});

Get HelloAMD! Example Source

Full source of the example extension is available on GitHub.

The example shows also how to:

  • Use Firebug tracing console API (FBTrace) (logging)
  • Implement also a new Firebug module
  • Register a custom stylesheet and use styles in a domplate template.
  • Localize strings.

Rss Commenti

4 Comments

  1. [...] to develop Firebug extensions based on AMD (Asynchronous Module [...]

    #1 Getfirebug Blog » Blog Archive » Firebug 1.10a6
  2. Nice information presented in the post, thanks for sharing such a great post.

    #2 software development company india
  3. hi

    #3 loverprince
  4. I have tried this code and it works perfectly. Thanks for sharing!!!

    #4 Leon Victor

Sorry, the comment form is closed at this time.