From 334e948553842c095fe5684f045557a1cc4a590c Mon Sep 17 00:00:00 2001 From: mingyaulee Date: Fri, 9 Aug 2024 22:52:29 +0100 Subject: [PATCH] Fix: Load background worker in Firefox background page (#168) --- .../content/dist/BackgroundWorkerRunner.js | 69 +++++++++++-------- .../content/src/BackgroundWorkerRunner.js | 45 +++++++----- .../content/src/Modules/BackgroundProxies.js | 22 +++--- 3 files changed, 81 insertions(+), 55 deletions(-) diff --git a/src/Blazor.BrowserExtension/content/dist/BackgroundWorkerRunner.js b/src/Blazor.BrowserExtension/content/dist/BackgroundWorkerRunner.js index d658ad9..4418f44 100644 --- 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 index a156354..34f7b4a 100644 --- 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 index 24b7527..75038bf 100644 --- 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"); +}