注入时 Jquery 对话框无法正确显示

我正在制作一个 Chrome 扩展，并尝试在用户单击页面上的元素时注入 Jquery。当我尝试通过 Jquery 创建对话框时：

var box = document.createElement('div');
box.id = 'box'
box.title = 'hello'
document.body.appendChild(box);

Then

$("#box").dialog();

仅显示关闭按钮及其旁边的文本。我不确定为什么它不显示完整的对话框。奇怪的是，它也因站点而异。因此，如果我加载 SO 并调用对话框，则会出现以下内容：

但如果我加载 reddit，就会出现：

注入的对话框似乎继承了我将其注入的网站的属性。我想注入它并让它显示默认框（如果可能的话）。它真正显示默认框的唯一一次是我将其注入到他们提供的 Jquery index.html 示例页面中：

我有 jquery-ui.min.css、jquery-ui.min.js 和 jquery.min.js 都在扩展的目录中。当我尝试加载他们的示例页面并在那里注入对话框时，它起作用，但在其他网站上不起作用。如果有人可以帮助解决这个问题，我将非常感激。

Thanks

将样式与页面完全隔离的唯一方法是使用 Shadow DOM（Chrome 于 2013 年推出）。您还可以使用 Dialog 元素，因此甚至不需要 Jquery。

let shadow
try {
 shadow = document.body.attachShadow({ mode: "open" })
 shadow.appendChild(document.createElement("slot"))
} catch(error) {
 shadow = document.body.createShadowRoot()
 shadow.appendChild(document.createElement("content"))
}
let dialog = document.createElement("dialog")
dialog.innerHTML = `
 Test Dialog<br><br>
 <button>Close</button>
`
shadow.appendChild(dialog)
dialog.querySelector("button").addEventListener("click", function() {
 dialog.remove()
})
dialog.showModal() //or show()

参考：

https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom https://developers.google.com/web/updates/2013/09/dialog-element-Modals-made-easy https://developers.google.com/web/updates/2013/09/dialog-element-Modals-made-easy