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

google-chrome-devtoolsgoogle-chrome-extension

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.

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?

Best Answer

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.

Related Solutions

Javascript – How to wait until an element exists

DOMNodeInserted is being deprecated, along with the other DOM mutation events, because of performance issues - the recommended approach is to use a MutationObserver to watch the DOM. It's only supported in newer browsers though, so you should fall back onto DOMNodeInserted when MutationObserver isn't available.

let observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (!mutation.addedNodes) return

    for (let i = 0; i < mutation.addedNodes.length; i++) {
      // do things to your newly added nodes here
      let node = mutation.addedNodes[i]
    }
  })
})

observer.observe(document.body, {
    childList: true
  , subtree: true
  , attributes: false
  , characterData: false
})

// stop watching using:
observer.disconnect()

Javascript – Find JavaScript function definition in Chrome

Lets say we're looking for function named foo:

(open Chrome dev-tools),
Windows: ctrl + shift + F, or macOS: cmd + optn + F. This opens a window for searching across all scripts.
check "Regular expression" checkbox,
search for foo\s*=\s*function (searches for foo = function with any number of spaces between those three tokens),
press on a returned result.

Another variant for function definition is function\s*foo\s*\( for function foo( with any number of spaces between those three tokens.

Best Answer

Related Solutions

Javascript – How to wait until an element exists

Javascript – Find JavaScript function definition in Chrome

Related Topic