Chrome控制台可运行的Office按钮脚本在Tampermonkey中失效求助

你的脚本在Tampermonkey中失效，核心问题集中在逻辑错误和DOM就绪时机上：

1. 按钮添加逻辑错误 #

• addOffice2013函数里，把notes.appendChild(btn2013)写在了按钮的onclick回调内。这意味着只有点击按钮时才会插入DOM，但按钮本身还没被添加到页面，根本无法触发点击，导致该按钮永远不会显示。
• btn2019创建完成后，没有执行插入DOM的操作，所以也不会出现在页面上。

2. DOM元素可能未就绪 #

即便设置了@run-at document-body，页面动态渲染的目标容器（比如#create-form下的元素）可能还没生成，导致document.querySelector返回null，后续操作全部失效。

修复后的完整脚本 #

// ==UserScript==
// @name         SNIPEIT OFFICE BUTTONS
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  添加Office版本快速选择按钮
// @author       You
// @match        你的目标URL
// @grant        none
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

    // 等待目标元素加载完成的工具函数
    function waitForElement(selector, callback) {
        const element = document.querySelector(selector);
        if (element) {
            callback(element);
            return;
        }
        // 监听DOM变化，直到元素出现
        const observer = new MutationObserver((mutations) => {
            const element = document.querySelector(selector);
            if (element) {
                observer.disconnect();
                callback(element);
            }
        });
        observer.observe(document.body, { childList: true, subtree: true });
    }

    // 目标容器选择器
    const targetSelector = "#create-form > div > div.box-body > div > div:nth-child(10) > div";

    waitForElement(targetSelector, (notes) => {
        // 创建Office 2013按钮
        let btn2013 = document.createElement("button");
        btn2013.innerHTML = "Office 2013 TM";
        btn2013.style.marginRight = "8px"; // 增加间距优化显示
        btn2013.onclick = () => {
            alert("Office 2013 已选择");
            // 可在此添加实际业务逻辑，比如填充表单
        };
        notes.appendChild(btn2013);

        // 创建Office 2019按钮
        let btn2019 = document.createElement("button");
        btn2019.innerHTML = "Office 2019 TM";
        btn2019.onclick = () => {
            alert("Office 2019 已选择");
            // 可在此添加实际业务逻辑
        };
        notes.appendChild(btn2019);
    });
})();

关键修复点说明 #

• 修正按钮插入逻辑：将按钮的appendChild操作移出onclick回调，创建完成后直接插入目标容器，确保按钮能正常显示。
• 添加元素等待机制：用MutationObserver监听DOM变化，确保目标容器存在后再执行按钮创建逻辑，避免动态渲染导致的元素获取失败。
• 调整运行时机：将@run-at改为document-end，确保页面基础DOM结构已加载完成。

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