FacebookのステータスアップデートでChrome拡張機能を使用して複数の行にまたがる文字を置き換える

Question

Google Chrome拡張機能を作成して、ユーザーがコンポーネント内のテキストを選択できるようにしました。これはほとんどのサイトで効果的です。しかし、Facebookはステータス更新を別々に処理します。 1つのテキストボックスのように見えても、実際にはこのテキストボックスのすべての1行にdiv > div > span > spanという構文を使用しているようです。私はなぜ彼らがこれをすることを選んだのか分かりませんが、それは複数の行のテキストをより複雑に置き換えることになります。

Facebookステータスの更新で複数の行（または複数行の連続部分）を選択して置き換える方法はありますか？

私のコードの関連部分は次のようになります。私は、私は何の問題を持っていない単一の行にテキストを置き換えるならば、私のコードは、今動作方法に基づいて

function replace_text(language){ 
    let selection = window.getSelection(); 
    string = selection.toString(); 

    /* This section contains code that uses string.replace to replace characters in the string. */ 

    document.execCommand("insertText", false, string); 

} 

。しかし、複数の行にまたがるテキストを置き換えると、使用できない空白の入力ボックスになります。間違いなく、それはhtmlコードの一部を削除しているためです。置き換えプロセスが他のサイトだけでなくFacebookのためにも適切に機能するように、コードを修正するにはどうすればよいですか？

Answer 1

現在のところ、すべてのステータス更新（およびコメント）の中の1つの共通テーマは、data-textがtrueに設定されたspan要素の1つまたはセット内にテキストが存在することです。それでは、それらを対象としてみましょう：私にとって

document.querySelectorAll("span[data-text='true']"); 

、私はステータスフィールドにダミーテキストの1行を3行とコメント欄を入力しました。私はそれがこれら4本の累積的な線のアレイを返すコンソールに上記のコードを実行するときに：そのアレイと

>>> (4) [span, span, span, span] 

、Iはスパンを反復処理とinnerTextを交換するArray.prototype.forEach()方法を使用することができます：

document.querySelectorAll("span[data-text='true']").forEach(function(element) { 
    element.innerText = element.innerText.replace('Lorem ipsum','Hello world'); 
}); 

ただし、に注意することが重要です。これらの変更はHTML自体で行われており、Facebookはすべてのデータを直接HTMLに保存しません。フィールドにテキストを入力したり、フォーカスを外したり、フィールド内のテキストを変更したり、フィールドのフォーカスを合わせたりすると、望ましくないイベントが発生する可能性があります。再フォーカスするとき、ReactのVirtual DOMのような先のソースから、そのフィールドに焦点を合わせる前に、テキストのデータを取得すると信じています。これを防ぐには、フィールドをクリックした後（realまたはsimulate）またはMutationObserver（src）の何らかのタイプを使用して入力したときに、変更を行う必要があります。