问题描述
我有兴趣创建一个Chrome扩展程序，该扩展程序列出网页上菜单中具有"id"属性的所有元素.然后，当用户单击菜单中的元素时，网页上的相应元素将突出显示.
I'm interested in creating a Chrome Extension which lists all the elements on the webpage that have an 'id' attribute in a menu. Then, when the user clicks on the element in the menu, the corresponding element on the webpage is highlighted.
当看到鼠标右键并对其进行检查时，我看到Chrome devtools突出显示了一个元素.我很好奇是否可以从DevTools访问一些突出的API?如果不是，那么如何突出显示类似于devtools的元素?
I saw Chrome devtools highlights an element when you right click and inspect on it. I'm curious if there is some highlighting API accessible from DevTools? If not, how does one highlight elements similar to how devtools does it?
推荐答案
Chrome API 确实可以访问与DevTools相同的功能.有关详细信息，请参见此答案.
Chrome API does provide access to the same functionality as DevTools if you use the debugger API. See this answer for details.
在Chrome 63(2017-12-06)之前，不可能编写一个DevTools扩展(即使用devtools.* API在DevTools中显示UI)并同时使用debugger，因为只有一个实例一次允许使用调试器协议客户端.此已更改，所以现在即使chrome.debugger API的文档尚未更新，这也是一个可行的答案.
Before Chrome 63 (2017-12-06), writing a DevTools extension (i.e. using devtools.* APIs to display UI in DevTools) and using debugger at the same time would've been impossible, as only one instance of a debugger protocol client was allowed at once. This has changed, so now it's a viable answer, even if the documentation for chrome.debugger API wasn't updated yet.
即使现在已经可能，请注意debugger API是带有严重警告的API(发布后添加该API可能会自动禁用已安装的扩展-需要测试).
Even though it's now possible, be aware that debugger API is an API with heavy warnings (adding it after publication may auto-disable installed extensions - needs testing).
以下是原始答案:
您可以使用叠加层来突出显示自己.
You can implement the highlighting yourself with an overlay.
例如，您可以查看 uBlock Origin的元素选择器.
简而言之，该方法使用 getBoundingClientRect() 选定的元素.
In short, that method creates an SVG overlay using, among other things, getBoundingClientRect() of the elements selected.
这篇关于如何突出显示Chrome扩展程序中与DevTools相似的元素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！