How to create firebug like extension using addon sdk

Question

I am trying to create an Firefox extension; like an firebug, which will act as logger for some custom Javascript framework.

I have created the same for Chrome , as a part of devtools, and now trying to port the same for Firefox. Unfortunately, I haven't find any help for the same on net as well as over mozilla's documentation. Below I list the issues which I am facing,

• Create a firebug like interface
• Use jQuery, Bootstrap and Angular within extension

Just for the reference, I am using addon-sdk-1.16 from mozilla to create this extension.

Any help over the issues will be very much appreciated.

Thanks in advance.

Answer 1

Currently the native devtools have a basic api for adding a new tool to the toolbox. It works but it is a bit awkward. For examples of how this works with a reasonably complex add-on, see these:

• Ember Inspector
• Angular Batarang

These are ports of the related chrome extensions by Luca Greco, who also created a nice grunt plugin .

In the near future the add-on SDK will have a new, more powerful set of apis:

https://github.com/Gozala/addon-sdk/blob/jeps/devtools/Developer%20pane.md