google-chrome-extension - 如何像 DevTools 一样突出显示 Chrome 扩展中的元素？

Question

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

当您右键单击并检查它时，我看到 Chrome devtools 突出显示了一个元素。我很好奇是否可以从 DevTools 访问一些突出显示的 API？如果不是，如何突出显示类似于 devtools 的元素？

Answer 1

您可以使用 Chrome DevTools 正在使用的确切 API。您需要调用 highlightQuad或 highlightNode通过debugger API .您甚至可以指定颜色，并且可以确定突出显示将正确呈现并且不会干扰网站(正如 Xan 建议的那样，注入(inject)“覆盖”节点并不能保证这一点)。另一方面，正确操作会更加棘手，并且用户将无法同时使用您的扩展程序和 DevTools(只能有一个调试器 API 连接)。 This code应该让你开始。