From 7a6e3f620e10f1e3181a503cce95e82a9627eb36 Mon Sep 17 00:00:00 2001
From: Misha Holtz <36575242+mnholtz@users.noreply.github.com>
Date: Mon, 8 Jul 2024 13:19:16 -0700
Subject: [PATCH 1/2] inject iframe to document root instead of body

---
 src/utils/domUtils.ts      | 6 +++---
 src/utils/injectIframe.tsx | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/utils/domUtils.ts b/src/utils/domUtils.ts
index 14ecd07564..01bb7d1fe2 100644
--- a/src/utils/domUtils.ts
+++ b/src/utils/domUtils.ts
@@ -121,10 +121,10 @@ export async function setAnimationFrameInterval(
 }
 
 /**
- * Wait for the document body element to be present.
+ * Wait for the document root element to be present.
  */
-export async function waitForBody(): Promise<void> {
-  while (!document.body) {
+export async function waitForDocumentRoot(): Promise<void> {
+  while (!document.documentElement) {
     // eslint-disable-next-line no-await-in-loop -- Polling pattern
     await sleep(20);
   }
diff --git a/src/utils/injectIframe.tsx b/src/utils/injectIframe.tsx
index 31e15c1d59..ec09fb484f 100644
--- a/src/utils/injectIframe.tsx
+++ b/src/utils/injectIframe.tsx
@@ -18,7 +18,7 @@
 import pDefer from "p-defer";
 import pTimeout from "p-timeout";
 import shadowWrap from "@/utils/shadowWrap";
-import { waitForBody } from "@/utils/domUtils";
+import { waitForDocumentRoot } from "@/utils/domUtils";
 
 const TIMEOUT_MS = 3000;
 
@@ -47,8 +47,8 @@ async function _injectIframe(
   Object.assign(iframe.style, style);
 
   // The body might not be available yet
-  await waitForBody();
-  document.body.append(shadowWrap(iframe));
+  await waitForDocumentRoot();
+  document.documentElement.append(shadowWrap(iframe));
 
   await iframeLoad;
 

From 9ccb875e0a75f9b0de802655b0c4e897f960305d Mon Sep 17 00:00:00 2001
From: Misha Holtz <36575242+mnholtz@users.noreply.github.com>
Date: Mon, 8 Jul 2024 16:42:02 -0700
Subject: [PATCH 2/2] add comment re document root

---
 src/utils/injectIframe.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/utils/injectIframe.tsx b/src/utils/injectIframe.tsx
index ec09fb484f..ae32154729 100644
--- a/src/utils/injectIframe.tsx
+++ b/src/utils/injectIframe.tsx
@@ -46,7 +46,9 @@ async function _injectIframe(
   iframe.src = url;
   Object.assign(iframe.style, style);
 
-  // The body might not be available yet
+  // Append to document root (as opposed to e.g. body) to have the best chance of avoiding host page interference with
+  // the injected iframe (e.g. by removing it from the DOM)
+  // See https://github.com/pixiebrix/pixiebrix-extension/pull/8777
   await waitForDocumentRoot();
   document.documentElement.append(shadowWrap(iframe));