How do you install a Firebug Extension?

726 views
Skip to first unread message

Eric Dorman

unread,
Mar 1, 2010, 6:58:00 PM3/1/10
to Firebug
Hey guys,

How do you install your extension once you have made one?

Thanks & God Bless,
Eric Dorman

John J Barton

unread,
Mar 1, 2010, 7:23:04 PM3/1/10
to Firebug

On Mar 1, 3:58 pm, Eric Dorman <dorman...@gmail.com> wrote:
> Hey guys,
>
> How do you install your extension once you have made one?

For now a Firebug extension is a Firefox extension. So you create and
install them like Firefox extensions.

Unless you are talking about Firebug Lite. Then I don't know.

jjb

Eric Dorman

unread,
Mar 1, 2010, 8:32:55 PM3/1/10
to Firebug
Hey John,

Yes I met Firebug Lite and I apologize that I didn't mention that in
the recent post.

Then if you don't know how to do it then do you know who would?

Thanks for replying so quickly.

Thanks & God Bless,
Eric Dorman

Pedro Simonetti Garcia

unread,
Mar 2, 2010, 11:28:53 AM3/2/10
to fir...@googlegroups.com
Hi Eric,

The Firebug Lite extension system is under development, so
things may change in the final release.

The extension installation process will be similar to the way
you install Firebug Lite on your page, and the most simple
one is including a <script> tag pointing to extension's file,
as described at:

http://getfirebug.com/releases/lite/beta/#Install

I'm planning to add a few additional ways to install a
Firebug Lite extension, and any feedback on the subject
is welcome.

For example, I was thinking adding a new custom attribute
to the Firebug Lite <script> tag, indicating what extension's
should be loaded, as:

<script type="text/javascript"
src="https://getfirebug.com/releases/lite/beta/firebug.jgz"
extension="extension_id_or_url,another_extension_id_or_url"></script>

When you load Firebug Lite via bookmarlet, you can't change
the <script> tag attributes, so there must be a way to customize
the bookmarlet to load the extension, or an option to load the
extension via User Interface (using the Firebug icon menu).

I'll create a wiki page with more info about Firebug Lite extension
development when I get a change, and I'll post a message here
when it's done.

regards,

Pedro Simonetti.

2010/3/1 Eric Dorman <dorm...@gmail.com>:

> --
> You received this message because you are subscribed to the Google Groups "Firebug" group.
> To post to this group, send email to fir...@googlegroups.com.
> To unsubscribe from this group, send email to firebug+u...@googlegroups.com.
> For more options, visit this group at http://groups.google.com/group/firebug?hl=en.
>
>

Eric Dorman

unread,
Mar 2, 2010, 3:40:53 PM3/2/10
to Firebug
Hey Pedro,

Ok, thanks for that info.

What I am talking about is where do I go to add my extension code in
Firebug Lite after I have made it?

I tried what you suggested with the <script> tag and it didn't work.

Is their another way to add code into Firebug Lite?

Maybe I could try to copy the code from firebug-lite.js file,then add
my code into it somehow and see if I get any luck.

On Mar 2, 11:28 am, Pedro Simonetti Garcia <pedrosimone...@gmail.com>
wrote:

> 2010/3/1 Eric Dorman <dorman...@gmail.com>:

Pedro Simonetti Garcia

unread,
Mar 2, 2010, 8:30:04 PM3/2/10
to fir...@googlegroups.com
Hi Eric,

2010/3/2 Eric Dorman <dorm...@gmail.com>:


> What I am talking about is where do I go to add my extension code in
> Firebug Lite after I have made it?
>
> I tried what you suggested with the <script> tag and it didn't work.

Yes, they aren't working because I haven't implemented
those features yet.

Firebug Lite itself uses a modular architecture, which means
that the application is a collection of modules (plugins). All files
you see in the content/firebug directory (except from lib.js)
are a kind of plugin.

What is missing is a way to load plugins *after* the application
is loaded (and other advance loading features as I described).

But, in order to test your extension, you can load your code
into Firebug Lite running the development mode.

> Is their another way to add code into Firebug Lite?

