Chrome扩展：如何基于原始DOM重新执行DOM操作代码？

Hey, let's tackle this problem you're having with your Chrome extension. The core issue is making sure each button's DOM manipulation starts fresh from the original page state, not the modified version after a prior click. Here are two reliable approaches to fix this:

Approach 1: Save a Snapshot of the Original DOM #

This method captures the page's raw HTML when it first loads, then restores it before running each button's action—no page refresh needed, which is smoother for users.

Step 1: Capture the Original DOM #

First, we'll save the page's full HTML structure when it finishes loading. Add this to your background service worker (background.js):

chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
  // Only capture when the page fully loads and is active
  if (changeInfo.status === 'complete' && tab.active) {
    chrome.scripting.executeScript({
      target: { tabId: tabId },
      func: () => document.documentElement.outerHTML
    }, (results) => {
      if (results?.[0]) {
        // Store the snapshot using the tab ID as a unique key
        chrome.storage.local.set({ [`originalDom_${tabId}`]: results[0].result });
      }
    });
  }
});

Step 2: Restore Snapshot Before Running Button Actions #

In your popup script (popup.js), modify each button's click handler to first restore the original DOM, then execute its specific manipulation:

// Helper function to run actions on fresh DOM
async function runActionOnOriginalDom(actionType) {
  const [activeTab] = await chrome.tabs.query({ active: true, currentWindow: true });
  const storageKey = `originalDom_${activeTab.id}`;
  const storedData = await chrome.storage.local.get(storageKey);
  
  if (!storedData[storageKey]) return;

  await chrome.scripting.executeScript({
    target: { tabId: activeTab.id },
    func: (originalHtml, action) => {
      // Replace current DOM with the original snapshot
      document.documentElement.outerHTML = originalHtml;
      
      // Run the specific button action
      switch(action) {
        case 'bt1':
          // Example: Change text color of an element
          document.querySelector('#target-element').style.color = 'red';
          break;
        case 'bt2':
          // Example: Resize a container
          document.querySelector('#another-container').style.width = '500px';
          break;
        // Add more cases for other buttons
      }
    },
    args: [storedData[storageKey], actionType]
  });
}

// Attach handlers to your popup buttons
document.getElementById('bt1').addEventListener('click', () => runActionOnOriginalDom('bt1'));
document.getElementById('bt2').addEventListener('click', () => runActionOnOriginalDom('bt2'));

Approach 2: Refresh the Page Before Running Actions #

If you prefer a simpler (but slightly less smooth) approach, you can force a page refresh and wait for it to reload before executing your DOM changes. This guarantees you're working with the original page every time.

Here's how to implement this in popup.js:

document.getElementById('bt2').addEventListener('click', () => {
  chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
    const tabId = tabs[0].id;
    
    // Refresh the page, bypassing cache to ensure original content
    chrome.tabs.reload(tabId, { bypassCache: true }, () => {
      // Wait for the page to fully load before running the action
      const loadListener = (updatedTabId, changeInfo) => {
        if (updatedTabId === tabId && changeInfo.status === 'complete') {
          // Execute bt2's DOM manipulation
          chrome.scripting.executeScript({
            target: { tabId: tabId },
            func: () => {
              document.querySelector('#another-container').style.width = '500px';
            }
          });
          // Remove the listener to avoid duplicate runs
          chrome.tabs.onUpdated.removeListener(loadListener);
        }
      };
      chrome.tabs.onUpdated.addListener(loadListener);
    });
  });
});

Required Permissions #

Make sure your manifest.json includes these permissions to support both approaches:

{
  "manifest_version": 3,
  "name": "Your Extension Name",
  "version": "1.0",
  "permissions": ["activeTab", "storage", "scripting", "tabs"],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  }
}

Notes: #

• The snapshot approach is better for user experience (no page flicker), but you'll need to handle cases where the user navigates to a new page (the chrome.tabs.onUpdated listener will capture the new page's snapshot automatically).
• The refresh approach is more straightforward but will cause the page to reload each time, which might be jarring for users.

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