Chrome扩展移除Lichess页面Div仅首次生效问题求助

你的问题核心在于两点：

1. 初始定义的bullet1和bullet2变量指向的是页面加载时的DOM节点，当这些节点被移除后，后续元素重新生成时，旧变量已经不指向新的DOM元素，调用remove()自然无效。
2. MutationObserver的回调逻辑太脆弱：只检查第一个mutation的第一个addedNode，且直接匹配完整类名，容易因为节点添加顺序、类名变化或多个节点同时添加而失效。

修正后的代码实现 #

1. 重构移除元素函数

每次调用时重新查询最新的DOM元素，避免依赖已失效的旧节点引用：

function remove_bullet_QP(){
    // 每次执行都重新获取当前DOM中的目标元素
    const bullet1 = document.querySelector('[data-id="1+0"]');
    const bullet2 = document.querySelector('[data-id="2+1"]');
    
    // 先判断元素是否存在，避免执行remove()时触发报错
    if (bullet1) bullet1.remove();
    if (bullet2) bullet2.remove();
}

// 页面加载完成后首次执行移除
remove_bullet_QP();

2. 优化MutationObserver监听逻辑

遍历所有mutation记录和新增节点，用更鲁棒的方式判断目标容器：

const parent_lobby = document.querySelector("#main-wrap > main");

const mutationObserver = new MutationObserver((mutations) => {
    // 遍历所有mutation变更记录
    for (const mutation of mutations) {
        // 遍历当前mutation中所有新增的节点
        for (const node of mutation.addedNodes) {
            // 只处理元素节点，且通过classList判断是否为目标容器
            if (node.nodeType === Node.ELEMENT_NODE && 
                node.classList.contains("lobby__app") && 
                node.classList.contains("lobby__app-pools")) {
                remove_bullet_QP();
                // 找到目标节点后直接跳出循环，避免重复执行移除操作
                return;
            }
        }
    }
});

// 开启监听，同时监听子树节点变化，确保捕获深层节点的添加
mutationObserver.observe(parent_lobby, { 
    childList: true,
    subtree: true
});

关键优化点说明 #

• 每次移除前重新查询元素，确保操作的是当前DOM中存在的最新节点。
• 遍历所有mutation和addedNodes，避免因节点添加顺序问题遗漏目标容器。
• 使用classList.contains判断类名，无需担心类名顺序或额外新增类名的影响。
• 添加subtree: true选项，确保能捕获到父节点深层子元素的添加事件。
• 增加元素存在性判断，防止null.remove()触发控制台报错。

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