#6581: lazy load page script

src/contentScript/lifecycle.ts

@@ -22,12 +22,11 @@ import * as sidebar from "@/contentScript/sidebarController";
 import { NAVIGATION_RULES } from "@/contrib/navigationRules";
 import { testMatchPatterns } from "@/bricks/available";
 import reportError from "@/telemetry/reportError";
-import { compact, groupBy, intersection, once, uniq } from "lodash";
+import { compact, groupBy, intersection, uniq } from "lodash";
 import { resolveExtensionInnerDefinitions } from "@/registry/internal";
 import { traces } from "@/background/messenger/api";
 import { isDeploymentActive } from "@/utils/deploymentUtils";
 import { PromiseCancelled } from "@/errors/genericErrors";
-import injectScriptTag from "@/utils/injectScriptTag";
 import { type FrameTarget, getThisFrame } from "webext-messenger";
 import { type StarterBrick } from "@/types/starterBrickTypes";
 import { type UUID } from "@/types/stringTypes";
@@ -89,15 +88,6 @@ const _navigationListeners = new Set<() => void>();
 
 const WAIT_LOADED_INTERVAL_MS = 25;
 
-const injectPageScriptOnce = once(async (): Promise<void> => {
-  console.debug("Injecting page script");
-  const script = await logPromiseDuration(
-    "injectPageScript",
-    injectScriptTag(browser.runtime.getURL("pageScript.js"))
-  );
-  script.remove();
-});
-
 /**
  * Run an extension point and specified ModComponentBases.
  * @param extensionPoint the extension point to install/run
@@ -598,15 +588,9 @@ export async function handleNavigate({
   updateNavigationId();
   notifyNavigationListeners();
 
-  const [extensionPoints] = await Promise.all([
-    loadPersistedExtensionsOnce(),
-    // Must always inject Page Script, so it's available to the Page Editor. Alternatively, we would inject it on
-    // demand when the Page Editor loads.
-    injectPageScriptOnce(),
-  ]);
-
   const abortSignal = createNavigationAbortSignal();
 
+  const extensionPoints = await loadPersistedExtensionsOnce();
   if (extensionPoints.length > 0) {
     // Wait for document to load, to ensure any selector-based availability rules are ready to be applied.
     await logPromiseDuration(

src/pageScript/messenger/pigeon.ts

@@ -23,6 +23,10 @@ import {
   type SerializedError,
 } from "@/types/messengerTypes";
 import { cleanValue } from "@/utils/objectUtils";
+import { once } from "lodash";
+import { logPromiseDuration } from "@/utils/promiseUtils";
+import injectScriptTag from "@/utils/injectScriptTag";
+import { expectContext } from "@/utils/expectContext";
 
 /** @file The first messenger before webext-messenger. Deprecated, see https://github.com/pixiebrix/webext-messenger/issues/5 */
 
@@ -47,6 +51,16 @@ function assertCustomEvent(
   }
 }
 
+const injectPageScriptOnce = once(async (): Promise<void> => {
+  expectContext("contentScript");
+  console.debug("Injecting page script");
+  const script = await logPromiseDuration(
+    "injectPageScript",
+    injectScriptTag(browser.runtime.getURL("pageScript.js"))
+  );
+  script.remove();
+});
+
 export function createSendScriptMessage<TReturn = unknown, TPayload = unknown>(
   messageType: string
 ): SendScriptMessage<TReturn, TPayload> {
@@ -91,6 +105,10 @@ export function createSendScriptMessage<TReturn = unknown, TPayload = unknown>(
   listen(`${messageType}_REJECTED`, rejectionCallbacks, "error");
 
   return async (payload: TPayload) => {
+    // Since 1.8.2: load the pageScript on demand, because it's only used by the Page Editor and a limited number of
+    // bricks. Previously it was loaded in the page lifecycle, which also impacted mod readiness
+    await injectPageScriptOnce();
+
     const id = messageSeq++;
     const promise = new Promise((resolve, reject) => {
       fulfillmentCallbacks.set(id, resolve);