La boîte de dialogue Jquery ne s'affiche pas correctement lorsqu'elle est injectée

Question

Je crée une extension pour Chrome et j'essaie d'injecter Jquery lorsque l'utilisateur clique sur un élément de la page. Lorsque j'essaie de créer un dialogue via Jquery en faisant :

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

Puis

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

Seul le bouton de fermeture s'affiche, ainsi que le texte placé à côté. Je ne sais pas pourquoi la boîte de dialogue complète ne s'affiche pas. Ce qui est étrange, c'est que cela varie également d'un site à l'autre. Ainsi, si je charge SO et que j'appelle la boîte de dialogue, ceci apparaît :

Mais si je charge reddit, ceci apparaît :

Il semble que la boîte de dialogue injectée hérite des propriétés des sites Web dans lesquels je l'injecte. J'aimerais l'injecter et faire en sorte qu'elle affiche la boîte par défaut si possible. La seule fois où la boîte par défaut s'affiche, c'est lorsque je l'injecte dans la page d'exemple Jquery index.html qu'ils fournissent :

J'ai jquery-ui.min.css, jquery-ui.min.js et jquery.min.js dans le répertoire de l'extension. Cela fonctionne lorsque j'essaie de charger leur page d'exemple et d'y injecter le dialogue, mais pas sur d'autres sites Web. Si quelqu'un peut m'aider à résoudre ce problème, je l'apprécierais vraiment.

Merci

Answer 1

La seule façon d'isoler complètement vos styles de la page est d'utiliser Shadow DOM (qui a été livré par Chrome en 2013). Vous pouvez également utiliser l'élément Dialog, de sorte que Jquery n'est même pas nécessaire.

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

Références :

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

Si vous souhaitez injecter du code dans une page, vous devrez composer avec le code qui s'y trouve déjà. Par exemple, lorsque vous injectez votre propre jQuery sans prendre certaines mesures supplémentaires, vous détruisez le jQuery existant de la page (en supposant qu'il y en ait un). Vous risquez ainsi de compromettre la fonctionnalité de la page.

Il n'existe actuellement aucun moyen d'isoler complètement votre CSS du CSS de la page. Le mieux que vous puissiez faire est de créer un identifiant unique pour l'élément le plus externe de votre boîte de dialogue et de modifier votre CSS injecté afin que toutes les règles soient préfixées pour correspondre à cet identifiant. Vous pouvez également avoir besoin de règles de réinitialisation spéciales pour cet identifiant afin de remplacer les règles de la page.