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

Question

我想以与Element检查器(在开发工具中)相同的方式突出显示我的chrome dev-tools扩展中的dom元素.这有什么特殊的API吗？谢谢

Answer 1

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

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

如果您只想在被检查页面上突出显示,而没有在"元素"面板上发生任何事情(例如,当您将鼠标悬停在"元素"面板中的镜像打开DOM搜索模式的页面上时),您将必须实现这是你自己的,因为目前没有API.我建议只使用内容脚本向元素添加自定义样式.