如何突出Chrome扩展程序中的元素，与DevTools的工作方式类似？

Question

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

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

Answer 1

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

Answer 2

Chrome API无法访问此类突出显示;你需要自己用叠加层实现它。

如果您使用debugger API，

Chrome API 可以提供与DevTools相同的功能。有关详细信息，请参阅this answer。

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

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

以下是原始答案：

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

你可以通过查看例如uBlock Origin的element picker来研究它通常是如何完成的。

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