Firebug and Context Menu integration

[rjgoldsborough]

Hi all. I came across http://code.google.com/chrome/extensions/trunk/contextMenus.html
and was wondering if there are any plans to integrate this with
firebug. It would be very handy to be able to right click and select
"Firebug" just like in Firefox. I would be willing to give it a shot,
but I didn't find anywhere to download the current code. Thanks!

[Sebo]

You probably mean Firebug Lite, because Firebug is developed for
Firefox only. Though there are currently efforts to put both to the
same code base.
The current source of Firebug Lite can be downloaded at
http://code.google.com/p/fbug/source/browse/lite/branches/firebug1.4
and the one of Firebug at http://code.google.com/p/fbug/source/browse/branches/firebug1.7
.


On Nov 8, 4:37 pm, rjgoldsborough <rjgoldsboro...@gmail.com> wrote:
> Hi all. I came acrosshttp://code.google.com/chrome/extensions/trunk/contextMenus.html

[Steven Roussey]

There is an issue for this (Firebug Lite extension for Chrome, using
context menus), you can star it to track it's progress:

http://code.google.com/p/fbug/issues/detail?id=3579

On Nov 8, 7:37 am, rjgoldsborough <rjgoldsboro...@gmail.com> wrote:
> Hi all. I came acrosshttp://code.google.com/chrome/extensions/trunk/contextMenus.html

[Pedro Simonetti Garcia]

2010/11/8 rjgoldsborough <rjgolds...@gmail.com>

Hi all. I came across http://code.google.com/chrome/extensions/trunk/contextMenus.html
and was wondering if there are any plans to integrate this with
firebug. It would be very handy to be able to right click and select
"Firebug" just like in Firefox.

Sure, as Steven pointed please star the following issue to get notified about our progress:
http://code.google.com/p/fbug/issues/detail?id=3579
 

I would be willing to give it a shot,
but I didn't find anywhere to download the current code. Thanks!

Great! You can find a link to download [1] at our site [2], but as Sebastian suggested if you're going to work with Firebug Lite code it is recommended to download the code directly from our repository:

http://fbug.googlecode.com/svn/lite/branches/firebug1.4/test/

The actual code for the extension is under "/build/chrome-extension".

I'm focused right now on complex core changes in Firebug Lite so I'll be glad to see contributions from the community so I can stay focused on the hard work. I'm open to give you instructions how to implement this, so if you need help just ask.

Implement this feature is easy, but not so easy as one might think. Chrome does not include a reference to the clicked element that activated the content menu so you'll have to find that element first, and note that the context menu is handled at a background page and the Firebug Lite is running at the page.

1) Find the element to be inspected - listen to "oncontentmenu" events in the page to track the clicked element (running on a content script).

2) Detect context menu click - use Chrome's API to detect context-menu click (running on a background page) and send a message to the content script indicating that a click happened.

3) Select the element in HTML Panel - running on a content script, listen to background's page message indicating a context-menu click, and execute the following code to select the element:

Firebug.chrome.selectPanel("HTML");
Firebug.HTML.select(elementToBeInspected);

If you need help understanding Firebug Lite code, just ask.

regards,

Pedro Simonetti.


[1] https://getfirebug.com/releases/lite/latest/firebug-lite.tar.tgz
[2] http://getfirebug.com/firebuglite#Stable



 

--
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.

[Jake Goldsborough]

Hey Pedro et al, thanks for the emails back.

You can see the code I've used here. http://pastebin.com/fSucGCr9

I've started working on this plugin and am running into some trouble.

The API shows calling an external js file in the background.html so I created contextmenu.js.

I've got the Firebug Lite item showing up in the context menu.

I have tried to send a message onclick to both the content script and background pages but neither seem to work. I've put a test alert and it never shows up.

I also am not really sure how to listen for a context menu click. I could only find api functions to create delete and update.

This is my first go at a chrome extension so any feedback or pointers would be greatly appreciated.

