I'm developing a chrome extension. I want a shadowDOM element to be appear in the textbox of all the webpages. How to create it? I tried the following code but it is blocking the entire view:

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);

I just want the shadow element in the corner of the textboxes. What is the right way to do this?