Highlight node with chrome devtools extension [closed]

Question

I would like to highlight a dom element from my chrome dev-tools extension in the same way as Element inspector (in dev tools) does. Is there some special API for this? Thanks

Answer 1

Whenever you evaluate some code in the inspected page using DevTools console, DevTools expose a bunch of helper calls known as command line API. This API includes inspect() call that has the same effect as if user invoked "Inspect Element" from the context menu, i.e. brings up the Elements panel and highlights the node. The inspect() call along with the rest of command line API is available to code evaluated by DevTools extnesions using chrome.devtools.inspectedWindow.eval(), so you can do stuff like:

chrome.devtools.inspectedWindow.eval("inspect(document.body)");

If you just want the highlight on the inspected page side, without anything happening on the Elements panel (i.e. as when you hover over the page with DOM search mode turned on by the looking glass in the Elements panel), you'll have to implement this on your own, as there's currently no API for that. I would suggest just adding a custom style to an element using a content script.