Thanks for giving me the chance to help contribute back. I'm not sure what I'd do without Firebug, and Firebug Lite really makes it possible to develop in Chrome.

R. Jacob Goldsborough
http://www.rjgoldsborough.com
Mobile == +1.202.713.5894

Drupal user #469148
Skype == rjgoldsborough

IRC nick == rjgoldsborough

[Pedro Simonetti Garcia]

Jake,

2010/11/10 Jake Goldsborough <rjgolds...@gmail.com>

Hey Pedro et al, thanks for the emails back.

Thanks for contacting us! :-)

 

You can see the code I've used here. http://pastebin.com/fSucGCr9

I've started working on this plugin and am running into some trouble.

The API shows calling an external js file in the background.html so I created contextmenu.js.

In order to make extensions as secure as possible in Chrome, the communication with the page is very restricted. Background pages can only talk to Content Scripts, and Content Scripts can talk to page, but only using the DOM (not JavaScript directly):

Background pages ---> Content Scripts ---> page scripts (Firebug Lite)

I suggest reading this to see how to communicate with the page:
http://code.google.com/chrome/extensions/trunk/content_scripts.html#host-page-communication

Is also good to consider the security risks:
http://code.google.com/chrome/extensions/trunk/messaging.html#security-considerations

I made a confusion in my last post. The correct order should be:

1) Find the element to be inspected - listen to "oncontentmenu" events in the *page* to track the clicked element (running the *page*).

2) Detect context menu click - use Chrome's API to detect context-menu click (running on a *background page*) and send a message to the *content script* indicating that a click happened.

3) Communicate with the page - from the *content script* send a message to the *page* indicating that a context-menu click happened.

4) Select the element in HTML Panel - running on the *page*, listen to the *content script" message indicating a context-menu click, and execute the following code to select the element:

Firebug.chrome.selectPanel("HTML");

Firebug.HTML.select(elementToBeInspected);

 

I've got the Firebug Lite item showing up in the context menu.

I have tried to send a message onclick to both the content script and background pages but neither seem to work. I've put a test alert and it never shows up.

I also am not really sure how to listen for a context menu click. I could only find api functions to create delete and update.

Yes, I tried your code and it won't work because Firebug Lite is running at the page, the the context menu action is handled at the background page.

Also, if you're creating a new extension (judging by the pastebin sample) you'll have problems too because there's more work to do to communicate from one extension to another. I suggest is to work on Firebug Lite extension's code instead, and then when you get a working version without bugs I'll revise the code and commit it our repository, making it available to our users in the next beta release. Of course, I'll give you the proper credit for the patch. ;-)

This is my first go at a chrome extension so any feedback or pointers would be greatly appreciated.

There are a few more things to consider but let's concentrate on the most important ones. We need to handle the case when Firebug Lite is inactive, which is related to this issue:

http://code.google.com/p/fbug/issues/detail?id=3166

The problem is that we need some kind of "Browser Help Object" that will act even when Firebug Lite is inactive. This BHO will basically handle these cases:

* If a user press F12 when Firebug Lite is inactive, it should activate it and open.
* If a user press CTRL+SHIFT+C when Firebug Lite is inactive, it should activate it and start inspecting.
* If a user select "Inspect element" from context-menu when Firebug Lite is inactive, it should activate it and inspect the clicked element.

There are a few things we need to change in Firebug Lite to make it easier to solve the related issues: 1) split the current content script file in two (a small BHO-like file, and the Firebug Lite app file); 2) create a API method to dispatch messages from Chrome to Firebug (there is currently only a Firebug to Chrome method); 3) Make Chrome extension work in Development Mode [*] to make the development of Chrome specific code easier (without requiring building the project).

[*] http://getfirebug.com/firebuglite#DevelopmentMode

#1 and #2 are easy and I'll commit a patch now so it will be much easier to you to proceed from that.

