Fix race condition when running preload script for inline browser (#619)

Our preload script for the inline browser is built as an ESM module.
There is a known issue when loading ESM preload scripts:
electron/electron#40777. This causes the
preload script to sometimes run after the hosted page has been rendered.
When this happens, the hosted page cannot access the APIs exposed by the
preload script, leading to unexpected behavior. The fix is to update the
build to generate this preload script as a commonJS module.

Author: hillary-mutisya

ts/packages/agents/browser/src/electron/agentActivation.ts

@@ -10,8 +10,13 @@ declare global {
 }
 
 let siteAgent: string = "";
+let siteAgentInitialized = false;
 function setupSiteAgent() {
     if (window.browserConnect) {
+        if (siteAgentInitialized) {
+            return;
+        }
+
         const pageUrl = window.location.href;
         const host = new URL(pageUrl).host;
 
@@ -57,20 +62,19 @@ function setupSiteAgent() {
             siteAgent = "browser.instacart";
             window.browserConnect.enableSiteAgent("browser.instacart");
         }
+
+        siteAgentInitialized = true;
     } else {
         console.log("browserconnect not found by UI events script");
     }
 }
 
-window.addEventListener("message", (event) => {
-    if (event.data === "setupSiteAgent") {
-        setupSiteAgent();
-    }
-    if (
-        event.data === "disableSiteAgent" &&
-        siteAgent &&
-        window.browserConnect
-    ) {
+document.addEventListener("DOMContentLoaded", () => {
+    setupSiteAgent();
+});
+
+window.addEventListener("beforeunload", (event) => {
+    if (siteAgent !== undefined && window.browserConnect !== undefined) {
         window.browserConnect.disableSiteAgent(siteAgent);
     }
 });

ts/packages/agents/browser/src/extension/contentScript.ts

@@ -530,11 +530,9 @@ async function awaitPageIncrementalUpdates() {
         detector
             .detect()
             .then(() => {
-                console.log("Page incremental load completed.");
                 resolve("true");
             })
-            .catch((error: Error) => {
-                console.error("Failed to detect page load completion:", error);
+            .catch((_error: Error) => {
                 resolve("false");
             });
     });
@@ -730,9 +728,10 @@ window.addEventListener(
     "message",
     async (event) => {
         if (
-            event.data.source == "preload" &&
-            event.data.target == "contentScript" &&
-            event.data.messageType == "scriptActionRequest"
+            event.data !== undefined &&
+            event.data.source === "preload" &&
+            event.data.target === "contentScript" &&
+            event.data.messageType === "scriptActionRequest"
         ) {
             await handleScriptAction(event.data.body, (response) => {
                 window.top?.postMessage(

ts/packages/agents/browser/src/extension/webTypeAgentMain.ts

@@ -10,6 +10,7 @@ import { createRpc } from "agent-rpc/rpc";
 import { createAgentRpcServer } from "agent-rpc/server";
 import { isWebAgentMessageFromDispatcher } from "../../dist/common/webAgentMessageTypes.mjs";
 import {
+    WebAgentDisconnectMessageFromDispatcher,
     WebAgentRegisterMessage,
     WebAgentRpcMessage,
 } from "../common/webAgentMessageTypes.mjs";
@@ -51,32 +52,20 @@ function ensureDynamicTypeAgentManager(): DynamicTypeAgentManager {
     }
     const messageChannelProvider = createGenericChannelProvider(
         (message: any) => {
-            const rpcMessage = {
+            window.postMessage({
                 source: "webAgent",
                 method: "webAgent/message",
                 params: message,
-            } as WebAgentRpcMessage;
-
-            if (window.webAgentApi) {
-                window.webAgentApi.sendWebAgentMessage(rpcMessage);
-            } else {
-                window.postMessage(rpcMessage);
-            }
+            } as WebAgentRpcMessage);
         },
     );
 
     const registerChannel = createGenericChannel((message: any) => {
-        const rpcMessage = {
+        window.postMessage({
             source: "webAgent",
             method: "webAgent/register",
             params: message,
-        } as WebAgentRegisterMessage;
-
-        if (window.webAgentApi) {
-            window.webAgentApi.sendWebAgentMessage(rpcMessage);
-        } else {
-            window.postMessage(rpcMessage);
-        }
+        } as WebAgentRegisterMessage);
     });
 
     const rpc = createRpc<DynamicTypeAgentManagerInvokeFunctions>(
@@ -123,13 +112,7 @@ function ensureDynamicTypeAgentManager(): DynamicTypeAgentManager {
         }
     };
 
-    if (window.webAgentApi) {
-        window.webAgentApi.onWebAgentMessage((event) => {
-            messageHandler(event);
-        });
-    } else {
-        window.addEventListener("message", messageHandler);
-    }
+    window.addEventListener("message", messageHandler);
 
     return manager;
 }
@@ -140,5 +123,13 @@ global.registerTypeAgent = async (
     agent: AppAgent,
 ): Promise<void> => {
     const manager = ensureDynamicTypeAgentManager();
-    return manager.addTypeAgent(name, manifest, agent);
+    await manager.addTypeAgent(name, manifest, agent);
+
+    window.addEventListener("beforeunload", (event) => {
+        window.postMessage({
+            source: "webAgent",
+            method: "webAgent/disconnect",
+            params: name,
+        });
+    });
 };

ts/packages/shell/electron.vite-cjs.config.mts

@@ -0,0 +1,26 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { defineConfig, externalizeDepsPlugin } from "electron-vite";
+import { resolve } from "path";
+
+export default defineConfig({
+  preload: {
+    plugins: [externalizeDepsPlugin()],
+    build: {
+      sourcemap: true,
+      rollupOptions: {
+        input: {
+          webview: resolve(__dirname, "src/preload/webView.ts"),
+        },
+        output: {
+          // For the CJS preload
+          format: "cjs",
+          entryFileNames: "[name].cjs",
+          dir: "out/preload-cjs",
+          preserveModules: true, // Ensure each module is preserved in the output
+        },
+      },
+    },
+  },
+});

ts/packages/shell/electron.vite.config.mts

@@ -18,7 +18,6 @@ export default defineConfig({
       rollupOptions: {
         input: {
           index: resolve(__dirname, "src/preload/index.ts"),
-          webview: resolve(__dirname, "src/preload/webView.ts"),
         },
       },
     },

ts/packages/shell/package.json

@@ -13,18 +13,19 @@
   "type": "module",
   "main": "./out/main/index.js",
   "scripts": {
-    "build": "concurrently npm:typecheck npm:build:electron",
-    "build:electron": "electron-vite build",
+    "build": "concurrently npm:typecheck npm:build:electron npm:build:electron:cjs",
+    "build:electron": "electron-vite build --config electron.vite.config.mts",
+    "build:electron:cjs": "electron-vite build --config electron.vite-cjs.config.mts --logLevel error",
     "build:linux": "npm run build && electron-builder --linux --config",
     "build:mac": "npm run build && electron-builder --mac --config",
     "build:win": "npm run build && electron-builder --win --config",
     "clean": "rimraf --glob out *.tsbuildinfo *.done.build.log",
-    "dev": "electron-vite dev",
+    "dev": "npm run build:electron:cjs && electron-vite dev",
     "postinstall": "cross-env \"npm_execpath=\" electron-builder install-app-deps",
     "prettier": "prettier --check . --ignore-path ../../.prettierignore",
     "prettier:fix": "prettier --write . --ignore-path ../../.prettierignore",
     "shell:test": "npx playwright test",
-    "start": "electron-vite preview",
+    "start": "npm run build:electron:cjs && electron-vite preview",
     "typecheck": "concurrently npm:typecheck:node npm:typecheck:web",
     "typecheck:node": "tsc -p tsconfig.node.json",
     "typecheck:web": "tsc -p tsconfig.web.json"

ts/packages/shell/src/main/index.ts

@@ -12,6 +12,7 @@ import {
     DevicePermissionHandlerHandlerDetails,
     WebContents,
     BrowserView,
+    session,
 } from "electron";
 import path, { join } from "node:path";
 import { electronApp, optimizer, is } from "@electron-toolkit/utils";
@@ -103,7 +104,7 @@ function setContentSize() {
 const time = performance.now();
 debugShell("Starting...");
 
-function createWindow() {
+async function createWindow() {
     debugShell("Creating window", performance.now() - time);
 
     // Create the browser window.
@@ -131,6 +132,14 @@ function createWindow() {
 
     mainWindow.webContents.setUserAgent(userAgent);
 
+    const browserExtensionPath = join(
+        app.getAppPath(),
+        "../agents/browser/dist/electron",
+    );
+    await session.defaultSession.loadExtension(browserExtensionPath, {
+        allowFileAccess: true,
+    });
+
     chatView = new BrowserView({
         webPreferences: {
             preload: join(__dirname, "../preload/index.mjs"),
@@ -280,7 +289,7 @@ function createWindow() {
         if (!inlineBrowserView && mainWindowSize) {
             inlineBrowserView = new BrowserView({
                 webPreferences: {
-                    preload: join(__dirname, "../preload/webview.mjs"),
+                    preload: join(__dirname, "../preload-cjs/webview.cjs"),
                     sandbox: false,
                 },
             });
@@ -299,9 +308,6 @@ function createWindow() {
         }
 
         inlineBrowserView?.webContents.loadURL(targetUrl.toString());
-        inlineBrowserView?.webContents.on("did-finish-load", () => {
-            inlineBrowserView?.webContents.send("init-site-agent");
-        });
     };
 
     ShellSettings.getinstance().onCloseInlineBrowser = (): void => {
@@ -570,7 +576,7 @@ async function initialize() {
 
     await initializeSpeech();
 
-    const { mainWindow, chatView } = createWindow();
+    const { mainWindow, chatView } = await createWindow();
 
     let settingSummary: string = "";
     function updateSummary(dispatcher: Dispatcher) {
@@ -646,19 +652,12 @@ async function initialize() {
     // see https://github.com/alex8088/electron-toolkit/tree/master/packages/utils
     app.on("browser-window-created", async (_, window) => {
         optimizer.watchWindowShortcuts(window);
-        const browserExtensionPath = join(
-            app.getAppPath(),
-            "../agents/browser/dist/electron",
-        );
-        await window.webContents.session.loadExtension(browserExtensionPath, {
-            allowFileAccess: true,
-        });
     });
 
-    app.on("activate", function () {
+    app.on("activate", async function () {
         // On macOS it's common to re-create a window in the app when the
         // dock icon is clicked and there are no other windows open.
-        if (BrowserWindow.getAllWindows().length === 0) createWindow();
+        if (BrowserWindow.getAllWindows().length === 0) await createWindow();
     });
 
     // On windows, we will spin up a local end point that listens

ts/packages/shell/src/preload/webView.ts

@@ -6,20 +6,17 @@ const { webFrame } = require("electron");
 
 import DOMPurify from "dompurify";
 import { ipcRenderer } from "electron";
-import EventEmitter from "events";
-
-const internalEventEmitter = new EventEmitter();
 
 ipcRenderer.on("received-from-browser-ipc", async (_, data) => {
     if (data.error) {
         console.error(data.error);
         return;
     }
 
-    if (data.method && data.method.indexOf("/") > 0) {
+    if (data.method !== undefined && data.method.indexOf("/") > 0) {
         const [schema, actionName] = data.method?.split("/");
 
-        if (schema == "browser") {
+        if (schema === "browser") {
             if (actionName == "siteTranslatorStatus") {
                 if (data.body.status == "initializing") {
                     console.log(`Initializing ${data.body.translator}`);
@@ -49,8 +46,8 @@ ipcRenderer.on("received-from-browser-ipc", async (_, data) => {
                 id: data.id,
                 result: message,
             });
-        } else if (schema == "webAgent") {
-            internalEventEmitter.emit("web-agent-message", data);
+        } else if (schema === "webAgent") {
+            window.postMessage(data);
         }
 
         console.log(
@@ -59,10 +56,6 @@ ipcRenderer.on("received-from-browser-ipc", async (_, data) => {
     }
 });
 
-ipcRenderer.on("init-site-agent", () => {
-    window.postMessage("setupSiteAgent");
-});
-
 function sendToBrowserAgent(message: any) {
     ipcRenderer.send("send-to-browser-ipc", message);
 }
@@ -436,7 +429,7 @@ async function runSiteAction(schemaName: string, action: any) {
     return confirmationMessage;
 }
 
-await ipcRenderer.invoke("init-browser-ipc");
+ipcRenderer.invoke("init-browser-ipc");
 
 contextBridge.exposeInMainWorld("browserConnect", {
     enableSiteAgent: (translatorName) => {
@@ -457,15 +450,8 @@ contextBridge.exposeInMainWorld("browserConnect", {
     },
 });
 
-contextBridge.exposeInMainWorld("webAgentApi", {
-    onWebAgentMessage: (callback: (message: any) => void) => {
-        internalEventEmitter.on("web-agent-message", callback);
-    },
-    sendWebAgentMessage: (message: any) => {
-        sendToBrowserAgent(message);
-    },
+window.addEventListener("message", (event) => {
+    if (event.data !== undefined && event.data.source === "webAgent") {
+        sendToBrowserAgent(event.data);
+    }
 });
-
-window.onbeforeunload = () => {
-    window.postMessage("disableSiteAgent");
-};