I am developing a Chrome extension.

I would like to develop a feature that when you Hover an element on the page, a frame appears around the element, but it doesn't work with the Shadow DOM element.

I believe this is due to the fact that the shadow dom element is not loaded on the page at the time the load event fires.

This is especially true for pages with nested shadow doms. ex.) https://developer.servicenow.com/dev.do

However, I do not know how to detect that the entire page, including the shadow dom, has finished loading.

Please let me know if you know of a solution.

function addAttribute(e) {
  const el = e.path || (e.composedPath && e.composedPath());
  el.setAttribute('style', "outline: solid 4px !important");
}

function removeAttribute(e) {
  const el = e.path || (e.composedPath && e.composedPath());
  el.removeAttribute('style', "outline: solid 4px !important");
}

function addEventListenerToShadow(root) {
  const tw = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT);
  
  do {
    const currentNode = tw.currentNode;
    if (currentNode instanceof ShadowRoot) continue;
    if (currentNode.shadowRoot) {
      currentNode.shadowRoot.addEventListener('mouseover', addAttribute)
      currentNode.shadowRoot.addEventListener('mouseout', removeAttribute)
      addEventListenerToShadow(currentNode.shadowRoot);
    }
  } while (tw.nextNode());
}

window.onload = addEventListenerToShadow(document.body);