#3 will require changing the location of the manifest.json file so I need to rethink how Chrome extension will be built and deployed, so I want to think carefully.

regards,

Pedro Simonetti.

[Jake Goldsborough]

Pedro,

As I'm looking through the code a bit deeper, I see some context menu stuff already happening. Is this code related to the same idea?

And thanks for clearing it up a bit more. Like I said, I'm new to the Chrome Extensions world. So Firebug Lite doesn't have a content script then? Just the page script (firebug.js)

Also, that was just code I paste binned. I haven't started a new extension, I've just been modifying the code.

Thanks.

 
R. Jacob Goldsborough
http://www.rjgoldsborough.com
Mobile == +1.202.713.5894

Drupal user #469148
Skype == rjgoldsborough

IRC nick == rjgoldsborough

[Pedro Simonetti Garcia]

Hi Jake,

Sorry for not responding earlier. I made the #1 and #2 changes yesterday, but I had to interrupt my work so I couldn't give you a feedback. I had a lot of 1.4 revisions pending to be back-ported to 1.3 so I decided to merge the pending revisions too and that took me some time to do.

2010/11/12 Jake Goldsborough <rjgolds...@gmail.com>

As I'm looking through the code a bit deeper, I see some context menu stuff already happening. Is this code related to the same idea?

Yes, I just committed this code based on your example so you can get a feel of how to communicate with the background/content-script/page, but there's more thing to do. I hope that with a basic example going on you will be able to understand how Firebug Lite works and how to implement the context-menu feature more easily.

 

And thanks for clearing it up a bit more. Like I said, I'm new to the Chrome Extensions world. So Firebug Lite doesn't have a content script then? Just the page script (firebug.js)

Firebug Lite *does have* a content script. Before the modifications I made, the firebug.js script contained both the "content script code" and the "page code" (the giant "firebug" function defined at the very beginning was being injected as a string in the page, installing Firebug Lite at the page). Now the firebug.js contains only the content script and the injected script is an external file.

The Chrome's extension files now are:

background.html - background page
firebug.js - content script (now acting as a simple Browser Helper Object)
firebug-lite-beta.js - Firebug Lite application (will be running on a page)
googleChrome.js - Firebug Lite application module for Google Chrome specific code (will be running on a page)

So now it is easier to change Chrome's extension code. You probably will have to change only the background.html, firebug.js and googleChrome.js files (which are small files), and you won't have to change the huge file (the 930k firebug-lite-beta.js file).

Note that the googleChrome.js file will be later moved from /build/chrome-extension-beta/ to other place (to be defined) such as /content/firebug/ or /platform/google/. I need to discuss this with the Firebug Working Group.

I placed some comments in the code (// TODO) so you can see what else need to be handled now. Context-menu actions are working now, but only when Firebug Lite is both activated and open. There are also a couple of other minor things. Here's the list of the ones I could find:

1. If FBLite is *activated* but *not open* (i.e. it is minimized) and a context-menu click happens, it should open Firebug Lite's UI, and only later Inspect the element.

2. If FBLite is *deactivated* and a context-menu click happens, it should activate Firebug Lite first, wait the activation to finish, open Firebug Lite's UI, and only later Inspect the element.

3. The same #1 logic applies to CTRL+SHIFT+C but the triggered action will be start inspecting the element.

4. The same #1 logic applies to F12 but the triggered action will opening Firebug Lite's UI (or opening in a new window if CTRL+F12 was pressed).

5. The oncontextmenu event attached to page should be removed when the page is unloaded.

6. The keyboard event that will be attached to page should be removed when the page is unloaded and/or when Firebug Lite is activated.

You'll probably find more issues along the way, but I'm here to help. If you need something that requires changing Firebug Lite's app, let me know. Since this is you first adventure in Firebug's code you'll find it difficult to detect which lines to change in the huge file (the firebug-lite-beta.js shouldn't be changed directly anyway, it is a build file containing all Firebug Lite modules in one single file). I guess you'll need a hook to detect when Firebug Lite's activation was successfully completed.

