Explaining 2a - 3 cleared some things up. Thanks Pedro. R. Jacob Goldsborough http://www.rjgoldsborough.com Mobile == +1.202.713.5894 Drupal user #469148 <http://drupal.org/user/469148> Skype == rjgoldsborough IRC nick == rjgoldsborough
On Tue, Nov 30, 2010 at 17:28, Pedro Simonetti Garcia < [email protected]> wrote: > Hi Jake, > > 2010/11/30 Jake Goldsborough <[email protected]> > > 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. > > > 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 <http://drupal.org/user/469148> >> Skype == rjgoldsborough >> IRC nick == rjgoldsborough >> >> >> >> On Fri, Nov 12, 2010 at 11:15, Pedro Simonetti Garcia < >> [email protected]> wrote: >> >>> 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 <[email protected]> >>> >>> 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. >>> >>> >>> >>>> >>>> Thanks. >>>> >>>> R. Jacob Goldsborough >>>> http://www.rjgoldsborough.com >>>> Mobile == +1.202.713.5894 >>>> Drupal user #469148 <http://drupal.org/user/469148> >>>> Skype == rjgoldsborough >>>> IRC nick == rjgoldsborough >>>> >>>> >>>> >>>> On Thu, Nov 11, 2010 at 13:09, Pedro Simonetti Garcia < >>>> [email protected]> wrote: >>>> >>>>> Jake, >>>>> >>>>> 2010/11/10 Jake Goldsborough <[email protected]> >>>>> >>>>> 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. >>>>> >>>>> >>>>> 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 <http://drupal.org/user/469148> >>>>>> Skype == rjgoldsborough >>>>>> IRC nick == rjgoldsborough >>>>>> >>>>>> >>>>>> >>>>>> On Mon, Nov 8, 2010 at 23:17, Pedro Simonetti Garcia < >>>>>> [email protected]> wrote: >>>>>> >>>>>>> >>>>>>> 2010/11/8 rjgoldsborough <[email protected]> >>>>>>> >>>>>>> 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 [email protected]. >>>>>>>> To unsubscribe from this group, send email to >>>>>>>> [email protected]<firebug%[email protected]> >>>>>>>> . >>>>>>>> For more options, visit this group at >>>>>>>> http://groups.google.com/group/firebug?hl=en. >>>>>>>> >>>>>>>> >>>>>>> -- >>>>>>> You received this message because you are subscribed to the Google >>>>>>> Groups "Firebug" group. >>>>>>> To post to this group, send email to [email protected]. >>>>>>> To unsubscribe from this group, send email to >>>>>>> [email protected]<firebug%[email protected]> >>>>>>> . >>>>>>> For more options, visit this group at >>>>>>> http://groups.google.com/group/firebug?hl=en. >>>>>>> >>>>>> >>>>>> -- >>>>>> You received this message because you are subscribed to the Google >>>>>> Groups "Firebug" group. >>>>>> To post to this group, send email to [email protected]. >>>>>> To unsubscribe from this group, send email to >>>>>> [email protected]<firebug%[email protected]> >>>>>> . >>>>>> For more options, visit this group at >>>>>> http://groups.google.com/group/firebug?hl=en. >>>>>> >>>>> >>>>> -- >>>>> You received this message because you are subscribed to the Google >>>>> Groups "Firebug" group. >>>>> To post to this group, send email to [email protected]. >>>>> To unsubscribe from this group, send email to >>>>> [email protected]<firebug%[email protected]> >>>>> . >>>>> For more options, visit this group at >>>>> http://groups.google.com/group/firebug?hl=en. >>>>> >>>> >>>> -- >>>> You received this message because you are subscribed to the Google >>>> Groups "Firebug" group. >>>> To post to this group, send email to [email protected]. >>>> To unsubscribe from this group, send email to >>>> [email protected]<firebug%[email protected]> >>>> . >>>> For more options, visit this group at >>>> http://groups.google.com/group/firebug?hl=en. >>>> >>> >>> -- >>> You received this message because you are subscribed to the Google Groups >>> "Firebug" group. >>> To post to this group, send email to [email protected]. >>> To unsubscribe from this group, send email to >>> [email protected]<firebug%[email protected]> >>> . >>> For more options, visit this group at >>> http://groups.google.com/group/firebug?hl=en. >>> >> >> -- >> You received this message because you are subscribed to the Google Groups >> "Firebug" group. >> To post to this group, send email to [email protected]. >> To unsubscribe from this group, send email to >> [email protected]<firebug%[email protected]> >> . >> For more options, visit this group at >> http://groups.google.com/group/firebug?hl=en. >> > > -- > You received this message because you are subscribed to the Google Groups > "Firebug" group. > To post to this group, send email to [email protected]. > To unsubscribe from this group, send email to > [email protected]<firebug%[email protected]> > . > For more options, visit this group at > http://groups.google.com/group/firebug?hl=en. > -- You received this message because you are subscribed to the Google Groups "Firebug" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/firebug?hl=en.
