MutationObserver调用observe报错：参数1非Node类型求助

问题现象 #

开发Chrome扩展时触发如下报错：

"Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'."

尽管打印typeof vidPlayer结果为object，直接打印变量也能看到对应的DOM元素结构：
<div class="multiple classes...">(more nested elements..</div>

相关代码 #

内容脚本（index.js） #

const vidPlayer = document.getElementById("movie_player");

const observer = new MutationObserver((mutations) => {
    console.log(typeof vidPlayer); // logs object
    }

});

observer.observe(vidPlayer, { attributes: true, childList: true, subtree: true });

Manifest配置（manifest.json） #

{
    "manifest_version": 3,
    "name": "title",
    "description": "description",
    "version": "1.0",
    "icons": {
        "50": "img.png"
    },
    "content_scripts": [
        {
            "matches": [
                "https://*.youtube.com/watch*"
            ],
            "js": [
                "index.js"
            ],
            "run_at": "document_idle"
        }
    ],
    "action": {
        "default_popup": "index.html",
        "default_icon": "img.png"
    }
}

问题核心原因 #

你看到的控制台打印结果存在误导性：
YouTube页面是动态渲染的，即使run_at设为document_idle，代码执行时目标元素movie_player可能还未被注入到DOM树中。此时document.getElementById("movie_player")返回的是null，但浏览器控制台会动态更新引用对象的显示——当后续页面加载完成后，控制台会把之前的null引用替换成实际的DOM元素，导致你误以为获取元素成功。

解决方案 #

针对动态渲染页面，必须确保目标元素存在后再初始化MutationObserver，推荐两种可靠实现方式：

方式一：轮询检测元素 #

function initPlayerObserver() {
    const vidPlayer = document.getElementById("movie_player");
    if (vidPlayer) {
        const observer = new MutationObserver((mutations) => {
            console.log("Player mutation detected");
        });
        observer.observe(vidPlayer, { attributes: true, childList: true, subtree: true });
        clearInterval(checkLoop);
    }
}

// 每100ms检测一次元素是否加载完成
const checkLoop = setInterval(initPlayerObserver, 100);

方式二：监听父元素等待目标节点 #

// 监听body，等待movie_player节点出现
const bodyObserver = new MutationObserver((mutations) => {
    const vidPlayer = document.getElementById("movie_player");
    if (vidPlayer) {
        const playerObserver = new MutationObserver((mutations) => {
            console.log("Player mutation detected");
        });
        playerObserver.observe(vidPlayer, { attributes: true, childList: true, subtree: true });
        bodyObserver.disconnect();
    }
});

bodyObserver.observe(document.body, { childList: true, subtree: true });

额外优化提示 #

• 每次获取元素后添加非空判断：if (!vidPlayer) return;，避免无效执行。
• 针对YouTube这类SPA页面，需监听路由切换事件，在页面跳转后重新检测元素并初始化观察者。

内容的提问来源于stack exchange，提问作者Milkdromeda