Chrome插件开发：如何在指定DOM元素加载后调用JS函数

问题描述 #

开发Chrome插件时，调用newProjectLoaded()函数通过类名获取left-sidebar-links元素返回undefined，原因是函数在目标DOM元素加载前已执行。目前用5秒延迟临时解决，需要更可靠的方法在目标元素加载完成后再调用该函数。

相关代码：

(() => {
    let wfLeftControls;
    let currentProject = "";
    let dynButtons;

    const newProjectLoaded = async () => {
        const notesBtnExists = document.getElementsByClassName("notes-button")[0];

        if (!notesBtnExists) {
            const notesBtnElement = document.createElement("div");
            const notesBtnSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            const notesBtnPath = document.createElementNS('http://www.w3.org/2000/svg', 'path');

            notesBtnElement.className = "button " + "top " + "notes-button ";
            /* active class highlights that the menu is active */

            notesBtnSvg.setAttribute('viewBox', '0 0 45 45');
            notesBtnSvg.setAttribute('fill', '#ffffff');
            notesBtnSvg.classList.add('bem-Svg');
            notesBtnSvg.setAttribute('style', 'display: block; position: relative;');

            notesBtnPath.setAttribute('d', 'M9 39h30V20.25L27.75 9H9v30Zm0 3q-1.25 0-2.125-.875T6 39V9q0-1.25.875-2.125T9 6h20l13 13v20q0 1.25-.875 2.125T39 42Zm4.95-8.55h20.1v-3h-20.1Zm0-7.95h20.1v-3h-20.1Zm0-7.95h13.8v-3h-13.8ZM9 39V9v30Z');
            notesBtnPath.setAttribute('fill', '#fffff');

            notesBtnSvg.appendChild(notesBtnPath);
            notesBtnElement.appendChild(notesBtnSvg);
            notesBtnElement.addEventListener("click", NotesPanelEventHandler);
            /* to open or close notes panel when user clicks icon */

            setTimeout(() => {
                wfLeftControls = document.getElementsByClassName("left-sidebar-links")[0];
                wfLeftControls.appendChild(notesBtnElement);
            }, 5000);
        }
    };

    chrome.runtime.onMessage.addListener((obj, sender, response) => {
        const { type, projectID } = obj;
        if (type === "NEW") {
            currentProject = projectID;
            newProjectLoaded();
        }
    });

    window.onload = newProjectLoaded();

})();

解决方案 #

方法1：用MutationObserver监听DOM动态变化（推荐） #

这是应对动态加载DOM最可靠的方案，能精准监听目标元素的出现：

修改newProjectLoaded()函数，替换掉原有的setTimeout：

const newProjectLoaded = async () => {
    const notesBtnExists = document.getElementsByClassName("notes-button")[0];

    if (!notesBtnExists) {
        // 保留创建按钮元素的所有代码不变...

        // 封装等待目标元素的工具函数
        const waitForElement = (selector) => {
            return new Promise(resolve => {
                // 先检查元素是否已存在
                const existingElement = document.querySelector(selector);
                if (existingElement) {
                    return resolve(existingElement);
                }

                // 创建DOM观察者
                const observer = new MutationObserver(() => {
                    const element = document.querySelector(selector);
                    if (element) {
                        resolve(element);
                        observer.disconnect(); // 找到元素后停止监听
                    }
                });

                // 配置监听范围：监听body下所有子节点的添加/移除
                observer.observe(document.body, {
                    childList: true,
                    subtree: true
                });
            });
        };

        // 等待left-sidebar-links加载完成后插入按钮
        wfLeftControls = await waitForElement(".left-sidebar-links");
        wfLeftControls.appendChild(notesBtnElement);
    }
};

方法2：使用DOMContentLoaded事件（针对初始页面加载） #

如果目标元素是页面初始渲染的一部分，可改用DOMContentLoaded事件，它会在DOM结构加载完成后立即触发（无需等待图片、样式等资源）：

// 替换原代码中的window.onload = newProjectLoaded();
document.addEventListener('DOMContentLoaded', newProjectLoaded);

注意：该方法仅适用于首次页面加载，若页面是单页应用（动态切换内容），仍需用MutationObserver。

方法3：修复window.onload的调用错误 #

原代码中window.onload = newProjectLoaded();是立即执行了函数，正确写法应为赋值函数引用（去掉括号）：

window.onload = newProjectLoaded;

不过window.onload会等待所有资源加载完成，触发时机晚于DOMContentLoaded，优先级低于前两种方法。

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