notarize button send to offscreen

src/components/RequestDetail/index.tsx

@@ -5,7 +5,7 @@ import React, {
   useEffect,
   useState,
 } from "react";
-import { RequestLog } from "../../pages/Background/actionTypes";
+import { BackgroundActiontype, RequestLog } from "../../pages/Background/actionTypes";
 import classNames from "classnames";
 import {
   Navigate,
@@ -44,7 +44,15 @@ export default function RequestDetail(props: Props): ReactElement {
         <RequestDetailsHeaderTab path="/response">
           Response
         </RequestDetailsHeaderTab>
-        <button className="absolute right-2 bg-primary/[0.9] text-white font-bold px-2 py-0.5 hover:bg-primary/[0.8] active:bg-primary">
+        <button 
+          className="absolute right-2 bg-primary/[0.9] text-white font-bold px-2 py-0.5 hover:bg-primary/[0.8] active:bg-primary"
+          onClick={async () => {
+            await chrome.runtime.sendMessage({
+              type: BackgroundActiontype.test_wasm,
+              target: 'offscreen',
+            });
+          }}
+        >
           Notarize
         </button>
       </div>
@@ -421,7 +429,7 @@ function RequestHeaders(props: Props): ReactElement {
           </tr>
         </thead>
         <tbody className="">
-          {data?.requestHeaders.map((h) => (
+          {data?.requestHeaders?.map((h) => (
             <tr key={h.name} className="border-b border-slate-200">
               <td className="border border-slate-300 font-bold align-top py-1 px-2 whitespace-nowrap">
                 {h.name}

src/pages/Background/actionTypes.ts

@@ -2,6 +2,7 @@ export enum BackgroundActiontype {
   get_requests = "get_requests",
   clear_requests = "clear_requests",
   push_action = "push_action",
+  test_wasm = "test_wasm",
 }
 
 export type BackgroundAction = {

src/pages/Background/index.ts

@@ -10,22 +10,13 @@ let RequestsLogs: {
 
 const mutex = new Mutex();
 
-let offscreen;
-
 (async () => {
-  await new Promise(r => setTimeout(r, 1000));
-  if (offscreen) {
-    offscreen = null;
-  } else {
-    // @ts-ignore
-    offscreen = chrome.offscreen.createDocument({
-      url: "offscreen.html",
-      reasons: ["WORKERS"],
-      justification: "workers for multithreading",
-    });
-    await offscreen;
-    offscreen = null;
-  }
+  // @ts-ignore
+  chrome.offscreen.createDocument({
+    url: "offscreen.html",
+    reasons: ["WORKERS"],
+    justification: "workers for multithreading",
+  });
 
   chrome.tabs.onActivated.addListener((tabs) => {
     const tab = RequestsLogs[tabs.tabId];

src/pages/Offscreen/Offscreen.tsx

@@ -1,14 +1,25 @@
 import React, { useEffect } from "react";
 import * as Comlink from "comlink";
+import { BackgroundActiontype } from "../Background/actionTypes";
 
 const Offscreen = () => {
   useEffect(() => {
     (async function offscreenloaded() {
       console.log("offscreen loaded - spawning worker from worker.ts");
-      const Wasm: any = Comlink.wrap(
-        new Worker(new URL("./worker.ts", import.meta.url))
-      );
-      await new Wasm();
+
+      chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {
+        switch (request.type) {
+          case BackgroundActiontype.test_wasm: {
+            const Wasm: any = Comlink.wrap(
+            new Worker(new URL("./worker.ts", import.meta.url)));
+            await new Wasm();
+            return sendResponse();
+          }
+          default:
+            break;
+        }
+      })
+
     })();
   }, []);
 

src/pages/Offscreen/index.tsx

@@ -4,5 +4,5 @@ import { createRoot } from "react-dom/client";
 import Offscreen from "./Offscreen";
 
 const container = document.getElementById("app-container");
-const root = createRoot(container!); // createRoot(container!) if you use TypeScript
+const root = createRoot(container!);
 root.render(<Offscreen />);