无权限安装工具，点击按钮DOM更新后如何延续Vanilla JS脚本？

Hey there, I get your pain—dealing with dynamic DOM updates in browser automation is always tricky when you can't modify the app itself. Let's break down fixes for both your issues:

Issue 1: Waiting for Dynamic Elements to Load (Instead of setTimeout) #

Fixed setTimeout is unreliable because you can't predict exactly when the page finishes updating. Here are two robust alternatives:

Option 1: Polling for Elements (Simple & Foolproof) #

This checks repeatedly until the target element exists—perfect for quick scripts:

function waitForElement(selector, callback) {
  // Check every 300ms (adjust based on how fast your page updates)
  const checkInterval = setInterval(() => {
    const targetElement = document.querySelector(selector);
    if (targetElement) {
      clearInterval(checkInterval); // Stop checking once found
      callback(targetElement); // Run your fill logic
    }
  }, 300);
}

// How to use it after clicking "Next"
function handleNextPage() {
  // Wait for the new input element to exist
  waitForElement('#doesntexistyet', (input) => {
    // Fill your data here
    input.value = 'Your repetitive data';
    
    // Re-bind the next button for the next round
    const nextBtn = document.querySelector('#next-button');
    // Remove old listener first to avoid duplicates
    nextBtn.removeEventListener('click', handleNextPage);
    nextBtn.addEventListener('click', handleNextPage);
  });
}

// Initialize the first page and bind the next button
document.querySelector('#next-button').addEventListener('click', handleNextPage);

Option 2: MutationObserver (Efficient DOM Change Listening) #

This listens directly for changes in the DOM, so it triggers as soon as the element is added—no unnecessary polling:

function waitForElement(selector, callback) {
  // Target the closest parent element that doesn't get replaced (instead of body)
  const parentNode = document.querySelector('#page-container') || document.body;
  
  const observer = new MutationObserver((mutations) => {
    const targetElement = document.querySelector(selector);
    if (targetElement) {
      observer.disconnect(); // Stop listening once we find the element
      callback(targetElement);
    }
  });

  // Listen for new child elements in the parent (and subtrees)
  observer.observe(parentNode, { childList: true, subtree: true });
}

// Same usage as polling
waitForElement('#doesntexistyet', (input) => {
  input.value = 'Automated data';
  // Re-bind next button logic here
});

Issue 2: Console Logs Getting Cleared on Page Update #

Chrome DevTools has a built-in fix for this:

1. Open the DevTools console (F12 → Console tab)
2. Click the gear icon (Settings) in the top-right corner of the console
3. Check the Preserve log option

This will keep all previous logs even when the page updates or refreshes. If you want an extra backup, you can store logs in a global variable:

// Create a global log array
window.automationHistory = [];

// Custom log function
function autoLog(message) {
  window.automationHistory.push(`[${new Date().toLocaleTimeString()}] ${message}`);
  console.log(message); // Still log to console
}

// To view all logs later, just type this in the console:
// window.automationHistory

Bonus Tips for Your Workflow #

• Save your script as a Bookmarklet: Minify your code and wrap it in javascript:(function(){ /* your code here */ })(); so you can click the bookmark to run it instantly on any page.
• Use debugger; statements in your code to pause execution at specific points—this helps you inspect the DOM when things aren't working as expected.
• Avoid hardcoding selectors if possible; use more robust ones (like data-* attributes) if the page uses them, since IDs/classes might change.

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