javascript - 如何使用带有 chrome 扩展的 react-shadow？

Question

我正在使用 React 开发一个 chrome 扩展。我正在使用 vanilla.js 作为背景和内容脚本。我想在网页的文本框中实现一个像 Grammarly 这样的 shadow-dom 元素。参考这张图片： 见gif的右下角

任何人都知道语法如何实现此功能？语法上的任何确切代码段？我尝试将阴影元素附加到内容脚本中，但结果并不令人满意。这是我尝试过的代码：

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

然后我尝试了这个react-shadow包。但我无法将元素放入网页。那么如何在文本框的完全相同的位置显示这个动态元素呢？

标签： javascriptreactjsgoogle-chromewebgoogle-chrome-extension