From 443506ce5954d18dd139706c935cd797764cbd10 Mon Sep 17 00:00:00 2001 From: Federico Brigante Date: Thu, 25 Jan 2024 13:08:02 +0800 Subject: [PATCH 1/3] Make worker more resilient to DOM API usage attempts --- static/background.worker.js | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/static/background.worker.js b/static/background.worker.js index fabbc15b95..b5ec9a4724 100644 --- a/static/background.worker.js +++ b/static/background.worker.js @@ -1,2 +1,21 @@ // Don't include `background.worker.js` in webpack, there's no advantage in doing so + +function get() { + /* + When scripts use DOM APIs, the worker will crash on load with the error + `ReferenceError: window is not defined` without pointing to the correct line. + This listener defines some globals so that they return `undefined` instead + of throwing an error on access. + + This line also lets you add a breakpoint so that you can stop the debugger and + see where the access originated from. Or temporarily add console.trace() here. + */ +} + +Object.defineProperties(self, { + document: { get }, + window: { get }, + navigator: { get }, +}); + self.importScripts("./grayIconWhileLoading.js", "./background.js"); From d89a0e37bb4351a56e580156ea0ad8081d51c3f2 Mon Sep 17 00:00:00 2001 From: Federico Brigante Date: Thu, 25 Jan 2024 13:09:22 +0800 Subject: [PATCH 2/3] Lazy-load elementPicker again --- src/bricks/transformers/selectElement.ts | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/bricks/transformers/selectElement.ts b/src/bricks/transformers/selectElement.ts index 615dfc0b6f..c7f417b05b 100644 --- a/src/bricks/transformers/selectElement.ts +++ b/src/bricks/transformers/selectElement.ts @@ -14,7 +14,7 @@ * You should have received a copy of the GNU Affero General Public License * along with this program. If not, see . */ -import { userSelectElement } from "@/contentScript/pageEditor/elementPicker"; + import { TransformerABC } from "@/types/bricks/transformerTypes"; import { type Schema } from "@/types/schemaTypes"; import { propertiesToSchema } from "@/validators/generic"; @@ -53,6 +53,12 @@ export class SelectElement extends TransformerABC { ); async transform(): Promise { + // The picker uses `bootstrap-switch-button`, which does a `window` check on load and breaks + // the MV3 background worker. Lazy-loading it keeps the background worker from breaking. + const { userSelectElement } = await import( + /* webpackChunkName: "editorContentScript" */ "@/contentScript/pageEditor/elementPicker" + ); + const { elements } = await userSelectElement(); const elementRefs = elements.map((element) => From 25dd3d0389b8c90820ec2a2881ff56b40f3918b5 Mon Sep 17 00:00:00 2001 From: Federico Brigante Date: Thu, 25 Jan 2024 13:25:45 +0800 Subject: [PATCH 3/3] Extend comment --- static/background.worker.js | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/static/background.worker.js b/static/background.worker.js index b5ec9a4724..e7ac0638f2 100644 --- a/static/background.worker.js +++ b/static/background.worker.js @@ -6,16 +6,20 @@ function get() { `ReferenceError: window is not defined` without pointing to the correct line. This listener defines some globals so that they return `undefined` instead of throwing an error on access. - - This line also lets you add a breakpoint so that you can stop the debugger and - see where the access originated from. Or temporarily add console.trace() here. */ + + // Debug helpers: trace or breakable line + + // There are a lot of safe `window` checks in the code so the logger cannot be enabled by default. + // console.trace('DOM access in worker'); + + // eslint-disable-next-line @typescript-eslint/no-unused-expressions + 1; // This line lets you add a breakpoint so that you can stop the debugger } Object.defineProperties(self, { document: { get }, window: { get }, - navigator: { get }, }); self.importScripts("./grayIconWhileLoading.js", "./background.js");