如何用纯JavaScript修改动态加载弹窗元素内容（Tampermonkey）

Got it, let's break this down since you can't edit the site's source and need pure vanilla JS for Firefox 56's Tampermonkey. The key challenge here is that the popup loads dynamically, so we can't just grab it on page load—we need to watch the DOM for when it appears.

Here's a complete Tampermonkey script that handles this: #

// ==UserScript==
// @name         Customize Reply Popup
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Modify content of the dynamic reply popup on target site
// @author       Your Name
// @match        *://your-target-site.com/*  // Replace with the actual site URL
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // This function will modify the popup content once it's detected
    function tweakPopup(popup) {
        // Example 1: Change the popup's header text
        const popupHeader = popup.querySelector('.popup-header'); // Replace with your popup's header selector
        if (popupHeader) {
            popupHeader.textContent = 'My Custom Reply Header';
        }

        // Example 2: Replace the popup's input field placeholder
        const replyInput = popup.querySelector('textarea.reply-input'); // Replace with actual input selector
        if (replyInput) {
            replyInput.placeholder = 'Type your custom reply here...';
        }

        // Add any other modifications you need here—adjust selectors to match the popup's actual HTML
    }

    // Set up a MutationObserver to watch for the popup being added to the DOM
    const domObserver = new MutationObserver((mutations) => {
        mutations.forEach(mutation => {
            // Check every new node added to the DOM
            mutation.addedNodes.forEach(node => {
                // Only care about actual HTML elements
                if (node.nodeType === Node.ELEMENT_NODE) {
                    // Look for the popup (replace '.dynamic-reply-popup' with your popup's actual selector)
                    const targetPopup = node.querySelector('.dynamic-reply-popup') || node.closest('.dynamic-reply-popup');
                    if (targetPopup) {
                        tweakPopup(targetPopup);
                        // Optional: Stop observing once we've modified the popup (remove if you need to handle multiple popups)
                        // domObserver.disconnect();
                    }
                }
            });
        });
    });

    // Start watching the entire body for new elements (including nested ones)
    domObserver.observe(document.body, {
        childList: true,
        subtree: true
    });

    // Optional: Add a click listener to the reply button if you want to run pre-checks
    const replyBtn = document.querySelector('.bad_button.js-only');
    if (replyBtn) {
        replyBtn.addEventListener('click', () => {
            console.log('Reply button clicked—waiting for popup to load...');
            // You can add any pre-population logic here if needed
        });
    }
})();

Key Notes for Your Use Case: #

• Replace the @match URL: Make sure it points to the exact site you're targeting.
• Update selectors: Replace all placeholder selectors (like .dynamic-reply-popup, .popup-header) with the actual classes/IDs from the popup's HTML. You can find these using Firefox 56's dev tools (right-click the popup once it loads, select "Inspect Element").
• Firefox 56 Compatibility: MutationObserver is fully supported in Firefox 56, so this script will work without issues.
• Multiple popups: If the site loads multiple popups (e.g., multiple reply windows), remove the domObserver.disconnect() line so the observer keeps watching for new ones.

This approach ensures we catch the popup the moment it's added to the DOM, then modify its content right away—no need to rely on arbitrary timeouts (which are unreliable for dynamic content).

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