Greasemonkey/Tampermonkey脚本：监听表格刷新并重新执行逻辑

核心思路 #

用MutationObserver监听页面中.fgui-loading元素的显示/隐藏状态，等页面加载完成（loading元素消失）后重新执行新增列逻辑；同时通过标记变量区分脚本自身操作和页面原生刷新，避免触发重复监听。

具体实现步骤 #

• 把现有添加列的逻辑封装成独立函数，方便重复调用
• 声明全局标记变量，标记当前是否是脚本自身在修改表格
• 配置MutationObserver监听.fgui-loading的状态变化，判断页面是否完成刷新
• 页面初始加载完成后，先执行一次添加列操作，再启动监听

完整示例代码 #

// ==UserScript==
// @name         Fangraphs Leaders Custom Column
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Add custom column to Fangraphs leaders table
// @author       You
// @match        https://www.fangraphs.com/leaders/major-league
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 标记：是否是脚本自身在更新表格，避免触发监听回调
    let isScriptUpdating = false;

    // 核心函数：添加自定义列
    function addCustomColumn() {
        // 标记当前是脚本操作
        isScriptUpdating = true;

        // 此处替换为你现有的添加列逻辑
        const table = document.querySelector('.rgMasterTable');
        if (!table) return;

        // 表头新增列
        const headerRow = table.querySelector('thead tr');
        const newHeaderCell = document.createElement('th');
        newHeaderCell.textContent = '自定义列';
        headerRow.appendChild(newHeaderCell);

        // 表体每行新增对应单元格
        const bodyRows = table.querySelectorAll('tbody tr');
        bodyRows.forEach(row => {
            const newCell = document.createElement('td');
            newCell.textContent = '自定义内容'; // 可根据行数据自定义内容
            row.appendChild(newCell);
        });

        // 延迟重置标记，避免DOM修改触发的监听回调被误拦截
        setTimeout(() => {
            isScriptUpdating = false;
        }, 100);
    }

    // 监听loading元素状态变化
    function setupLoadingObserver() {
        const loadingElement = document.querySelector('.fgui-loading');
        if (!loadingElement) return;

        const observer = new MutationObserver((mutations) => {
            // 脚本自身操作时跳过监听
            if (isScriptUpdating) return;

            mutations.forEach(mutation => {
                // 判断loading元素是否隐藏（页面刷新完成）
                if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
                    const isLoadingDone = loadingElement.style.display === 'none';
                    if (isLoadingDone) {
                        // 延迟执行，确保表格DOM完全更新
                        setTimeout(addCustomColumn, 300);
                    }
                }
            });
        });

        // 监听loading元素的style属性变化
        observer.observe(loadingElement, {
            attributes: true,
            attributeFilter: ['style']
        });
    }

    // 页面初始加载完成后执行
    window.addEventListener('load', () => {
        addCustomColumn();
        setupLoadingObserver();
    });

})();

关键细节说明 #

• 标记变量延迟重置：用setTimeout延迟重置标记，是因为DOM修改可能触发后续Mutation事件，确保脚本操作完成后再放开监听。
• 延迟执行添加列：表格刷新完成后延迟300ms执行添加逻辑，是为了等待页面表格渲染完全，避免DOM未更新就执行导致找不到元素。
• 动态loading元素兼容：如果.fgui-loading是动态生成的，可以改成监听其父元素的子节点变化，当loading元素出现后再开始监听它的状态。

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