如何在Chrome扩展程序中突出显示与DevTools相似的元素？

Question

我有兴趣创建一个Chrome扩展程序,其中列出了网页上菜单中具有"id"属性的所有元素.然后,当用户点击菜单中的元素时,网页上的相应元素将突出显示.

我看到当您右键单击并检查元素时,Chrome devtools会突出显示一个元素.我很好奇是否有一些可从DevTools访问的突出显示API？如果没有,那么如何突出显示与devtools如何相似的元素呢？

Answer 1

您可以使用Chrome DevTools正在使用的确切API.您需要通过调试器API调用highlightQuad或highlightNode.您甚至可以指定颜色,并且可以确定突出显示将正确呈现并且不会干扰网站(注入"覆盖"节点,正如Xan建议的那样,并不能保证这一点).另一方面,要做到正确并且用户将无法同时使用扩展和DevTools将会更加棘手(只能有一个调试器API连接).这段代码可以帮助您入门.

Answer 2

Chrome API 不提供对此类突出显示的访问；您需要自己使用覆盖层来实现它。

如果您使用 Chrome API， Chrome API确实可以提供与 DevTools 相同的功能debugger。有关详细信息，请参阅此答案。

在 Chrome 63 (2017-12-06) 之前，编写 DevTools 扩展（即使用devtools.*API 在 DevTools 中显示 UI）并debugger同时使用是不可能的，因为一次只允许一个调试器协议客户端实例。这已经改变了，所以现在它是一个可行的答案，即使 API 文档chrome.debugger尚未更新。

尽管现在可以实现，但请注意debuggerAPI 是一个带有严重警告的 API（发布后添加它可能会自动禁用已安装的扩展 - 需要测试）。

以下是原答案：

您可以使用叠加层自行实现突出显示。

您可以通过查看 uBlock Origin 的元素选择器等来了解通常是如何完成的。

简而言之，该方法使用getBoundingClientRect()所选元素等创建 SVG 叠加层。