注入时{J 44ery对话框无法正确显示

Question

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

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

然后

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

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

但如果我加载reddit，则显示：

注入的对话框似乎是从我注入的网站继承属性。我想注入它并让它显示默认框（如果可能的话）。它实际显示默认框的唯一时间是我将它注入它们提供的Jquery index.html示例页面中：

我在扩展程序的目录中有jquery-ui.min.css，jquery-ui.min.js和jquery.min.js。它在我尝试加载他们的示例页面并在那里注入对话框时有效，但在其他网站上却没有。如果有人可以帮忙解决这个问题，我真的很感激。

由于

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

参考文献：

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

Answer 2

如果您要将任何代码注入页面，您将不得不与已经存在的任何代码竞争。例如，当你注入自己的jQuery而不采取某些额外的步骤时，你就会破坏页面的现有jQuery（假设它有一个）。这样做可能会破坏页面功能。

目前还没有一种方法可以将CSS与页面CSS完全隔离。您可以做的最好的事情是为对话框的最外层元素创建一个可能唯一的ID，并更改您注入的CSS，以便所有规则都带有前缀以匹配此ID。您可能还需要一些特殊的重置规则来覆盖该页面的任何内容。