自作のchrome拡張機能が上手く動作しない

Question

　chromeの拡張機能を作ってみたいと考え始めた初心者の質問です。まずは練習として、youtubeの再生動画上にカーソルを乗せると、alertが表示されるようなコードを書いてみて、拡張機能を読み込んでみたのですが、何も反応してくれませんでした。また、chrome上でデベロッパーツールを開き、以下のcontent.jsをコピーして実行してみたところ、こちらはきちんとalertが表示されました。
よって、jsファイルではなく、manifest.jsonの方に誤りがあると思うのですが、どのようにすれば正しく動作するか教えていただきたいです。

該当のソースコード

{
    "manifest_version": 3,
    "name": "YouTube Video Alert",
    "version": "1.0",
    "permissions": [
        "tabs",
        "activeTab"
    ],
    "host_permissions":[
        "<all_urls>"
    ],
    "content_scripts": [
        {
            "matches": ["https://www.youtube.com/*"],
            "js": ["content.js"]
        }
    ]
}

if(document.querySelector("video")){
    const video = document.querySelector("video");
    video.addEventListener("mouseover", () => {
        alert("test")
    });
}

Answer 1

content.jsが実行されるタイミングではvideo要素が存在しない可能性があります。
content_scriptsで指定したjsが実行されるタイミングのデフォルトはdocument_idleです。
DOMが構築され、window.onloadイベントが処理されるより前のタイミングです。

参考リンク：https://developer.chrome.com/docs/extensions/mv3/content_scripts/

content.jsをコピーして実行するとうまくいくのは、実行のタイミングではすでにvideo要素が存在するからでしょう。

見たところ、manifest.jsonには問題はなさそうです。

setTimeout(function loop() {
    const video = document.querySelector("video");
    if (video != null) {
        //mouseoverにalertを表示する関数を登録する処理
    } else {
        setTimeout(loop, 0);
    }
}, 0);

↑のようにして、video要素が検出されるまでループさせるという手が考えられます。

Answer 2

ChatGPTに質問してみたら次の答えでしたがいかがでしょうか

問題点として、このcontent.jsのプログラムにはマウスオーバーイベントが一度だけ追加される可能性があります。これは、もしページ上で動的に動画が追加されたり入れ替わったりした場合に、新しく追加された動画にはマウスオーバーイベントが登録されていないためです。
対応策としては、MutationObserverを使ってページ上の動画要素の変更を監視し、新しく追加される動画に対してもマウスオーバーイベントを追加する必要があります。
以下は、対応策を考慮したcontent.jsのプログラム例です

// マウスオーバー時の処理を関数化
function handleMouseOver(event) {
    alert("test");
}

// MutationObserverのコールバック関数
function observeVideos(mutationsList, observer) {
    for (const mutation of mutationsList) {
        if (mutation.type === "childList" && mutation.addedNodes.length) {
            // 追加されたノードをループして動画要素を探す
            mutation.addedNodes.forEach((node) => {
                if (node.tagName && node.tagName.toLowerCase() === "video") {
                    // 動画要素が追加されたらマウスオーバーイベントを追加
                    node.addEventListener("mouseover", handleMouseOver);
                }
            });
        }
    }
}

// 初期化：既存の動画要素に対してマウスオーバーイベントを追加
const existingVideos = document.querySelectorAll("video");
existingVideos.forEach((video) => {
    video.addEventListener("mouseover", handleMouseOver);
});

// MutationObserverの設定
const observer = new MutationObserver(observeVideos);
const config = { childList: true, subtree: true };
observer.observe(document.body, config);