By the way, please remember to update you copy Firebug Lite's code to be sure you get the most recent one:

http://fbug.googlecode.com/svn/lite/branches/firebug1.4/build/chrome-extension-beta/

regards,

Pedro Simonetti.

 

[Jake Goldsborough]

Hey Pedro et al. I started working on this again and had a few questions. I think I may be close but can't seem to get it working.

googleChrome.js is only for when Firebug Lite is activated? Is this right? And if it is, where does the open or minimized state come from?

I was also hoping you could confirm the workflow of this for me:

We start in background.html by creating the tabs and setting an onclick function. A message gets sent to firebug.js stating the context menu tab was clicked.

This is where I start to get unsure. It appears you use firebugDispatch() to set up the variables for googleChrome.js. Could you also explain what the load_channel() does. I see it above also in the background page listener function.

Thanks again.

R. Jacob Goldsborough
http://www.rjgoldsborough.com
Mobile == +1.202.713.5894

Drupal user #469148
Skype == rjgoldsborough

IRC nick == rjgoldsborough

[Pedro Simonetti Garcia]

Hi Jake,

2010/11/30 Jake Goldsborough <rjgolds...@gmail.com>

Hey Pedro et al. I started working on this again and had a few questions. I think I may be close but can't seem to get it working.

Good to see you are having progress!
 

googleChrome.js is only for when Firebug Lite is activated? Is this right?

Yes. Both googleChrome.js AND firebug-lite-beta.js will be loaded only when Firebug Lite is activated for a particular page. googleChrome.js hold the code specific to the Chrome extension platform while the firebug-lite-beta.js holds the general application code (the same code used in Firebug Lite for the cross-browser version).

 

And if it is, where does the open or minimized state come from?

Background pages (BG pages) cannot speak directly to the page (and vice versa). The communication must happen via Content Script (CS).

Background pages (Firebug Icon in the browser) <---> Content Scripts <---> page scripts (Firebug Lite UI)

When you click the Firebug Icon in the browser (next to the address bar):

1) BG page will handle the click in handleIconClick(). It will check if Firebug Lite is activated by sending a message to the CS:
chrome.tabs.sendRequest( tab.id, {name: "FB_isActive"}, ... );

2a) If Firebug Lite is already activated it will toggle the UI (minimize/maximize) by executing Firebug.chrome.toggle() in the page (the following trick is not the recommended way to execute scripts in the page and I might change this in the future):
chrome.tabs.update(tab.id, {url: "javascript:Firebug.chrome.toggle()"});

2b) If Firebug Lite is not activated, send a message to CS to install the application:
chrome.tabs.sendRequest(tab.id, {name: "FB_loadFirebug"});

3) CS will then install Firebug Lite by injecting the script in the page (firebug-lite-beta.js and googleChrome.js) and then call loadChannel().

loadChannel() creates a "channel" of communication between the CS and the page by using custom events as explained here:
http://code.google.com/chrome/extensions/trunk/content_scripts.html#host-page-communication

When you call firebugDispatch() in the CS, it will send a message (via event dispatching) to the page. That's how you communicate from the CS to the page. Right now firebugDispatch() is called after you click the context-menu item "Inspect in Firebug Lite" (the actual click will be handled in the BG page, which will send a message to the CS indicating that the click happened, which will broadcast the message to the page).

In the page, you call Firebug.GoogleChrome.dispatch() to communicate from the page to the CS.

Does it make sense to you? If you have more questions, feel free to ask them.

regards,

Pedro Simonetti.

[Jake Goldsborough]

Explaining 2a - 3 cleared some things up. Thanks Pedro.

R. Jacob Goldsborough
http://www.rjgoldsborough.com
Mobile == +1.202.713.5894

Drupal user #469148
Skype == rjgoldsborough

IRC nick == rjgoldsborough