Subscribe to RSS Feed

It's been a while since I have started contributing to Firebug. Everybody use this amazing Firefox extension and I am having great time with exploring the underlying architecture. Well, it was hard time at the beginning 😉 I had to dive into unknown waters and understand what's under the hood. I remember it quite exactly, I have spent many hours with debugging a debugger trying to understand how it works.

I was searching the web intensively and if anybody would like to enjoy the same journey, I would recommend to check out Christoph Dorn's awesome article on Extending Firebug. There is also a cool page about Firebug Internals written by John J. Barton. And last but not least source of information is certainly Firebug Group page, yep you can always ask there...

However, what I was really looking for was a step by step tutorial that starts with the familiar "Hello World!" application. I didn't find it. So, I decided to write down something by myself. Perhaps it will be useful for those programmers, who are interested in contributing to Firebug, extending Firebug or developing an entirely new extension for Firefox. So, here it is: Firebug tutorial for extension developers.

Hello World!

The first thing to do is to setup a structure of the extension. This step is easy if you are already familiar with Firefox extension development.

In this case, the directory structure should look like this:

helloworld@janodvarko.cz/
    chrome/
        content/
            helloworld/
                helloWorld.xul
                helloWorld.js
    chrome.manifest
    install.rdf

The most important files are obviously helloWorld.xul and helloWorld.js. These two files contains the actual Hello World! implementation. The other two files are used by Firefox to properly install the extension.
See the chrome.manifest first.

content helloworld chrome/content/helloworld/ xpcnativewrappers=no

overlay chrome://firebug/content/firebugOverlay.xul         chrome://helloworld/content/helloWorld.xul

Notice that xpcnativewrappers=no turns off security tests. After revisiting this code, I would recommend to remove the option or at least be aware of it.

The file specifies that there is a content under chrome/content/helloworld/ directory and that our helloWorld.xul represents an overlay for firebugOverlay.xul. If you are interested, see an article about chrome registration here.

The install.rdf contains standard information about the extension. No comment is needed for this, see detailed info about install manifests here if you want.

<?xml version="1.0"?><RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
  xmlns:em="http://www.mozilla.org/2004/em-rdf#">

  <Description about="urn:mozilla:install-manifest">
    <em:id>helloworld@janodvarko.cz</em:id>
    <em:version>0.0.1</em:version>

    <!-- Firefox -->
    <em:targetApplication>
      <Description>
        <em:id>{ec8030f7-c20a-464f-9b0e-13a3a9e97384}</em:id>
        <em:minVersion>1.5</em:minVersion>
        <em:maxVersion>3.0.0.*</em:maxVersion>
      </Description>
    </em:targetApplication>

    <!-- Extension -->
    <em:name>Hello World!</em:name>
    <em:description>Firebug Hello World! Extension</em:description>
    <em:creator>Jan Odvarko</em:creator>
    <em:homepageURL>http://www.janodvarko.cz</em:homepageURL>
  </Description>
</RDF>

