javascript - 注入(inject)时 Jquery 对话框无法正确显示

Question

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

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

然后

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

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

但是如果我加载 reddit，则会出现:

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

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

谢谢

Answer 1

将样式与页面完全隔离的唯一方法是使用 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/HTML/Element/dialog https://developers.google.com/web/fundamentals/getting-started/primers/shadowdom https://developers.google.com/web/updates/2013/09/dialog-element-Modals-made-easy