注入時にJqueryダイアログが正しく表示されない

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をすべて拡張のディレクトリに保存します。サンプルページを読み込んでそこにダイアログを挿入しようとすると動作しますが、他のWebサイトには挿入されません。誰でもこれを解決することができれば、本当に感謝しています。

おかげ

Answer 1

スタイルをページから完全に分離する唯一の方法は、Shadow DOM（2013年にChromeで出荷）を使用することです。 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

Answer 2

ページに任意のコードを挿入するつもりなら、あなたはすでにそこにあるものは何でもコードと競合する必要があります。たとえば、あるステップを追加せずに独自のjQueryをインジェクトすると、ページの既存のjQueryが壊れてしまいます。これを行うと、ページの機能が損なわれる可能性があります。

現在、CSSをページCSSから完全に分離する方法はありません。あなたができる最善のことは、ダイアログの最も外側の要素の可能性のある一意のIDを作成し、挿入されたCSSを変更して、すべての規則がこのIDと一致するように接頭辞を付けることです。ページが何をしているのかを上書きするために、そのIDの特別なリセットルールが必要な場合もあります。