Firefox扩展中检测动态加载按钮的最优方案咨询

我正在开发一款Firefox扩展，目标是修改某个按钮的样式。运行脚本时无法检测到该按钮，发现按钮是通过API调用返回的参数动态创建的。尝试直接查询元素、监听父元素的MutationObserver、window.onload及document.readystatechange事件等方案均无效，仅setTimeout延迟2-3秒的方法可行，但担心慢网络场景下失效，需了解现有方案失效的原因，以及检测该按钮加载的最佳方式。

最初尝试的代码 #

const e = document.querySelectorAll('[data-testid="cta:special-offer"]');
console.info('e found', e);

if (e.length > 0) {
    console.info('target found qnd destroyed, stop observing');
    e[0].style.display = 'none';
}

结果：e found NodeList []，但按钮实际存在。

MutationObserver尝试代码 #

/**
 * detect the ul (target) and observe if a child is added, if the child is the button destroy it
 */
function findAndDestroy() {
    console.info('Dom loaded, Script loaded');

    console.info('header', document.getElementsByClassName('header'));

    /*
     * it's seam that the button appear after an api call at 'https://mail.proton.me/api/core/v4/experiments'
     * so I used a mutation and when the ul (parent) is updated I remove the btn if it exists
     */

    // Select the node that will be observed for mutations
    const target = document.getElementsByClassName('topnav-list');
    console.info('target found', target);

    // Options for the observer (which mutations to observe)
    const config = { attributes: false, childList: true, subtree: false };

    if (target > 0) {
        const targetNode = target[0];
        console.info('targetNode found', targetNode);

        // Callback function to execute when mutations are observed
        const callback = (mutationList, observer) => {
            for (const mutation of mutationList) {
                if (mutation.type === 'childList') { // A child node has been added or removed
                    console.info('A child node has been added or removed');
                    removebtn();
                }
            }
        };

        // Create an observer instance linked to the callback function
        const observer = new MutationObserver(callback);

        // Start observing the target node for configured mutations
        observer.observe(targetNode, config);
    }
}

/**
 * remove the btn if found
 */
function removebtn() {
    const e = document.querySelectorAll('[data-testid="cta:special-offer"]');
    console.info('e found', e);

    if (e.length > 0) {
        console.info('target found qnd destroyed, stop observing');
        e[0].style.display = 'none';
    }
}

removebtn()

结果：目标元素仍为空。

事件监听尝试（无效果） #

尝试以下事件监听后，甚至console.log都未输出：

• window.onload =
• document.onreadystatechange =
• document.addEventListener('readystatechange', function() {})

对应代码：

document.addEventListener("load", (event) => {
    console.log("page is fully loaded");
});

// or 
window.onload = (event) => {
    console.log("page is fully loaded");
};

// or
document.addEventListener('readystatechange', () => {
    if (document.readyState === 'complete') {
        findAndDestroy();
    }
})

现有方案失效原因 #

1. 直接查询元素：脚本执行时，按钮还未通过API请求返回的内容动态创建，因此查询结果为空。
2. window.onload/readystatechange事件：这类事件仅等待初始DOM和静态资源加载完成，而按钮是在后续API请求完成后才动态生成的，此时事件早已触发完毕，无法捕获按钮的创建时机。
3. MutationObserver配置问题：
   • 可能topnav-list父元素本身也是动态加载的，导致初始化Observer时找不到目标父节点，监听逻辑根本未启动。
   • 配置中subtree: false，若按钮不是直接作为topnav-list的子节点添加，而是嵌套在更深层级的子元素中，Observer无法捕获到深层DOM变化。
   • 回调仅在子节点变化时调用removebtn()，但可能按钮添加时的Mutation未被正确捕获，或调用时机过早（按钮还未完全渲染到DOM）。

最佳检测方案 #

方案1：改进版MutationObserver（监听整个文档或稳定父节点） #

若不确定按钮的父节点何时加载，可监听整个文档的DOM变化，或先等待稳定的父节点出现后再启动监听：

function waitForElement(selector, callback) {
    // 先检查元素是否已存在
    const element = document.querySelector(selector);
    if (element) {
        callback(element);
        return;
    }

    // 创建Observer监听整个文档的子节点变化
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.addedNodes.length) {
                const element = document.querySelector(selector);
                if (element) {
                    callback(element);
                    observer.disconnect(); // 找到元素后停止监听
                }
            }
        });
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true // 监听所有子树变化
    });
}

// 使用方法
waitForElement('[data-testid="cta:special-offer"]', (button) => {
    button.style.display = 'none';
    console.info('目标按钮已隐藏');
});

优势：无需依赖父节点的存在，自动等待目标元素出现，找到后立即停止监听，性能影响小。

方案2：结合API请求拦截（针对Firefox扩展） #

若已知按钮是特定API请求返回后创建的，可在扩展中拦截该API请求，在请求完成后立即查询并修改按钮：
在扩展的background.js中添加请求拦截：

browser.webRequest.onCompleted.addListener(
    () => {
        // 向内容脚本发送消息，通知API请求完成
        browser.tabs.query({active: true, currentWindow: true}, (tabs) => {
            browser.tabs.sendMessage(tabs[0].id, {action: "apiCompleted"});
        });
    },
    {urls: ["https://mail.proton.me/api/core/v4/experiments"]}
);

在内容脚本中监听消息：

browser.runtime.onMessage.addListener((message) => {
    if (message.action === "apiCompleted") {
        // 立即查询按钮，或短延迟后查询（确保DOM已更新）
        setTimeout(() => {
            const button = document.querySelector('[data-testid="cta:special-offer"]');
            if (button) button.style.display = 'none';
        }, 100);
    }
});

优势：精准匹配按钮创建的时机，避免不必要的DOM监听，效率更高。

方案3：轮询（兜底方案） #

若以上方案均无法生效，可使用轮询作为兜底，设置合理的间隔和超时：

function pollForElement(selector, interval = 500, timeout = 30000) {
    const startTime = Date.now();
    const intervalId = setInterval(() => {
        const element = document.querySelector(selector);
        if (element) {
            element.style.display = 'none';
            console.info('目标按钮已隐藏');
            clearInterval(intervalId);
        } else if (Date.now() - startTime > timeout) {
            console.info('超时未找到目标按钮');
            clearInterval(intervalId);
        }
    }, interval);
}

// 使用方法
pollForElement('[data-testid="cta:special-offer"]');

优势：实现简单，兼容性好，适合复杂的动态加载场景。

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