Chrome扩展Manifest V3集成babel-plugin-istanbul遇CSP unsafe-eval错误求解

方案一：修改babel-plugin-istanbul配置，禁用全局变量注入 #

babel-plugin-istanbul默认会注入依赖eval的全局对象获取代码，触发Manifest V3的CSP限制。可以直接在Babel配置中禁用该行为：

在babel.config.js或.babelrc中添加配置：

module.exports = {
  plugins: [
    ['istanbul', {
      globals: false // 关闭自动注入全局变量的逻辑
    }]
  ]
};

配置生效后，插件不会再生成var global = new Function("return this")()这类代码，从根源避免CSP错误。

方案二：手动替换生成代码中的全局变量获取逻辑 #

如果无法修改插件配置，可直接修改打包后的background.js文件：
找到自动生成的这行代码：

var global = new Function("return this")()

替换为Manifest V3的service worker环境允许的全局对象引用：

var global = self;

在Chrome扩展的service worker中，self就是全局对象，完全可以替代通过new Function获取的this。

方案三：改用兼容Manifest V3的覆盖率工具 #

如果上述方案仍有适配问题，建议换用无需代码注入的覆盖率工具，比如c8。它基于V8引擎内置的覆盖率功能，不会生成依赖eval的代码，天然适配Manifest V3的安全限制。

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