使用chrome devtools扩展突出显示节点

Question

我想从我的chrome dev-tools扩展中突出显示一个dom元素，就像Element检查器（在开发工具中）一样。这有什么特殊的API吗？ 感谢

Answer 1

每当您使用DevTools控制台评估被检查页面中的某些代码时，DevTools会公开一堆称为command line API的帮助程序调用。此API包含的inspect（）调用与用户从上下文菜单中调用“Inspect Element”具有相同的效果，即调出Elements面板并突出显示该节点。 inspect（）调用以及其余命令行API可供使用chrome.devtools.inspectedWindow.eval（）的DevTools extnesions评估的代码，因此您可以执行以下操作：

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

如果您只想在被检查页面上突出显示，而“元素”面板上没有发生任何事情（例如当您将鼠标悬停在“元素”面板中的镜片打开DOM搜索模式的页面上时），您将会必须自己实现，因为目前没有API。我建议只使用内容脚本为元素添加自定义样式。