Chrome拡張機能が破損DOM

Question

新しいテキストとリンクでページの特定のテキストを置き換えるChrome拡張機能を作成しています。これを行うには、私が読んだdocument.body.innerHTMLを使用しています。これはDOMを破壊します。拡張機能が有効になっていると、codepen.ioのYouTube動画やページの読み込みが中断されているようです。私はマニフェストのYouTubeとcodepenを除外してこれを修正しようとしましたが、以下のコードでそれらをフィルタリングすることで解決しましたが、うまく機能していないようです。

誰かがdocument.body.innerHTMLを使用する代わりに、ページの読み込みを中断している可能性のある他の問題を私のコードで確認できますか？ありがとう。

var texts=["some text","more text"]; 
if(!window.location.href.includes("www.google.com")||!window.location.href.includes("youtube.com")||!window.location.href.includes("codepen.io")){ 
for(var i=0;i<texts.length;i++){ 
    if(document.documentElement.textContent || document.documentElement.innerText.includes(texts[i])){ 

     var regex = new RegExp(texts[i],'g'); 

     document.body.innerHTML = document.body.innerHTML.replace(regex, 
"<a href='https://www.somesite.org'>replacement text</a>"); 
     } 
    } 
} 

Answer 1

innerHTMLこれを行うには、ショットガンを使用して脳手術を行うのが好きです。言い換えれば、無効なHTMLになることさえあります。このレートでJavaScriptを使用するすべてのウェブサイトをホワイトリストに登録する必要がありますが、これは明らかに実現可能ではありません。

正しい方法は、innerHTMLに手を触れないことです。ページ上のすべてのDOMノード（firstChild、nextSiblingを使用）を再帰的に反復し、テキストノードで一致するものを探します。見つけたら、その単一ノード（replaceChild）をあなたのリンク（createElement）に置き換え、残っているビットについて新しいテキストノード（createTextNode、appendChild、insertBefore）を置き換えます。

基本的にあなたのようノードを探すことになるでしょう：

Text: this is some text that should be linked 

し、プログラムのようなノードに置き換える：あなたはJavaScriptを使用すると、コンテンツを生成するウェブサイトをサポートしたい場合はさらに

Text: this is 
Element: a href="..." 
    Text: replacement text 
Text: that should be linked 

動的に挿入されたコンテンツにもこの置換処理を実行する必要があります。 MutationObserverはこれを行う方法の1つになりますが、おそらくウェブサイトの速度が遅くなることに注意してください。