Angularで開発されたWebページのOnLoadイベントを取得したい


Angular初心者です。  
Angularで開発されたWebアプリケーション（変更不可）を、  
GoogleChromeブラウザの拡張機能を作成して、カスタマイズしようとしています。

Angularで開発されたWebページで、  
全Domエレメントのロードが完了したか判定する方法を、教えていただけないでしょうか？

以下のように、windowのonloadイベントのタイミングでは、  
利用したいDomエレメントを取得することができませんでした。  
しかしながら、onloadイベント後さらに５秒待ってから  
document.querySelectorAllを実行したところ取得することができました。  
（他にもっとよい方法はないでしょうか？）

以下は、GoogleChromeブラウザの拡張機能から実行させたコードです。

[code]

    window.onload = function () {
      // クラス名でボタン要素を取得
      var buttons = document.querySelectorAll('.primary.submit');
      // イベントリスナーを追加
      buttons[0].addEventListener('click', function () {
        alert('Button was clicked!');
      });
    };
    
[/code]




ChatGPT先生から、回答を得られました。  
Angularは、windowのonloadイベント後に、各Domエレメントがロードされるようです。  
したがって、独自にDomがロードされたかどうか監視する必要があります。  
監視には、JavaScriptの標準機能のMutationObserverクラスを利用できました。

以下は、Domエレメント(primary.submitクラスを持つボタン)がロードされたときを、  
検知するコードです。

[code]

    var observerCallback = function (mutationsList, observer) {
      for (var mutation of mutationsList) {
        if (mutation.type === 'childList') {
          var buttons = document.querySelectorAll('.primary.submit');
          if (buttons.length > 0) {
            console.log('Length:[' + buttons.length + ']')
    
            // ※※※ここにロードが完了したDomを制御するコードを書く
    
            // ボタンにイベントリスナーを追加
            buttons[0].addEventListener('click', onClickFunc);
            // 一度ボタンを見つけたらObserverを切断
            observer.disconnect();
          }
        }
      }
    };
    
    // 主処理
    try {
      console.log('--- Start');
    
      // Observerの設定
      var observerOptions = {
        childList: true,
        subtree: true
      };
      // MutationObserverのインスタンスを作成し、body要素を監視
      var observer = new MutationObserver(observerCallback);
      observer.observe(document.body, observerOptions);
    }
    finally {
      console.log('--- End');
    }
    
[/code]

manifest.json

[code]

    {
      "manifest_version": 3,
      "name": "XXXX Extension",
      "version": "1.0.0",
      "description": "XXXXとAIとを接続するための拡張機能",
    
      "host_permissions": [
        "http://localhost:5000/*"
      ],
    
      "content_scripts": [
        {
          "matches": [
            "*://*.XXXX.dev/litedms/*"
          ],
          "js": [
            "content.js"
          ]
        }
      ],
      "background": {
        "service_worker": "background.js"
      }
    }
    
[/code]




ChatGPT先生から、回答を得られました。  
Angularは、windowのonloadイベント後に、各Domエレメントがロードされるようです。  
したがって、独自にDomがロードされたかどうか監視する必要があります。  
監視には、JavaScriptの標準機能のMutationObserverクラスを利用できました。

以下は、Domエレメント(primary.submitクラスを持つボタン)がロードされたときを、  
検知するコードです。

[code]

    var observerCallback = function (mutationsList, observer) {
      for (var mutation of mutationsList) {
        if (mutation.type === 'childList') {
          var buttons = document.querySelectorAll('.primary.submit');
          if (buttons.length > 0) {
            console.log('Length:[' + buttons.length + ']')
    
            // ※※※ここにロードが完了したDomを制御するコードを書く
    
            // ボタンにイベントリスナーを追加
            buttons[0].addEventListener('click', onClickFunc);
            // 一度ボタンを見つけたらObserverを切断
            observer.disconnect();
          }
        }
      }
    };
    
    // 主処理
    try {
      console.log('--- Start');
    
      // Observerの設定
      var observerOptions = {
        childList: true,
        subtree: true
      };
      // MutationObserverのインスタンスを作成し、body要素を監視
      var observer = new MutationObserver(observerCallback);
      observer.observe(document.body, observerOptions);
    }
    finally {
      console.log('--- End');
    }
    
[/code]

manifest.json

[code]

    {
      "manifest_version": 3,
      "name": "XXXX Extension",
      "version": "1.0.0",
      "description": "XXXXとAIとを接続するための拡張機能",
    
      "host_permissions": [
        "http://localhost:5000/*"
      ],
    
      "content_scripts": [
        {
          "matches": [
            "*://*.XXXX.dev/litedms/*"
          ],
          "js": [
            "content.js"
          ]
        }
      ],
      "background": {
        "service_worker": "background.js"
      }
    }
    
[/code]

