polyfill Worker in chrome runtime

apps/extension/package.json

@@ -33,6 +33,7 @@
     "@penumbra-zone/types": "^22.0.0",
     "@penumbra-zone/wasm": "^27.0.0",
     "@radix-ui/react-icons": "^1.3.0",
+    "@repo/chrome-offscreen-worker": "workspace:*",
     "@repo/context": "workspace:*",
     "@repo/ui": "workspace:*",
     "@tanstack/react-query": "4.36.1",
@@ -49,7 +50,7 @@
     "zustand": "^4.5.2"
   },
   "devDependencies": {
-    "@types/chrome": "0.0.268",
+    "@types/chrome": "^0.0.270",
     "@types/firefox-webext-browser": "^120.0.3",
     "@types/lodash": "^4.17.4",
     "@types/react": "^18.3.2",

apps/extension/public/manifest.json

@@ -32,7 +32,8 @@
     "open_in_tab": true
   },
   "background": {
-    "service_worker": "service-worker.js"
+    "service_worker": "service-worker.js",
+    "type": "module"
   },
   "web_accessible_resources": [
     {

apps/extension/src/entry/offscreen-handler.ts

@@ -1,70 +1 @@
-import { ConnectError } from '@connectrpc/connect';
-import { errorToJson } from '@connectrpc/connect/protocol-connect';
-import {
-  ActionBuildRequest,
-  ActionBuildResponse,
-  isActionBuildRequest,
-  isOffscreenRequest,
-} from '@penumbra-zone/types/internal-msg/offscreen';
-
-chrome.runtime.onMessage.addListener((req, _sender, respond) => {
-  if (!isOffscreenRequest(req)) {
-    return false;
-  }
-  const { type, request } = req;
-  if (isActionBuildRequest(request)) {
-    void (async () => {
-      try {
-        // propagate errors that occur in unawaited promises
-        const unhandled = Promise.withResolvers<never>();
-        self.addEventListener('unhandledrejection', unhandled.reject, {
-          once: true,
-        });
-
-        const data = await Promise.race([
-          spawnActionBuildWorker(request),
-          unhandled.promise,
-        ]).finally(() => self.removeEventListener('unhandledrejection', unhandled.reject));
-
-        respond({ type, data });
-      } catch (e) {
-        const error = errorToJson(
-          // note that any given promise rejection event probably doesn't
-          // actually involve the specific request it ends up responding to.
-          ConnectError.from(e instanceof PromiseRejectionEvent ? e.reason : e),
-          undefined,
-        );
-        respond({ type, error });
-      }
-    })();
-    return true;
-  }
-  return false;
-});
-
-const spawnActionBuildWorker = (req: ActionBuildRequest) => {
-  const { promise, resolve, reject } = Promise.withResolvers<ActionBuildResponse>();
-
-  const worker = new Worker(new URL('../wasm-build-action.ts', import.meta.url));
-  void promise.finally(() => worker.terminate());
-
-  const onWorkerMessage = (e: MessageEvent) => resolve(e.data as ActionBuildResponse);
-
-  const onWorkerError = ({ error, filename, lineno, colno, message }: ErrorEvent) =>
-    reject(
-      error instanceof Error
-        ? error
-        : new Error(`Worker ErrorEvent ${filename}:${lineno}:${colno} ${message}`),
-    );
-
-  const onWorkerMessageError = (ev: MessageEvent) => reject(ConnectError.from(ev.data ?? ev));
-
-  worker.addEventListener('message', onWorkerMessage, { once: true });
-  worker.addEventListener('error', onWorkerError, { once: true });
-  worker.addEventListener('messageerror', onWorkerMessageError, { once: true });
-
-  // Send data to web worker
-  worker.postMessage(req);
-
-  return promise;
-};
+import '@repo/chrome-offscreen-worker/entry';

apps/extension/src/message/internal.ts

@@ -0,0 +1,22 @@
+import type { JsonValue } from '@bufbuild/protobuf';
+
+export interface InternalMessage<Type extends string, Req, Res> {
+  type: Type;
+  request: Req;
+  response: Res;
+}
+
+export interface InternalRequest<M extends InternalMessage<string, unknown, unknown>> {
+  type: M['type'];
+  request: M['request'];
+}
+
+export type InternalResponse<M extends InternalMessage<string, unknown, unknown>> =
+  | {
+      type: M['type'];
+      data: M['response'];
+    }
+  | {
+      type: M['type'];
+      error: JsonValue;
+    };

apps/extension/src/message/popup.ts

@@ -1,9 +1,5 @@
 import type { AuthorizeRequest } from '@penumbra-zone/protobuf/penumbra/custody/v1/custody_pb';
-import type {
-  InternalMessage,
-  InternalRequest,
-  InternalResponse,
-} from '@penumbra-zone/types/internal-msg/shared';
+import type { InternalMessage, InternalRequest, InternalResponse } from './internal';
 import type { UserChoice } from '@penumbra-zone/types/user-choice';
 import type { Jsonified } from '@penumbra-zone/types/jsonified';
 import { OriginRecord } from '../storage/types';

apps/extension/src/popup.ts

@@ -1,7 +1,7 @@
 import { sessionExtStorage } from './storage/session';
 import { PopupMessage, PopupRequest, PopupType } from './message/popup';
 import { PopupPath } from './routes/popup/paths';
-import type { InternalRequest, InternalResponse } from '@penumbra-zone/types/internal-msg/shared';
+import type { InternalRequest, InternalResponse } from './message/internal';
 import { Code, ConnectError } from '@connectrpc/connect';
 import { errorFromJson } from '@connectrpc/connect/protocol-connect';
 

apps/extension/src/service-worker.ts

@@ -43,6 +43,11 @@ import { walletIdCtx } from '@penumbra-zone/services/ctx/wallet-id';
 
 import { backOff } from 'exponential-backoff';
 
+import { OffscreenWorker } from '@repo/chrome-offscreen-worker/worker';
+
+globalThis.Worker = OffscreenWorker;
+OffscreenWorker.configure(new URL(chrome.runtime.getURL('offscreen.html')));
+
 const initHandler = async () => {
   const walletServices = startWalletServices();
   const rpcImpls = await getRpcImpls();

apps/extension/src/state/origin-approval.ts

@@ -2,7 +2,7 @@ import { ConnectError } from '@connectrpc/connect';
 import { OriginApproval, PopupType } from '../message/popup';
 import { AllSlices, SliceCreator } from '.';
 import { errorToJson } from '@connectrpc/connect/protocol-connect';
-import type { InternalRequest, InternalResponse } from '@penumbra-zone/types/internal-msg/shared';
+import type { InternalRequest, InternalResponse } from '../message/internal';
 import { UserChoice } from '@penumbra-zone/types/user-choice';
 
 export interface OriginApprovalSlice {

apps/extension/src/state/tx-approval.ts

@@ -8,7 +8,7 @@ import {
 import { viewClient } from '../clients';
 import { ConnectError } from '@connectrpc/connect';
 import { errorToJson } from '@connectrpc/connect/protocol-connect';
-import type { InternalRequest, InternalResponse } from '@penumbra-zone/types/internal-msg/shared';
+import type { InternalRequest, InternalResponse } from '../message/internal';
 import type { Jsonified, Stringified } from '@penumbra-zone/types/jsonified';
 import { UserChoice } from '@penumbra-zone/types/user-choice';
 import { classifyTransaction } from '@penumbra-zone/perspective/transaction/classify';

apps/extension/webpack.config.ts

@@ -17,7 +17,8 @@ import WatchExternalFilesPlugin from 'webpack-watch-external-files-plugin';
 // Loads default vars from `.env` file in this directory.
 dotenv.config({ path: '.env' });
 
-const keysPackage = path.dirname(url.fileURLToPath(import.meta.resolve('@penumbra-zone/keys')));
+//const keysPackage = path.dirname(url.fileURLToPath(import.meta.resolve('@penumbra-zone/keys')));
+//const servicesPackage = path.dirname(url.fileURLToPath(import.meta.resolve('@penumbra-zone/services')));
 
 const localPackages = [
   ...Object.values(rootPackageJson.dependencies),
@@ -120,24 +121,29 @@ export default ({
     'page-root': path.join(entryDir, 'page-root.tsx'),
     'popup-root': path.join(entryDir, 'popup-root.tsx'),
     'service-worker': path.join(srcDir, 'service-worker.ts'),
-    'wasm-build-action': path.join(srcDir, 'wasm-build-action.ts'),
   },
   output: {
     path: path.join(__dirname, 'dist'),
     filename: '[name].js',
+    module: true,
+    chunkFormat: 'module',
+    scriptType: 'module',
   },
   optimization: {
     splitChunks: {
+      chunks: 'async',
+
+      /*
       chunks: chunk => {
         const filesNotToChunk = [
           'injected-connection-port',
           'injected-penumbra-global',
           'injected-request-listner',
           'service-worker',
-          'wasm-build-action',
         ];
         return chunk.name ? !filesNotToChunk.includes(chunk.name) : false;
       },
+      */
     },
   },
   module: {
@@ -176,13 +182,17 @@ export default ({
           filename: 'videos/[hash][ext][query]',
         },
       },
+      /*
+      {
+        test: /\.bin$/,
+        type: 'asset/resource',
+        generator: { filename: 'keys/[name][ext]' },
+      },
+      */
     ],
   },
   resolve: {
     extensions: ['.ts', '.tsx', '.js'],
-    alias: {
-      '@ui': path.resolve(__dirname, '../../packages/ui'),
-    },
   },
   plugins: [
     new webpack.CleanPlugin(),
@@ -197,41 +207,37 @@ export default ({
       },
     }),
     DefinePlugin,
-    new CopyPlugin({
-      patterns: [
-        'public',
-        {
-          from: path.join(keysPackage, 'keys', '*_pk.bin'),
-          to: 'keys/[name][ext]',
-        },
-      ],
-    }),
+    new CopyPlugin({ patterns: ['public'] }),
     // html entry points
     new HtmlWebpackPlugin({
       favicon: 'public/favicon/icon128.png',
       title: 'Prax Wallet',
       template: 'react-root.html',
       filename: 'page.html',
       chunks: ['page-root'],
+      scriptLoading: 'module',
     }),
     new HtmlWebpackPlugin({
       title: 'Prax Wallet',
       template: 'react-root.html',
       rootId: 'popup-root',
       filename: 'popup.html',
       chunks: ['popup-root'],
+      scriptLoading: 'module',
     }),
     new HtmlWebpackPlugin({
       title: 'Penumbra Offscreen',
       filename: 'offscreen.html',
       chunks: ['offscreen-handler'],
+      scriptLoading: 'module',
     }),
     // watch tarballs for changes
     WEBPACK_WATCH && new WatchExternalFilesPlugin({ files: localPackages }),
     WEBPACK_WATCH && PnpmInstallPlugin,
     CHROMIUM_PROFILE && WebExtReloadPlugin,
   ],
   experiments: {
+    outputModule: true,
     asyncWebAssembly: true,
   },
 });