Search code examples
typescriptwebpackpromisewinjsstenciljs

Override WinJS promises with native promises as a Chrome Extension content script?

I have a Chrome Extension that injects a content script along with a library of components to display a UI (built using StencilJS). I've found on some sites that our UI does not display correctly given a new state.

After much debugging I found that the thing in common on these sites is WinJS. It seems that WinJS sets its on Promise implementation on window.Promise. This appears to be the cause of our UI issues.

Is there any way to enforce native promises for our code/Stencil library at build/run time to prevent us interfering with the page and vice versa? We're using Stencil's standard build configuration along with Webpack to bundle the code into a Chrome Extension format.

Solution

  • The native Promise constructor/object can be retrieved from:

    (async _ => _)().constructor

    So let your content script redefine Promise either as a global variable, or maybe as a local variable in a wrapper function, so it only affects that script:

    var Promise = (async _ => _)().constructor;