Devtools: How can I access the most recently selected element?

[Jason Mitcheson]

I've done a lot of my own research but I'm really stuck here; could use some help.

Here is what I am calling from inside devtools.js

chrome.devtools.panels.elements.onSelectionChanged.addListener(function() {

      chrome.devtools.inspectedWindow.eval("$0", function (res) {

      port.postMessage(res);

});

But res evaluates to an error string: "Object has too long reference chain(must not be longer than 1000)"

From what I can tell from Googling, this is the way that one is supposed to get the selected element? This is the same behaviour in canary and the current user version of Chrome..

Thanks

- Jason

[Joe Marini]

You can only request JSON-stringifyable objects. We can't pass live objects across the contexts so we serialize them. So you need to process the result within the eval and return a payload you can interpret on the call site later.

- Jason

--
You received this message because you are subscribed to the Google Groups "Chromium-extensions" group.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msg/chromium-extensions/-/Fbl4rItoFZMJ.
To post to this group, send email to chromium-...@chromium.org.
To unsubscribe from this group, send email to chromium-extens...@chromium.org.
For more options, visit this group at http://groups.google.com/a/chromium.org/group/chromium-extensions/?hl=en.

--
Joe Marini

Developer Advocate / Chrome

joem...@google.com | +Joe Marini | @joemarini

[Jason Mitcheson]

OK, I understand. Thanks for the reply

[Jason Mitcheson]

I need some more help please.

Is it possible at all to programatically access the '$0' element? It seems to only work when I actually evaluate it from the console. If I write a function to evaluate it, then it complains that it isn't defined. Here is a small test http://jsfiddle.net/JPeGT/. I have access both to the extension and the code running on the actual page. 

The event exists, so surely you must be able to actually figure out what the element is..

Thanks

- Jason

On Wednesday, 14 November 2012 14:14:23 UTC+11, Jason Mitcheson wrote:

[Jason Mitcheson]

Ok, I figured it out. $0 isn't in scope inside a function, but it's in scope if it's passed in as a parameter..  I can call this code from inside my devtools page

inside actual tab, running as user JS

function onSelectionChanged(element) {

// element should be $0 / last selected element

}

inside devtools page 

chrome.devtools.inspectedWindow.eval("window.qf.onSelectionChanged($0)", function (res) {

}

Figuring that out was torturous. 

[王红彦]

Hi Jason, I am encounter this problem too, My broswer is Chrome Version 29.0.1547.76 m.

the full error message is : {"code":"E_PROTOCOLERROR","description":"Inspector protocol error: %s","details":["Object has too long reference chain(must not be longer than 1000)"],"isError":true}

Here is My code:

chrome.devtools.panels.elements.onSelectionChanged.addListener(function() {

chrome.devtools.inspectedWindow.eval("$0", function(result, isException) {

if (isException) {

document.write(JSON.stringify(isException) );

} else {

document.write(JSON.stringify(result));

}

});

chrome.tabs.executeScript(chrome.devtools.inspectedWindow.tabId, "$0" function() {

});

});

Please share us more details of your solution. Many thanks Jason.

Laura

[Jason Mitcheson]

You can't pass the result of $0 back to the DevTools page. Additionally, you can't call JSON.stringify on a DOM object.

You have to do all of the work inside the eval and pass back a string/object/number.

For example this should work

chrome.devtools.panels.elements.onSelectionChanged.addListener(function() {

chrome.devtools.inspectedWindow.eval("$0.tagName", function(result, isException) {

if (isException) {

document.write('Error');

} else {

document.write('You clicked on a ' + result + ' element');

}

});

});

Practically speaking if you have a lot of code, you don't really want to write it all in an eval. So you can use a technique where you write a normal JavaScript 'class' and call toString() to create it

function MyCode {}

MyCode.prototype.doSomething = function() { console.log('Hello'); return true }

var run = 'new (' + MyCode.toString() + ')(). doSomething()'

chrome.devtools.inspectedWindow.eval(run, function(result){

    if(result) {

         console.debug("Success!");

     }

});

[Jason Mitcheson]

In addition to my previous post, I should point out that I don't think document.write is a good debugging function here - document.write will write to the devtools document, I think. Better to use console.log and look in the DevTools page (open background page, pop 'out' into its own window, then DevTools that page) to see the log messages. If you want to write to the user's document then you need to use a content script and a messaging port.

- Jason

[Gabriel Benisty]

Hi All we are looking for C++ developers (free lance) with experience in Chrome Browser development to develop a private label browser  contact me at gbl...@yahoo.com

[Marcelo Moises]

Any tips on how to use third party js libraries such as jQuery within this context?

chrome.devtools.panels.elements.onSelectionChanged.addListener(function() {
        //How to do something like this?
        $(selectedElement).whatEver();

chrome.devtools.inspectedWindow.eval("$0.tagName", function(result, isException) {

           //Maybe here?
        });

});

Also, what is the easiest way to debug this? I tried console.log but since the context refers to panel.elements I can't right click and inspect my extension :/

Cheers,
Marcelo

[Joe Marini]

Take a look at:   http://developer.chrome.com/extensions/devtools.html#selected-element

Joe

--

You received this message because you are subscribed to the Google Groups "Chromium-extensions" group.

To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.

To post to this group, send email to chromium-...@chromium.org.

Visit this group at http://groups.google.com/a/chromium.org/group/chromium-extensions/.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/b77417b5-3b90-4e66-aa80-d961f35eb85c%40chromium.org.
For more options, visit https://groups.google.com/a/chromium.org/groups/opt_out.

[Jason Mitcheson]

You can't. The thing to remember about the programming model is that your code which has access to the chrome.devtools APIs is running in a different page. Because it's in a different page, you can't actually get a handle to the selected element. You must perform whatever work you would like either by doing  the work inside the actual eval call, or using a content script as mentioned by Joe.