Fix: Load background worker in Firefox background page (#168)

mingyaulee · Aug 9, 2024 · 334e948 · 334e948
1 parent 3522385
commit 334e948
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 55 deletions.
diff --git a/src/Blazor.BrowserExtension/content/dist/BackgroundWorkerRunner.js b/src/Blazor.BrowserExtension/content/dist/BackgroundWorkerRunner.js
@@ -175,42 +175,55 @@ function defineProxy(key, value) {
   proxies[key] = value;
 }
 
-globalThis.window = ProxyTarget.createProxy("window");
-globalThis.document = ProxyTarget.createProxy("document");
-globalThis.history = ProxyTarget.createProxy("history");
-
-globalThis.Node = ProxyTarget.createProxy("Node");
-globalThis.Comment = ProxyTarget.createProxy("Comment");
-globalThis.Element = ProxyTarget.createProxy("Element");
-globalThis.HTMLElement = ProxyTarget.createProxy("HTMLElement ");
-globalThis.DocumentFragment = ProxyTarget.createProxy("DocumentFragment");
+const requireProxy = globalThis.window === undefined && globalThis.document == undefined;
+
+if (requireProxy) {
+  globalThis.window = ProxyTarget.createProxy("window");
+  globalThis.document = ProxyTarget.createProxy("document");
+  globalThis.history = ProxyTarget.createProxy("history");
+
+  globalThis.Node = ProxyTarget.createProxy("Node");
+  globalThis.Comment = ProxyTarget.createProxy("Comment");
+  globalThis.Element = ProxyTarget.createProxy("Element");
+  globalThis.HTMLElement = ProxyTarget.createProxy("HTMLElement ");
+  globalThis.DocumentFragment = ProxyTarget.createProxy("DocumentFragment");
+}
 
 let initializePromise;
 let backgroundWorkerInstance;
 
 async function initializeAsync() {
-  // Initialize elements
-  const elements = {
-    "#background": ProxyTarget.createProxy("element(#background)", globalThis.Element),
-    "#blazor-error-ui": ProxyTarget.createProxy("element(#blazor-error-ui)", globalThis.Element)
-  };
-  globalThis.document.querySelector = (selector) => {
-    if (!elements.hasOwnProperty(selector)) {
-      console.error("Unexpected selector " + selector);
-      elements[selector] = ProxyTarget.createProxy(`element(${selector})`, globalThis.Element);
-    }
+  if (requireProxy) {
+    // Initialize elements
+    const elements = {
+      "#background": ProxyTarget.createProxy("element(#background)", globalThis.Element),
+      "#blazor-error-ui": ProxyTarget.createProxy("element(#blazor-error-ui)", globalThis.Element)
+    };
+    globalThis.document.querySelector = (selector) => {
+      if (!elements.hasOwnProperty(selector)) {
+        console.error("Unexpected selector " + selector);
+        elements[selector] = ProxyTarget.createProxy(`element(${selector})`, globalThis.Element);
+      }
 
-    return elements[selector];
-  };
-  defineProxy("element(#background).childNodes", []);
-  defineProxy("element(template).content.querySelectorAll", () => []);
-  defineProxy("element(template).content.firstChild", undefined);
+      return elements[selector];
+    };
+
+    defineProxy("element(#background).childNodes", []);
+    defineProxy("element(template).content.querySelectorAll", () => []);
+    defineProxy("element(template).content.firstChild", undefined);
+  } else {
+    const backgroundElement = globalThis.document.createElement("div");
+    backgroundElement.id = "background";
+    globalThis.document.body.appendChild(backgroundElement);
+  }
 
   const url = (globalThis.browser || globalThis.chrome).runtime.getURL("");
-  // @ts-ignore assign the baseURI to document proxy
-  globalThis.document.baseURI = url;
-  // @ts-ignore assign the activeElement to document proxy
-  globalThis.document.activeElement = elements["#background"];
+  if (requireProxy) {
+    // @ts-ignore assign the baseURI to document proxy
+    globalThis.document.baseURI = url;
+    // @ts-ignore assign the activeElement to document proxy
+    globalThis.document.activeElement = elements["#background"];
+  }
 
   const configRequest = await fetch(`${url}content/browserextension.config.json`);
   const config = await configRequest.json();

diff --git a/src/Blazor.BrowserExtension/content/src/BackgroundWorkerRunner.js b/src/Blazor.BrowserExtension/content/src/BackgroundWorkerRunner.js
@@ -1,32 +1,41 @@
-import { ProxyTarget, defineProxy } from "./Modules/BackgroundProxies.js";
+import { ProxyTarget, defineProxy, requireProxy } from "./Modules/BackgroundProxies.js";
 import { initializeInternal } from "./Modules/CoreInternal.js";
 
 let initializePromise;
 let backgroundWorkerInstance;
 
 async function initializeAsync() {
-  // Initialize elements
-  const elements = {
-    "#background": ProxyTarget.createProxy("element(#background)", globalThis.Element),
-    "#blazor-error-ui": ProxyTarget.createProxy("element(#blazor-error-ui)", globalThis.Element)
-  };
-  globalThis.document.querySelector = (selector) => {
-    if (!elements.hasOwnProperty(selector)) {
-      console.error("Unexpected selector " + selector);
-      elements[selector] = ProxyTarget.createProxy(`element(${selector})`, globalThis.Element);
+  if (requireProxy) {
+    // Initialize elements
+    const elements = {
+      "#background": ProxyTarget.createProxy("element(#background)", globalThis.Element),
+      "#blazor-error-ui": ProxyTarget.createProxy("element(#blazor-error-ui)", globalThis.Element)
+    };
+    globalThis.document.querySelector = (selector) => {
+      if (!elements.hasOwnProperty(selector)) {
+        console.error("Unexpected selector " + selector);
+        elements[selector] = ProxyTarget.createProxy(`element(${selector})`, globalThis.Element);
+      }
+
+      return elements[selector];
     }
 
-    return elements[selector];
+    defineProxy("element(#background).childNodes", []);
+    defineProxy("element(template).content.querySelectorAll", () => []);
+    defineProxy("element(template).content.firstChild", undefined);
+  } else {
+    const backgroundElement = globalThis.document.createElement("div");
+    backgroundElement.id = "background";
+    globalThis.document.body.appendChild(backgroundElement);
   }
-  defineProxy("element(#background).childNodes", []);
-  defineProxy("element(template).content.querySelectorAll", () => []);
-  defineProxy("element(template).content.firstChild", undefined);
 
   const url = (globalThis.browser || globalThis.chrome).runtime.getURL("");
-  // @ts-ignore assign the baseURI to document proxy
-  globalThis.document.baseURI = url;
-  // @ts-ignore assign the activeElement to document proxy
-  globalThis.document.activeElement = elements["#background"];
+  if (requireProxy) {
+    // @ts-ignore assign the baseURI to document proxy
+    globalThis.document.baseURI = url;
+    // @ts-ignore assign the activeElement to document proxy
+    globalThis.document.activeElement = elements["#background"];
+  }
 
   const configRequest = await fetch(`${url}content/browserextension.config.json`);
   /** @type {import("./Modules/BrowserExtensionConfig.js").default} */

diff --git a/src/Blazor.BrowserExtension/content/src/Modules/BackgroundProxies.js b/src/Blazor.BrowserExtension/content/src/Modules/BackgroundProxies.js
@@ -173,12 +173,16 @@ export function defineProxy(key, value) {
   proxies[key] = value;
 }
 
-globalThis.window = ProxyTarget.createProxy("window");
-globalThis.document = ProxyTarget.createProxy("document");
-globalThis.history = ProxyTarget.createProxy("history");
-
-globalThis.Node = ProxyTarget.createProxy("Node");
-globalThis.Comment = ProxyTarget.createProxy("Comment");
-globalThis.Element = ProxyTarget.createProxy("Element");
-globalThis.HTMLElement = ProxyTarget.createProxy("HTMLElement ");
-globalThis.DocumentFragment = ProxyTarget.createProxy("DocumentFragment");
+export const requireProxy = globalThis.window === undefined && globalThis.document == undefined;
+
+if (requireProxy) {
+  globalThis.window = ProxyTarget.createProxy("window");
+  globalThis.document = ProxyTarget.createProxy("document");
+  globalThis.history = ProxyTarget.createProxy("history");
+
+  globalThis.Node = ProxyTarget.createProxy("Node");
+  globalThis.Comment = ProxyTarget.createProxy("Comment");
+  globalThis.Element = ProxyTarget.createProxy("Element");
+  globalThis.HTMLElement = ProxyTarget.createProxy("HTMLElement ");
+  globalThis.DocumentFragment = ProxyTarget.createProxy("DocumentFragment");
+}