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