Chrome扩展：页面完全加载后执行函数（Hulu单页场景）

Hey there! Let's work through this—since Hulu is a single-page app (SPA), navigating the menu only updates parts of the DOM instead of reloading the whole page, which is why load and DOMContentLoaded don't fire again. We need a way to wait for the new content to fully load after each URL change, and here's how to adapt your existing code to do that:

Core Approach #

1. First Load: Keep using window.addEventListener("load") for the initial page load—this works perfectly for when the user first opens Hulu.
2. Post-Navigation: After detecting a URL change with your MutationObserver, wait for Hulu's main content container (the part that updates when you click menu items) to be fully rendered before running myFunction. We'll use a helper function to watch for this content element, and optionally add a small delay to ensure media like images/videos are loaded too.

Step-by-Step Code Implementation #

1. Add a Helper Function to Wait for Content #

This function will watch the DOM until your target content element exists, then trigger your callback:

// Helper to wait for a specific element to load in the DOM
function waitForElement(selector, callback) {
  const targetElement = document.querySelector(selector);
  if (targetElement) {
    callback(targetElement);
    return;
  }

  // If element doesn't exist yet, observe DOM changes until it does
  const contentObserver = new MutationObserver((mutations) => {
    mutations.forEach(() => {
      const targetElement = document.querySelector(selector);
      if (targetElement) {
        contentObserver.disconnect(); // Stop observing once we find it
        callback(targetElement);
      }
    });
  });

  contentObserver.observe(document.body, { childList: true, subtree: true });
}

2. Update Your Existing MutationObserver Code #

Integrate the helper into your original code to handle post-navigation content loading:

var oldHref = document.location.href;

window.addEventListener("load", function() {
  // Execute on first full page load
  myFunction();

  var bodyList = document.querySelector("body"),
  observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (oldHref != document.location.href) {
        oldHref = document.location.href;
        
        // Wait for Hulu's main content to load before running myFunction
        // Replace ".MainContent" with the actual selector for Hulu's dynamic content area
        // (Use Chrome DevTools to inspect the element after navigating a menu item)
        waitForElement(".MainContent", () => {
          // Optional: Add a small delay to ensure media (images/videos) finish loading
          setTimeout(() => {
            myFunction();
          }, 500); // Adjust this time based on how long Hulu takes to load content
        });
      }
    });
  });

  var config = { childList: true, subtree: true };
  observer.observe(bodyList, config);
});

Key Notes #

• Find the Right Selector: Open Hulu, navigate to a menu item, then use Chrome DevTools to inspect the main content area that updates. Replace .MainContent with the actual class, ID, or attribute selector for that element (e.g., #app-content or .hulu-main-content).
• Adjust the Delay: The setTimeout is optional but helpful for cases where Hulu loads images or videos after the DOM element is added. Test different values (300-1000ms) to find what works best.
• Alternative: Use requestIdleCallback: If you prefer not to use a fixed timeout, replace the setTimeout with requestIdleCallback(myFunction)—this runs myFunction when the browser has free resources, which can be more efficient.

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