How to make an addon like Firebug?

Question

I am basically a dotnet developer(beginner). I need to make an IE addon just like Firebug in Firefox. I need HTML and CSS features of Firebug, don't need the other features. I would like to know where should I start with and which platform should I choose. I would prefer dotnet, but if not possible can go for others as well. I have made a FF Toolbar that connects client's database, but have no idea about the Firebug kind of addon. I need to make it only for IE. Can someone help me with links, code snippets and/or some theories that would guide me to make my project. Thanks for any help :)

Regards

Magdaleno

Remove .net tag, this is not about Microsoft .NET platform. – Parthinia

@Richard: I need to make this in .net, only if not possible would go for others. – Magdaleno

@sumit-programmer to create a FF extension in .NET you would need to create some form opf JavaScript <-> .NET bridge that works in FF before delivering anything useful. This seems a lot of effort since the hard work would be bridging platforms. Perhaps some information on what the purpose of this extension is (i.e. what existing tools are inadequate?). Also FireBug has its own extension API, see here for some examples getfirebug.com/wiki/index.php/Firebug_Extensions – Parthinia

@Richard: Thanks Richard for the help. But I need it only for IE at this time, I edited the question a bit later where I pointed that I wanted it for IE only, sorry about that. Can you suggest something for IE please. Thanks again for your reply :) – Magdaleno

With sumit-programmer's latest edit, I think you need to add IE / IE addon tag to this question so that people who are more experienced in this can help out :) – Torrence

Answer 1

Developing something like Firebug is a huge undertaking for someone who I'm assuming has not written a Firefox extension before.

That said, there's an introduction to developing extensions for Firefox on the Mozilla blog, and something similar for IE on MSDN.

Finally, is there a reason you need to write something yourself? Firebug works pretty well, and IE has Developer Tools

D

There is also "FireBug Lite" for other browsers, including IE: getfirebug.com/firebuglite – Parthinia

Actually, it's the client's requirement, and going further he needs further extensions to his element inspector. But that part is a long way from now. First milestone is to get a basic element inspector and its understanding. I have made a small FF Toolbar few days ago which deals with searches using client's database. But don't have any idea how to go on with Firebug. – Magdaleno

Answer 2

The way the IE Developer toolbar was originally implemented was an Explorer Bar that walks the DOM and uses the various IE COM programming interfaces, such as IDisplayServices.

This is a huge undertaking to do for IE. There were some things that just couldn't be done well from an extension (thus the dev tools were integrated directly into IE), and you'll likely run into the same problems. Also, it seems, you'll be learning as you go, so don't promise a very aggressive timeline for this. It's not trivial.

But the basic outline is: Get your Explorer Bar working. Implement IObjectWithSite. When IE calls your get SetSite method, cache that IUnknown pointer. You can later interrogate it with IUnknown::QueryInterface and IServiceProvider::QueryService to get pointers to the DOM and other useful objects. Here's a cookbook.

Also, I wouldn't recommend .net for this at all. You'll have to write all the interop yourself and IE doesn't play well with managed extensions anyway.

Silt

Answer 3

Read comment #1 in answer #4: Firebug Lite already exists and works in IE, see http://getfirebug.com/firebuglite Its open source BSD license and we would welcome your improvements as contributions.

Fovea