Javascript 创建一个Chrome扩展，在页面上显示内容，在inspect元素中不可见

我想写一个Chrome扩展，在每个

textarea

元素的角落添加一个按钮，并在点击后显示一个警报。所以我检查了一些类似的扩展，比如Grammarly，我注意到它不会在页面上创建任何元素。所以我的问题是：我怎么能写这样的东西

我试图通过在

content.js

中添加一些按钮来实现这一点，不幸的是，该按钮将元素添加到页面中，并以检查模式显示

content.js:

const btn = document.createElement('button')
btn.textContent = "Okay"
btn.onclick = function() { alert('blah'); };
document.documentElement.append(btn)

我想要的示例：

const btn = document.createElement('button')
btn.textContent = "Okay"
btn.onclick = function() { alert('blah'); };
document.documentElement.append(btn)

---

如果要将其附加到textarea，首先必须选择该textarea。现在您正在将其附加到文档的根中。@Michel，我的问题在其他地方。我不想像Grammarly扩展那样在检查模式下显示它。

“所以我检查了一些类似的扩展，比如Grammarly，我注意到它不会在页面上创建任何元素。”

-真的吗？谢谢@Turnip，标签在别的地方，我找不到。现在我找到了！语法创建一个DOM元素，唯一的“诀窍”是它将UI放在ShadowDOM中，如果需要，请参阅教程。