Chrome devtools extension - How to open elements panel with element selected

Question

I'm developing a Chrome devtools extension that gets a list of elements via content script and sends it back to my panel through the background layer. What I'd like to do is pass an element from my panel, and open that line of HTML in the elements panel.

I've looked around online, but haven't been able to find anything about this specifically.

The flow is this:

Panel sends message to background saying "get me list of elements"
Background sends message on to content script, which then returns a list of elements (in string form)
Background takes list of elements from content and sends it back to the panel

The Panel draws a table of the elements, and what I'd like to do is be able to click that line of HTML in my panel, and then reveal that element in the Elements panel.

I tried this in my panel.js and my content_script.js:

chrome.devtools.inspectedWindow.eval("inspect(window.getElementById('" + $(code).attr('id') + "'))");

I've also tried that with just passing a string ID, but it didn't work.

Ok, so my flow goes like this: Devtools panel sends message to background, which then sends message to content script. The content script does some dom manipulation, and then send a couple of different arrays, which contain a string value of HTML from the page, to the background layer, which in turn sends that back to my panel. In my panel I'm listing out the HTML strings that the content script returned. There's a button next to each line of HTML that says 'Inspect'. What I'd like to do, is click that button and reveal the element in the Elements panel. — Shea V., Mar 19 '17 at 15:06

score 0 · Answer 1 · edited May 23 '17 at 11:54

To pass a selected element to a Content Script try using the code from the document:

The content script doesn't have direct access to the current selected element. However, any code you execute using inspectedWindow.eval has access to the DevTools console and command-line APIs. For example, in evaluated code you can use $0 to access the selected element.

The code in your content script might look something like this:

function setSelectedElement(el) {
    // do something with the selected element
}

Invoke the method from the DevTools page like this:

chrome.devtools.inspectedWindow.eval("setSelectedElement($0)",
    { useContentScriptContext: true });

This is also used from the related SO post.

Hope this helps.

Chrome devtools extension - How to open elements panel with element selected

1 Answers1