Question about WebExtensions about comlink HOT 6 CLOSED

I tried debugging this one today and came out empty. I didn't get the error stated above, but no success either.

(Aside: I got a syntax error from await new (MyClass as any)(); and used await new MyClass() instead)

I can confirm the two events occurring on the background page.
The message handler set in pingPongMessage doesn't seem to ever get called.

I am interested to learn why it seems to fail on web extensions. My use case is communication between a background page and a DevTools extension page. Any leads welcome.

from comlink.

I started looking into this and could not replicate the error in Chrome. I suspect that @DJWassink was using another browser & compiling TS to AMD or another browser-friendly format. I also tried to test in Firefox Developer Edition with dynamic import enabled & saw the same behavior. Edge doesn't have support dynamic import yet, so my test case simply failed there.

I'll need to spend some time digging into Comlink's messaging model before I have a good idea on what might need to change to support the extension use case.

from comlink.

I tried it again but without any compilation steps using the following code:

popup.js:

import('./comlink.js').then(Comlink => {
    chrome.runtime.getBackgroundPage(async bgPage => {
        if (bgPage) {
            const MyClass = Comlink.proxy(bgPage);
            console.info(MyClass);
            const instance = await new MyClass();
            console.info(instance);
            
            setInterval(() => {
                instance.logSomething();
            }, 5000);
        }
    });
})

background.js:

import('./comlink.js').then(Comlink => {
    class MyClass {
        logSomething() {
            console.info('hiya');
        }
    }
    Comlink.expose(MyClass, window);
})

And there isn't an error so indeed maybe that was because of the TypeScript compilation process.

However I now get stuck on the await new MyClass(); part. The promise never resolves.

from comlink.

@dotproto @DJWassink I am not sure this is actionable from my end. Going to close this issue, but please re-open if you think there is something I need to fix :)

from comlink.

I wrote a simple adapter for chrome.runtime.port, plain JS goes:

function webExtensionEndpoint(port) {
  const listeners = new WeakMap();
  return {
      postMessage: (message, transfer) => {
          port.postMessage(message);
      },
      addEventListener: (_, eh) => {
          const l = (data) => {
              if ("handleEvent" in eh) {
                  eh.handleEvent({ data });
              }
              else {
                  eh({ data });
              }
          };
          port.onMessage.addListener(l);
          listeners.set(eh, l);
      },
      removeEventListener: (_, eh) => {
          const l = listeners.get(eh);
          if (!l) {
              return;
          }
          port.onMessage.removeListener(l);
          listeners.delete(eh);
      },
  };
}

usage:

background.js

// also works on `chrome.runtime.onConnectExternal`
chrome.runtime.onConnect.addListener((port) => {
  const api = {
    add(a, b) {
      return a + b;
    }
  };

  Comlink.expose(api, webExtensionEndpoint(port));
});

popup.js

const port = chrome.runtime.connect();
const endpoint = webExtensionEndpoint(port);
const api = Comlink.wrap(endpoint);

api.add(1, 1).then(v => console.log(v)); // --> 2

from comlink.

chrome-extension-demo.zip

Attach an extension for demo.

from comlink.