如何排除所有浏览器扩展影响，获取纯净<body> DOM并存入变量？

Great question—browser extensions messing with your page's DOM can be incredibly frustrating when you need consistent, unmodified results across all users. Let’s walk through a few solid approaches to bypass extension tampering:

1. Fetch the Original Page Source and Parse It #

This is the most reliable method, as it completely bypasses the current, modified DOM and pulls the raw HTML directly from the server.

Here’s how to implement it:

async function getOriginalBody() {
  // Fetch the raw page HTML from the server
  const response = await fetch(window.location.href);
  const rawHtml = await response.text();
  
  // Parse the raw HTML into a clean, isolated DOM
  const parser = new DOMParser();
  const cleanDoc = parser.parseFromString(rawHtml, 'text/html');
  
  // Return the unmodified <body> from the parsed document
  return cleanDoc.body;
}

// Usage example
getOriginalBody().then(originalBody => {
  console.log("Original, unmodified body:", originalBody);
  // Use originalBody for your logic here
});

Pros & Cons #

• Pros: 100% immune to extension modifications, works regardless of extension injection timing.
• Cons: Requires an extra network request (though it’ll usually hit the browser cache, so overhead is minimal).

2. Capture the Original <body> Before Extensions Can Modify It #

If you control the page’s source code, you can run a tiny script as early as possible in the page load to capture the raw <body> before extensions have a chance to alter it.

Place this script at the very top of your <head>:

<head>
  <script>
    // Run synchronously to capture the body before extensions inject changes
    const originalBody = document.body.cloneNode(true);
    // Store this variable for later use in your code
  </script>
  <!-- Rest of your <head> content goes here -->
</head>

Pros & Cons #

• Pros: No extra network requests, super fast.
• Cons: Depends on execution order—if an extension uses run_at: document_start (a rare but possible permission), it might still modify the body before your script runs.

3. Load the Page in an Isolated Iframe #

Iframes run in a separate context, and most browser extensions don’t target or modify content inside iframes (unless explicitly configured to do so). You can use this isolation to grab the original <body>.

function getOriginalBodyFromIframe() {
  return new Promise((resolve) => {
    const iframe = document.createElement('iframe');
    iframe.style.display = 'none'; // Hide the iframe from users
    iframe.src = window.location.href; // Load the same page
    
    iframe.onload = () => {
      // Grab the unmodified body from the iframe and clean up
      const originalBody = iframe.contentDocument.body.cloneNode(true);
      document.body.removeChild(iframe);
      resolve(originalBody);
    };
    
    document.body.appendChild(iframe);
  });
}

// Usage example
getOriginalBodyFromIframe().then(originalBody => {
  console.log("Original body from isolated iframe:", originalBody);
});

Pros & Cons #

• Pros: Reuses browser cache (no extra network hit), isolates from extension tampering.
• Cons: Won’t work if the page has X-Frame-Options or Content-Security-Policy headers that block iframe embedding.

Final Recommendation #

For most cases, Method 1 (fetching raw source) is the best bet—it’s the most consistent and doesn’t rely on execution order or iframe permissions. It’s slightly more work, but guarantees you get the exact <body> the server sent, no matter what extensions are doing.

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