I added a helloWorld.js extension example (taken from
Honza's tutorial) in the content/firebug directory to
illustrate how to develop an extension:

http://fbug.googlecode.com/svn/lite/branches/firebug1.3/content/firebug/helloWorld.js

Please checkout the latest code (or update if you already
checked):

http://fbug.googlecode.com/svn/lite/branches/firebug1.3/

Next, uncomment the following line from firebug.dev.js
(located at line 79):

//"firebug/helloWorld.js",

That way, you'll load the helloWorld "plugin" when running
the application in development mode.

Please note that the loading process may be different in
the future, but the source code of your extension will be
basically the same. So, you can use the development mode
to develop and test your extension while the final loading
mechanism isn't finished yet.

If you have any other doubts feel free to ask and I'll be
glad to help you.

regards,

Pedro Simonetti.

Eric Dorman

unread,
Mar 2, 2010, 8:58:42 PM3/2/10
to Firebug
Hey Pedro,

Okay I understand how to make an extension,but here is where I don't
understand.

How do I get Firebug Lite to recognize my extension in the firebug
Lite Development Mode?

I understand what you mean by how to go about building the code for an
extension,but I am just a little fuzy about how I get my extension to
work properly into the Firebug Lite development mode.

Would it be alright if I helped you guys on building the code of
Firebug Lite out?

Cause maybe that way I can show you guys my extension and have it
loaded into the next version possibly. Cause I am now directing my
plan to build an extension to help developers find security weaknesses
in their code and help them validate where it is.

Anyways hope all's good with you.

Thanks for all of the help and God Bless,
Eric Dorman

On Mar 2, 8:30 pm, Pedro Simonetti Garcia <pedrosimone...@gmail.com>
wrote:
> Hi Eric,
>
> 2010/3/2 Eric Dorman <dorman...@gmail.com>:


>
> > What I am talking about is where do I go to add my extension code in
> > Firebug Lite after I have made it?
>
> > I tried what you suggested with the <script> tag and it didn't work.
>
> Yes, they aren't working because I haven't implemented
> those features yet.
>
> Firebug Lite itself uses a modular architecture, which means
> that the application is a collection of modules (plugins). All files
> you see in the content/firebug directory (except from lib.js)
> are a kind of plugin.
>
> What is missing is a way to load plugins *after* the application
> is loaded (and other advance loading features as I described).
>
> But, in order to test your extension, you can load your code
> into Firebug Lite running the development mode.
>
> > Is their another way to add code into Firebug Lite?
>
> I added a helloWorld.js extension example (taken from
> Honza's tutorial) in the content/firebug directory to
> illustrate how to develop an extension:
>

> http://fbug.googlecode.com/svn/lite/branches/firebug1.3/content/fireb...

Pedro Simonetti Garcia

unread,
Mar 3, 2010, 5:58:34 PM3/3/10
to fir...@googlegroups.com
Hi Eric,

Sorry about the delay, today I worked out of office, and only
now I could read your email.

2010/3/2 Eric Dorman <dorm...@gmail.com>:


> Hey Pedro,
>
> Okay I understand how to make an extension,but here is where I don't
> understand.
>
> How do I get Firebug Lite to recognize my extension in the firebug
> Lite Development Mode?

It's not your fault. I admit that we need a proper documentation for
developers get started with Firebug Lite.

The "firebug.dev.js" is the "development module". This module is
responsible for loading all Firebug Lite modules (files), and for
providing a few handy features to make the development easier.

http://fbug.googlecode.com/svn/lite/branches/firebug1.3/content/firebug.dev.js

If you look at this file, you'll notice in the beginning of the file a list of
modules that should be loaded in the "development mode". The
modules will be loaded in the same order as specified in this file.
Here is the complete list of modules:

window.FBDev =
{
// ********************************************************************************************
modules:
[
// ****************************************************************************************
// Application Core

"firebug/lib.js",

"firebug/firebug.js",

"firebug/gui.js",
"firebug/context.js",
"firebug/chrome.js",
"firebug/chrome.injected2.js",

// ****************************************************************************************
// Application Classes

"firebug/selector.js",

"firebug/domplate.js",
//"firebug/domplate.optmized.loops.js", // not used yet
"firebug/reps2.js",
"firebug/reps.js",

"firebug/editor.js",
"firebug/inspector.js",

// ****************************************************************************************
// Console / CommandLine core

//"firebug/console.js",
"firebug/console2.js",
"firebug/consoleInjector.js",

"firebug/commandLine.js",

// ****************************************************************************************
// XHR Watcher

"firebug/xhr.js",
"firebug/net.js",
"firebug/spy.js",

// ****************************************************************************************
// Application Modules/Panels

"firebug/html.js",
//"firebug/insideOutBox.js", // experimental
//"firebug/lib/htmlLib.js", // experimental
//"firebug/html3.js", // experimental
//"firebug/html2.js", // experimental

//"firebug/css.js",
//"firebug/infotip.js", // experimental
"firebug/css2.js",

"firebug/script.js",
"firebug/dom.js",

//"firebug/helloWorld.js",

// ****************************************************************************************
// Trace Module/Panel
"firebug/trace.js",
"firebug/tracePanel.js",

// ****************************************************************************************
// Test stuff
//"firebug/plugin.js",
//"firebug/test/firequery.js",

// ****************************************************************************************
// Bootstrap
"firebug/boot.js"
],
// ********************************************************************************************
...

Note that there are a lot of modules that are commented (preceded with "//").
Those modules will not be loaded unless you remove the comments. If you
add more files in this list, those files will be loaded too (you can
load any kind
of js file). The files uses relative path and are based in the
"content" directory
so "firebug/dom.js" will refer to the file located at "content/firebug/dom.js".

In a broader sense, you can see the "firebug.dev.js" module as a "js loader",
once this is its main behavior, that is, to load each Firebug Lite module as
a separated js file (because is a lot easier to read and write small js files,
as opposed to the 24k lines of code file, which is called the "build file",
the file that will be used in production).


> Would it be alright if I helped you guys on building the code of
> Firebug Lite out?

Sure. You are more than welcome helping us with Firebug Lite
code. I believe this is also a good way to you better understand
how Firebug Lite works internally.

Let me know if you're willing to join our team, and we'll provide
you svn access to our repository.


> Cause maybe that way I can show you guys my extension and have it
> loaded into the next version possibly. Cause I am now directing my
> plan to build an extension to help developers find security weaknesses
> in their code and help them validate where it is.

Cool. I'll probably be able to give you better directions by
looking at your code.

regards,

Pedro Simonetti.

Eric Dorman

unread,
Mar 3, 2010, 6:32:14 PM3/3/10
to Firebug
Hey Pedro,

Yes, I would be glad to join your team.

No, you've done a great job helping me understand how Lite works. :)

I think the best way for myself to learn how Firebug Lite adds
features is to use the svn to show case my code of my extension and
even maybe make it a default part of Firebug Lite.

I am only really into programming cause I like Security and making
sure devs go by good standards and not create ways for the bad guys
to get in. I think it makes sense building my extension into Firebug
Lite cause really and truly I don't want to reinvent another Firebug
tool. :)

Thanks for all of the help & God Bless,
Eric Dorman

On Mar 3, 5:58 pm, Pedro Simonetti Garcia <pedrosimone...@gmail.com>
wrote:
> Hi Eric,
>


> Sorry about the delay, today I worked out of office, and only
> now I could read your email.
>

> 2010/3/2 Eric Dorman <dorman...@gmail.com>:


>
> > Hey Pedro,
>
> > Okay I understand how to make an extension,but here is where I don't
> > understand.
>
> > How do I get Firebug Lite to recognize my extension in the firebug
> > Lite Development Mode?
>
> It's not your fault. I admit that we need a proper documentation for
> developers get started with Firebug Lite.
>
> The "firebug.dev.js" is the "development module". This module is
> responsible for loading all Firebug Lite modules (files), and for
> providing a few handy features to make the development easier.
>

> http://fbug.googlecode.com/svn/lite/branches/firebug1.3/content/fireb...

> ...
>
> read more »

Pedro Simonetti Garcia

unread,
Mar 3, 2010, 10:00:11 PM3/3/10
to fir...@googlegroups.com
Hi Eric,

2010/3/3 Eric Dorman <dorm...@gmail.com>:


> Hey Pedro,
>
> Yes, I would be glad to join your team.

Cool! Your help will be very welcome! I'll write a message to
the Firebug Working Group requesting a svn access for you.

You need a google account in order to access our repository.
It's okay to use your "dorman185" account for that?

We have another discussion list for Firebug developers in
which we discuss technical and internal issues of the
Firebug project. I invite you to send a message to this
group requesting a membership so you can participate
in that group too:

http://groups.google.com/group/firebug-working-group


> No, you've done a great job helping me understand how Lite works. :)

Thanks man. But even so, I think that the lack of a proper
documentation (or some guidelines) may be an obstacle for
other developers to start developing extensions and/or help
with the Firebug Lite codebase.


> I think the best way for myself to learn how Firebug Lite adds
> features is to use the svn to show case my code of my extension and
> even maybe make it a default part of Firebug Lite.

For sure looking at your code will make our conversation
more easier, and will be very nice to have your extension's
code in our repository. This will also make easier for other
developers to understand how an extension works, and
hopefully will encourage others to start developing new
extensions.

Our goal with Firebug Lite is to provide for other browsers
as much as possible features currently available in Firebug
for Firefox. But as in the Firebug model, other more specific
features are more likely to be supported by extensions. This
is good for Firebug, once it makes the scope of supported
features smaller (and hence more easier to maintain), and
it's also good for extension developers, once it gives a lot
of room for improvement to be done by extensions.

So, I think that a security feature is more likely to be
an "extension", that is, an "extra" set of features as
opposed to be "part" of the application.

But as I told you in another message, considering that
Firebug Lite extension is basically a JavaScript file (an
maybe a css file), the "installation" process for extensions
will be very easy.

That's why I'm planning to include a easy-to-access way
to load extensions in the Firebug Lite UI.

Take for example the "trace mode" in Firebug Lite. This
feature is disabled by default, but you can enabled it by
clicking at:

Firebug Menu > Options > Enable Trace Mode.

In a similar way, an extension will be loaded in Firebug
Lite by clicking at:

Firebug Menu > Extensions > Extension Name

So you can think an extension as being an "advanced
option" in Firebug Lite. It will be disabled by default,
but you can enabled it with a few mouse clicks.

I think this is good for users (easy access to more
advanced features), good for extension developers
(the extension will be available for all Firebug Lite
users) and good for Firebug Lite developers (we
offer more features without having to increase the
complexity of the application's codebase).

Anyway, the whole extension system for Firebug
Lite is just in the beginning, and I want to hear more
feedback from other developers and from the Firebug
Working Group, to know their opinions on the subject.

regards,

Pedro Simonetti.

Reply all
Reply to author
Forward
0 new messages