Chrome扩展content脚本修改DOM仅闪现、首次按钮点击不生效问题

两个异常都是DOM操作时机错误导致的：

• 首次点击按钮无效果：你绑定在按钮上的load函数和页面原生的表格加载逻辑同步触发，执行插入单元格操作时，页面还没完成新表格数据的渲染，你拿到的是点击前的旧DOM，修改不会作用在新加载的表格上。
• 修改1秒后被覆盖：你插入单元格的操作执行在页面原生表格渲染完成之前，等页面拿到接口数据重绘整个表格时，之前插入的DOM节点会被直接替换。第二次点击能临时生效，只是因为第一次点击后表格已经完成渲染，修改操作命中了现有DOM，但下一次表格刷新时还是会被覆盖。

放弃在按钮点击事件里同步执行DOM修改的思路，改用MutationObserver监听目标表格的DOM变动，等页面原生逻辑完成表格渲染后再执行插入列的操作，同时加重复校验避免多次插入相同列。

修复后的content.js代码 #

let tableObserver = null;

// 自定义列插入逻辑
function insertCustomColumn() {
    const table = document.getElementById("table1");
    if (!table || table.rows.length === 0) return;

    // 校验是否已经插入过自定义列，避免重复添加
    const existHeader = table.rows[0].cells[9];
    if (existHeader && existHeader.textContent.trim() === "PLACEMENT HEADER") return;

    // 插入表头单元格
    const headerCell = table.rows[0].insertCell(9);
    headerCell.innerHTML = "PLACEMENT HEADER";

    // 逐行插入内容单元格
    for (let i = 1; i < table.rows.length; i++) {
        const currentRow = table.rows[i];
        // 跳过已经插入过单元格的行
        if (currentRow.cells.length >= 10 && currentRow.cells[9].textContent.trim() === "PLACEMENT TEXT") continue;
        const contentCell = currentRow.insertCell(9);
        contentCell.innerHTML = "PLACEMENT TEXT";
    }
}

// 初始化表格监听
function initTableObserver() {
    const table = document.getElementById("table1");
    if (!table) return;

    // 先断开之前的监听，避免重复绑定
    if (tableObserver) tableObserver.disconnect();

    let debounceTimer = null;
    tableObserver = new MutationObserver(() => {
        // 防抖：等DOM连续变动结束100ms后再执行插入，确保页面原生渲染完成
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(insertCustomColumn, 100);
    });

    // 监听表格的所有子节点、内容变动
    tableObserver.observe(table, {
        childList: true,
        subtree: true,
        characterData: true
    });

    // 初始化时如果表格已存在，先执行一次插入
    insertCustomColumn();
}

// 页面加载完成后初始化
document.addEventListener("DOMContentLoaded", () => {
    // 初始化监听
    initTableObserver();

    const searchBtn = document.getElementById("search-go");
    if (searchBtn) {
        searchBtn.addEventListener("click", () => {
            // 点击搜索按钮后延迟检查，兼容表格被完全移除后重新渲染的场景
            setTimeout(initTableObserver, 50);
        });
    }
});

额外优化建议 #

你当前manifest.json里的matches配置为*://*./*，会在所有网站注入脚本，建议修改为实际需要生效的站点域名规则，避免不必要的性能消耗和兼容性问题。

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