Estoy desarrollando una extensión de Chrome. Quiero que aparezca un elemento shadowDOM en el cuadro de texto de todas las páginas web. ¿Cómo crearlo? Probé el siguiente código pero está bloqueando toda la vista:

 var host = document.activeElement; var root = host.attachShadow({mode: 'open'}); var div = document.createElement('div'); div.className = 'div'; div.innerHTML = '<style>.div{position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0);}</style>this is shadow dom'; root.appendChild(div);

Solo quiero el elemento de sombra en la esquina de los cuadros de texto. ¿Cuál es la manera correcta de hacer esto?