The helloWorld.xul is currently almost empty (be patient there'll be more things later), only the helloWorld.js is included.

<?xml version="1.0"?>

<overlay xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script src="chrome://helloworld/content/helloWorld.js" type="application/x-javascript"/>
</overlay>

This is how the JS script looks like:

FBL.ns(function() { with (FBL) {

function HelloWorldPanel() {}
HelloWorldPanel.prototype = extend(Firebug.Panel,
{
    name: "HelloWorld",
    title: "Hello World!",

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

Firebug.registerPanel(HelloWorldPanel);

}});

The main and only purpose of helloWorld.js so far, is to create and register a new Firebug Panel (tab). Notice that a Panel plays the same role as a View in MVC (Model View Controller) design pattern. In other words, the Panel is intended to present data to the user.

So, there is a new object called HelloWorldPanel, which is extended from internal Firebug.Panel object. The extension mechanism is realized through extend function, which creates a new object and copies all properties from the first parameter (predecessor object - Firebug.Panel) and then all properties from the second parameter (our new panel - HelloWorldPanel) into it. The object is then returned from the function. You could see this as an imitation of class inheritance.

Our Panel has two properties and a method. Theirs meaning is quite obvious, a name is used to identify the panel (should be unique so, we can access it through getPanel method later) and a title (which is display name of the tab). The later should be localized, but don't worry about it now, we'll deal with these nitpickings later. There is even an initialize method. This is called automatically by the framework when the Panel is activated (displayed) at the first time. It's empty now, but it'll be useful for Panel initialization. Don't forget to call predecessor method, there is some initialization to be made.

Firebug.registerPanel(HelloWorldPanel);

Finally, the new panel object is registered and so, Firebug can ensure it's properly displayed.

Careful reader might have noticed that entire code is surrounded by a following code:

FBL.ns(function() { with (FBL) {

  // Panel definition

}});

This is how namespaces are realized in Firebug framework. It's smart and useful. This makes possible to avoid global variables and so, dangerous collisions. Something, which everybody should take care of. However let's just use it as it is for now, we'll fall in to this later.

Ok, that's it for now. See the following screen-shot that shows how the new panel should look like within Firebug's UI.

A new panel (tab) within Firebug.

The extension can be downloaded here.

Next time we'll take a look at how to create a new button for our panel and associate a logic with it...


Rss Commenti

29 Comments

  1. Good introduction. Looking forward to a second part.

    #1 kangax
  2. yeah, simple and sweet. Me too looking for the second part.

    #2 Nazeer
  3. Is it so simple? wow!.

    #3 Jobin Augustine
  4. This is one of the web's most interesting stories on Sat 1st Mar 2008...

    These are the web's most talked about URLs on Sat 1st Mar 2008. The current winner is .....

    #4 purrl.net |** urls that purr **|
  5. #5 john
  6. Interesting topic. I'm looking forward to the future parts!

    #6 Ben
  7. Great stuff! One small remark - seems like maybe WordPress is changing two dashes to a longer dash, and messes up the code a little bit.

    I mean
    <!-- Firefox -->
    becomes
    <!– Firefox –>

    #7 Stoyan
  8. yeah, does it in the comments too... 😀

    #8 Stoyan
  9. Yeah, I see it 🙁 Any tips how to fix this?

    #9 Honza
  10. Try putting this in the functions.php of your theme:

    remove_filter('the_content', 'wptexturize');

    Worked for me when I was trying to fix "smart" quotes.

    #10 Stoyan
  11. Yep fixed, you rock!

    #11 Honza
  12. Following your tutorial I and II, I created this extension generator tool:
    http://tools.w3clubs.com/ext/

    Can generate Firefox as well as Firebug extensions. The idea is to take care of the directory structure, install.rdf, manifest and all that, so a person can get started with a new extension quickly and painlessly.

    #12 Stoyan
  13. Honza: You want the Code Markup plugin for WordPress (http://www.thunderguy.com/semicolon/wordpress/code-markup-wordpress-plugin/). It's smart enough to turn off wp_texturize only inside code blocks.

    #13 Andrew Dupont
  14. @Andrew: thanks for the tip, I'll try it.

    #14 admin
  15. Me too looking for the second part.

    #15 Korkunç Resimler
  16. Looks like a great tutorial. Are there any tutorials just as good that approaches creating Firefox extensions from the very beginning?

    #16 Rick Henderson
  17. Hi Rick, try this:
    http://developer.mozilla.org/en/Building_an_Extension

    This tutorial will take you through the steps required to build a very basic extension - one which adds a status bar panel to the Firefox browser containing the text "Hello, World!"

    #17 admin
  18. how do i get current page url inside firebug extension ?

    #18 rado
  19. The URL can be usually get from associated context (parameter of many methods and also member of each panel).
    -> context.window.location.href

    #19 admin
  20. thx! btw nice tutorials!

    #20 xrado
  21. [...] any other Firefox extension. I’m indebted to Jan Odvarko for his series of posts on Extending Firebug, from which I got the basics that I needed to make it work — how to hook into Firebug’s [...]

    #21 SitePoint » Developing CodeBurner — An Exercise in Exploratory Programming
  22. [...] [upmod] [downmod] Software is hard | Extending Firebug, Hello World! (Part I.) (www.softwareishard.com) 0 points posted 10 months, 1 week ago by jeethu tags development [...]

    #22 Tagz | "Software is hard | Extending Firebug, Hello World! (Part I.)" | Comments
  23. [...] Software is hard | Extending Firebug, Hello World! (Part I.) [...]

    #23 網站製作學習誌 » [Web] 連結分享
  24. I think that the big storage of the thesis pdf connecting with this post should be at the buy thesis service. So, there’re no difficulties to run to custom dissertation service and buy a dissertation.

    #24 le28Gemma
  25. It looks like a very promising project, good luck with your work and keep us all informed on its progress and how its use has benefited small community groups.
    Regards, Kevin Clasamente Fotbal

    #25 pariuri sportive
  26. Thank you for posting this simple to understand tutorial. I'll be looking forward for future developments of the Firebug plugin. I'm in the business of writing content online and I'm promoting it extensively to make it easy for Canadian students to buy essay online.

    #26 Lewis Anderson
  27. Thanks for the tutorials. I'll be writing essays about Firebug hacks in the future.

    #27 Alison Haymen
  28. great tutorials

    #28 andy
  29. Just want to say thank you for the tutorial, you saved me hours or maybe more.

    #29 ThinkingFish

Sorry, the comment form is closed at this time.