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

Question

我想以与元素检查器（在开发工具中）相同的方式突出显示我的 chrome dev-tools 扩展中的 dom 元素。有一些特殊的API吗？谢谢

Answer 1

每当您使用 DevTools 控制台评估检查页面中的某些代码时，DevTools 都会公开一堆称为命令行 API的帮助程序调用。此 API 包括 inspect() 调用，其效果与用户从上下文菜单调用“检查元素”具有相同的效果，即调出元素面板并突出显示节点。使用 chrome.devtools.inspectedWindow.eval() 由 DevTools 扩展程序评估的代码可以使用 inspect() 调用以及其他命令行 API，因此您可以执行以下操作：

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

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