Chrome扩展定时重载问题：如何在前次重载完成后执行新重载

Hey, I get what you're dealing with here—using a fixed setInterval can be tricky because page load times vary, so you end up with overlapping reloads before the previous one finishes. The key fix here is to ditch the interval and switch to a recursive schedule: only trigger the next reload after the current page has fully loaded.

Why your original approach didn't work #

Checking document.readyState === 'complete' directly in chrome.tabs.executeScript likely failed because:

• The script runs immediately when injected, which might be before the page finishes loading (so the condition is false and reload never triggers).
• Even if it did run, setInterval doesn't care if the previous reload completed—it just fires on the fixed timer, leading to race conditions.

Solution 1: Use Chrome's tab update events (cleanest approach) #

Instead of relying on content scripts to check ready state, use the chrome.tabs.onUpdated API to listen for when the tab finishes loading, then schedule the next reload. Here's how to implement it:

Background page code

// Store user-configured interval (fetch this from your settings/popup)
let reloadDelay = 5000; // Example: 5 seconds
let targetTabId = null;

// Core function to reload and schedule next cycle
function reloadAndSchedule() {
  if (!targetTabId) return;

  // Trigger the reload first
  chrome.tabs.reload(targetTabId, { bypassCache: true }, () => {
    // Listen for the tab to finish loading
    const tabLoadListener = (tabId, changeInfo) => {
      if (tabId === targetTabId && changeInfo.status === 'complete') {
        // Clean up the listener, then schedule next reload
        chrome.tabs.onUpdated.removeListener(tabLoadListener);
        setTimeout(reloadAndSchedule, reloadDelay);
      }
    };

    chrome.tabs.onUpdated.addListener(tabLoadListener);
  });
}

// Start the reload cycle (call this when user activates the feature)
function startAutoReload(tabId) {
  targetTabId = tabId;
  reloadAndSchedule(); // Start first reload immediately
}

// Stop the cycle (call this when user turns off the feature)
function stopAutoReload() {
  targetTabId = null;
}

Solution 2: Use content scripts to notify when page loads #

If you prefer handling the load state in the page context, you can inject a content script that listens for the load event and sends a message to the background page to trigger the next reload:

Background page code

let reloadDelay = 5000;
let targetTabId = null;

// Listen for "page loaded" message from content script
chrome.runtime.onMessage.addListener((message, sender) => {
  if (message.type === 'pageLoaded' && sender.tab.id === targetTabId) {
    setTimeout(reloadAndSchedule, reloadDelay);
  }
});

function reloadAndSchedule() {
  if (!targetTabId) return;

  chrome.tabs.executeScript(targetTabId, {
    code: `
      // Listen for full page load
      window.addEventListener('load', () => {
        chrome.runtime.sendMessage({ type: 'pageLoaded' });
      });
      // Trigger immediate reload
      location.reload(true);
    `
  });
}

// Start/stop functions same as Solution 1

Key Notes #

• Make sure your manifest.json includes the tabs permission (or activeTab if only targeting the current tab):

  "permissions": ["tabs"]
  

• The bypassCache: true option is optional—use it if you want to force a fresh version of the page each time.

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