Function makeFunction

webapp/_webapp/src/intermediate.ts:80–149

* Create a function that communicates via window events. * * - In ISOLATED world: registers event handler that calls chrome.runtime.sendMessage * - In any world: returns a function that dispatches events and waits for response * * This allows MAIN world to call functions that require chrome.run

(handlerName: string, opts?: MakeFunctionOpts)

 * by sending events to ISOLATED world.
 */
function makeFunction<A, T>(handlerName: string, opts?: MakeFunctionOpts): (args: A) => Promise<T> {
  const reqEvtName = `paperdebugger:req:${handlerName}`;
  const resEvtName = `paperdebugger:res:${handlerName}`;
  const errEvtName = `paperdebugger:err:${handlerName}`;

  // Only register the event handler in ISOLATED world (where chrome.runtime is available)
  if (isIsolatedWorld) {
    const eventHandler = (evt: Event) => {
      const browserAPI = getBrowserAPI();
      const customEvt = evt as CustomEvent;
      const { seq, req } = customEvt.detail;
      if (!seq) return;
      if (!browserAPI?.runtime?.sendMessage) return;
      browserAPI.runtime
        .sendMessage({
          action: handlerName,
          args: req,
        })
        .then((res: { error?: string }) => {
          if (res.error) {
            window.dispatchEvent(
              new CustomEvent(`${errEvtName}/${seq}`, {
                detail: { seq, err: res.error },
              }),
            );
          } else {
            window.dispatchEvent(new CustomEvent(`${resEvtName}/${seq}`, { detail: { seq, res } }));
          }
        })
        .catch((err: { error?: string }) => {
          window.dispatchEvent(new CustomEvent(`${errEvtName}/${seq}`, { detail: { seq, err } }));
        });
    };
    window.addEventListener(reqEvtName, eventHandler);
  }

  // The callable function - works in both MAIN and ISOLATED world
  // Dispatches event and waits for response from ISOLATED world's handler
  const fn = (args: A): Promise<T> => {
    const seq = uuidv4();
    window.dispatchEvent(new CustomEvent(reqEvtName, { detail: { seq, req: args } }));
    return new Promise((resolve, reject) => {
      function resListener(evt: Event): void {
        const customEvt = evt as CustomEvent;
        const { res } = customEvt.detail;
        cleanup();
        resolve(res);
      }
      function errListener(evt: Event): void {
        const customEvt = evt as CustomEvent;
        const { err } = customEvt.detail;
        cleanup();
        reject(err);
      }
      function cleanup(): void {
        window.removeEventListener(`${resEvtName}/${seq}`, resListener);
        window.removeEventListener(`${errEvtName}/${seq}`, errListener);
      }