Userscriptはバックエンドから提供されたページでのみ動作しますが、SPAのフロントエンドでは動作しません

Question

私はGreasemonkey/Tampermonkeyで実行する次のuserscriptを持っています。

私は、シングルページアプリケーション（SPA）のように、バックエンド、ブートストラップ、およびその他のオンザフライで、HRO経由でいくつかのウェブページを提供するfacebook.comで実行します。

// ==UserScript== 
// @name  facebook 
// @namespace nms 
// @include  http://*.facebook.com/* 
// @include  https://*.facebook.com/* 
// @version  1 
// @grant  none 
// ==/UserScript== 

setTimeout(() => { 
    // generalStuff: 
     document.querySelectorAll(' #left_nav_section_nodes, .fbChatSidebar ').forEach((e)=> { 
      e.style.visibility = "hidden"; 
     }); 

}, 1000); 

私は、コンソール上でこのスクリプトを実行すると、さえHROベースのWebページでは、細かい動作しますが、Greasemoneky/Tampermonkeyからrunnedときには、これらの特定のウェブページには実行されません。

SPAのようなWebページでも問題なくスクリプトを動作させるにはどうすればよいですか？

Answer 1

このような場合、setTiemout、setInterval、およびevent delegationが単独では機能しない場合、それらを実装している状態をメモリにプッシュして、既存の状態を置き換えることができます。そのため、WebページのDOMコンテンツが変更されます。

ここではPHPから直接代わりにAJAJでロードされたデータを交換するために使用されるコードです：

let utilityFunc =()=> { 
    var run = (run)=> { 
     // insert your code here 
    }; 

    var pS = window.history.pushState; 
    var rS = window.history.replaceState; 

    window.history.pushState = (a, b, url)=> { 
     run(url); 
     pS.apply(this, arguments); 
    }; 

    window.history.replaceState = (a, b, url)=> { 
     run(url); 
     rS.apply(this, arguments); 
    }; 

utilityFunc(); 

私はhereを読んでから分かるものです。