如何在Chrome扩展内容脚本中用原生Promise覆盖WinJS Promise？

构建时解决方案（Webpack+Stencil配置） #

Webpack层面强制绑定原生Promise #

在Webpack配置文件中，通过ProvidePlugin将所有模块中引用的Promise定向到浏览器原生实现，完全绕过被WinJS篡改的全局Promise：

const webpack = require('webpack');

module.exports = {
  // 其他已有配置...
  plugins: [
    new webpack.ProvidePlugin({
      Promise: ['globalThis', 'Promise']
    })
  ]
};

Stencil构建配置隔离全局Promise #

修改Stencil的stencil.config.ts，添加excludeGlobalProps配置，让组件库打包时不依赖全局Promise，而是内置原生兼容版本：

import { Config } from '@stencil/core';

export const config: Config = {
  // 其他已有配置...
  outputTargets: [
    {
      type: 'dist',
      excludeGlobalProps: ['Promise']
    }
  ]
};

Babel编译兜底（可选） #

如果项目使用Babel，通过@babel/plugin-transform-runtime指定使用core-js的Promise实现，避免全局依赖：

{
  "plugins": [
    ["@babel/plugin-transform-runtime", {
      "corejs": 3,
      "useESModules": true
    }]
  ]
}

运行时隔离方案（内容脚本优先捕获） #

利用Chrome内容脚本的执行时机，在WinJS篡改全局Promise之前捕获原生版本，然后将后续代码包裹在闭包中强制使用该版本：

1. 调整内容脚本的manifest.json配置，确保注入时机为document_start：

{
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content-script-entry.js"],
      "run_at": "document_start"
    }
  ]
}

2. 在内容脚本入口文件的最开头执行缓存和隔离代码：

// 缓存原生Promise
const NativePromise = window.Promise;

// 闭包内加载组件库和业务代码，强制使用原生Promise
(function(Promise) {
  // 动态导入组件库和你的业务逻辑
  import('./stencil-components-bundle.js');
  import('./your-business-code.js');
})(NativePromise);

内容的提问来源于stack exchange，提问作者THEK