0

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

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

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

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

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

1 件の回答 1

0

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

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

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');
}

manifest.json

{
  "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"
  }
}

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。