How to highlight elements in a Chrome Extension similar to how DevTools does it?

Question

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

Answer 1

You can use the exact API that Chrome DevTools are using. You will need to call highlightQuad or highlightNode via debugger API. You can even specify the color and you can be certain that the highlight will render correctly and not interfere with the website (injecting an 'overlay' node, as Xan suggested, doesn't guarantee that). On the other hand, it will be much trickier to get right and user won't be able to use both your extension and DevTools at the same time (there can be only one debugger API connection). This code should get you started.