Chrome拡張機能の実行中の反応アプリケーションの変更

Question

FacebookのタイムラインのDOMを変更するchromeの拡張機能を作成しようとしています。 Chrome拡張機能がページに作成されたvarまたは関数に挿入されない： https://developer.chrome.com/extensions/content_scripts#execution-environment

このように反応アプリのレンダリングが可能ですか？私は手作業でテキストを変更しようとしていました：

var elements = document.querySelectorAll('.UFILikeLink'); 
for (var i = 0; i < elements.length; i++) { 
    var element = elements[i]; 
    element.innerHTML = element.innerHTML.replace(/Like/g, 'ORly?'); 
} 

しかし後でコンポーネントのブレークと同様に、反応が変わったときに、同じテキストが予想通りに表示されます。どのようなヒントや、アプリケーション全体を壊さずにDOMに反応する可能性がありますか？

Answer 1

Reactは、明確に指定されていない（そしてあなたのケースではない）まで、手動でDOMを突然変異させることはできません。

コンポーネントのDOM表現を変更する唯一の方法は、彼のrender()メソッドを変更することです。このためには、ページの実行中のJavaScriptの関数を変更する必要があります。

セキュリティポリシーとJavaScriptコードのサンドボックス化のため、残念ながら（または幸運なことに）Chrome拡張機能によって許可されていません。

これは、この質問に対する正式なGoogleの回答である必要があります。しかし、この保護を通過するには、<script>タグにあなたのJavaScriptコードを注入して、ReactCompenentの動作をFacebookページのDOMに変更します。これにより、ブラウザはこのコードをホストページのJavaScript VMで強制的に実行します。コンポーネントのrender()機能の変更をReactの初期化の後に実行できるかどうかはわかりませんが、あなたが望むものを実行するのはあなたのユニークな希望です。

解決策が見つかった場合は、Reactがこの種の侵入から保護できるかどうかを知ることは面白いことがあります。