Hi everyone,

I use Angular 7 to develop a web extension for Firefox and Chrome.

It seems that ZoneAwarePromise is causing a weird behavior in Firefox preventing Mozilla webextension-polyfill to do it's task.

developer @rpl provided a cause:

Firefox requires that the promise returned by runtime.onMessage listener to be a native Promise.

Without Angular, everything works as expected.

You can see the initial issue opened at webextension-polyfill:
mozilla/webextension-polyfill#172

Without webextension-polyfill, it's a nightmare to develop extensions for different browsers.
Without Angular, it's a pain to develop in javascript. I hope I can keep both.

Can someone please help me figure out a solution to this problem, or at least provide some insight?

Steps to reproduce:
Firefox:

1. Open "about:debugging"
2. Enable add-on debugging
3. Click "Load temporary Add-on"
4. Select the extension folder
5. Click "Debug"
6. Click on the popup action button in the toolbar
   Observed behavior: console immediately shows: "handleResponse undefined"
   Behavior NOT OK

Chrome:

1. Go to extensions
2. "Load unpacked extension"
3. Select the extension folder
4. right click on the popup action button in the toolbar -> "inspect pop-up"
   Observed behavior: after 2s console shows: "handleResponse async response from background script"
   Behavior OK

I attached both the generated extension that you can import in Chrome/Firefox and observe the behavior, as well as the full Angular 7 example project if you need to take a look into the source code.

dist_ff_promise_bug.zip
project-ff-bug.zip

To generate the extension, you just need to:

yarn install
ng build --aot

This will generate the dist folder ready for import in Chrome/Firefox as an extension.