如何用Tampermonkey脚本自动修改HTML元素class解锁网站按钮

以下是一个能自动将页面中带nolink类的按钮替换为link类的Tampermonkey脚本，解决需要等待TTS完成才能答题的问题：

// ==UserScript==
// @name         解锁答题按钮
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  跳过TTS等待，将nolink类按钮改为link类
// @author       You
// @match        https://你的学习网站网址/*  // 替换成实际网址
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // 核心函数：修改按钮类
    function updateButtonClass() {
        // 找到所有带nolink类的元素
        const targetButtons = document.querySelectorAll('.nolink');
        targetButtons.forEach(btn => {
            btn.classList.remove('nolink');
            btn.classList.add('link');
            // 额外处理：移除按钮禁用状态（如果有的话）
            btn.removeAttribute('disabled');
        });
    }

    // 页面加载完成后立即执行一次
    window.addEventListener('load', updateButtonClass);

    // 监听页面动态内容变化，适配异步加载的按钮
    const observer = new MutationObserver(() => {
        updateButtonClass();
    });

    // 监听整个页面的DOM变化
    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
})();

使用步骤 #

1. 确保浏览器已安装Tampermonkey插件（浏览器应用商店搜索安装即可）
2. 点击Tampermonkey图标，选择「创建新脚本」
3. 删除默认代码，粘贴上述脚本
4. 修改@match行的网址为你的学习网站实际地址（比如https://study.example.com/lesson/*，用*匹配所有子页面）
5. 按Ctrl+S保存脚本，刷新学习页面即可生效

排查要点 #

• 如果脚本未生效，检查@match的网址是否正确，确保覆盖你使用的页面路径
• 打开浏览器控制台（F12），查看Console标签是否有报错：
  • 如果提示找不到元素，可能按钮的选择器需要调整（比如按钮是<button class="btn nolink">，就把querySelectorAll('.nolink')改成querySelectorAll('button.nolink')）
• 脚本仅修改按钮的可点击状态，不会停止TTS朗读，你可以直接操作按钮跳过等待

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