How to send message from XUL to embedded WebExtension

Question

I need to migrate the settings from the old version of the extension (XUL / Components.interfaces.nsIPrefService) to the new one (WebExtension / browser.storage.sync). To do this, I imported the code from the Mozilla migration sample (embedded-webextension-overlay). In this example, from embedded webextension using browser.runtime.sendMessage, the data is sent from embedded webextension to the overlay code. It works fine. But I need to change the direction, for this I call browser.runtime.sendMessage in the overlay part of the code and I get the message: browser.runtime.sendMessage is not a function This a modifired overlay code:

{
  const addonId = "myAddon@mySite.com";
  const {
    AddonManager,
  } = Components.utils.import("resource://gre/modules/AddonManager.jsm", {});

  AddonManager.getAddonByID(addonId, addon => {
    const baseURI = addon.getResourceURI("/");

    const {
      LegacyExtensionsUtils,
    } = Components.utils.import("resource://gre/modules/LegacyExtensionsUtils.jsm");

    const myOverlayEmbeddedWebExtension = LegacyExtensionsUtils.getEmbeddedExtensionFor({
      id: addonId, resourceURI: baseURI,
    });

    myOverlayEmbeddedWebExtension.startup().then(({browser}) => {
      dump(`${addonId} - embedded webext started\n`);
      // My code
      browser.runtime.sendMessage({msg:"update-settings", data:my_data});
      /* Original Mozilla code
      browser.runtime.onMessage.addListener(msg => {
        dump(`${addonId} - received message from embedded webext ${msg}\n`);
        console.log(`===${addonId} - received message from embedded webext ${msg}\n`);
      });
      */
    }).catch(err => {
      Components.utils.reportError(`${addonId} - embedded webext startup failed: ${err.message} ${err.stack}\n`);
        console.log(`===${addonId} - embedded webext startup failed: ${err.message} ${err.stack}\n`);

    });
  });
}

What am I doing wrong?

Answer 1

Wait for an incoming port in the legacy add-on using browser.runtime.onConnect, and call browser.runtime.connect() from the embedded WebExtension to open a port. You should set a name in the connect call, so that the onConnect listener will only use ports that were specifically meant for the migration process.

Here is an example: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Embedded_WebExtensions#Connection-oriented_messaging