如何像 DevTools 那样突出显示 Chrome 扩展中的元素？

我有兴趣创建一个 Chrome 扩展程序，它列出了网页上菜单中具有“id”属性的所有元素。然后，当用户单击菜单中的元素时，网页上相应的元素就会突出显示。

当您右键单击并检查某个元素时，我看到 Chrome 开发工具会突出显示该元素。我很好奇是否有一些可以从 DevTools 访问的突出显示 API？如果没有，如何像 devtools 那样突出显示元素？

您可以使用 Chrome DevTools 正在使用的确切 API。您需要致电高亮四边形 https://chromedevtools.github.io/devtools-protocol/tot/Overlay/#method-highlightQuad or 高亮节点 https://chromedevtools.github.io/devtools-protocol/tot/Overlay/#method-highlightNode via 调试器API https://developer.chrome.com/extensions/debugger。您甚至可以指定颜色，并且可以确定突出显示将正确渲染并且不会干扰网站（正如 Xan 建议的那样，注入“覆盖”节点并不能保证这一点）。另一方面，正确处理会更加棘手，并且用户将无法同时使用您的扩展和 DevTools（只能有一个调试器 API 连接）。这段代码 https://github.com/kdzwinel/DevToolsVoiceCommands/blob/26d2f8a78bb681a121bddd62e4cb57225e726304/scripts/lib/commands/node-inspection.js#L29应该可以帮助你开始。