Chrome MV3扩展因Firebase远程代码被拒，求Webpack优化方案

方法一：通过Webpack配置排除Recaptcha相关代码 #

Firebase Auth的Recaptcha、手机号验证模块属于可选依赖，你没用到的话可以直接让Webpack忽略或替换这些模块：

1. 使用resolve.alias替换为空模块
   在webpack.config.js中添加别名配置，把不需要的模块指向自定义空文件：

   const path = require('path');
   
   module.exports = {
     // 其他配置...
     resolve: {
       alias: {
         // 替换Recaptcha核心模块
         '@firebase/auth/dist/esm2019/recaptcha$': path.resolve(__dirname, 'src/empty-module.js'),
         '@firebase/auth/dist/esm2019/recaptcha-verifier$': path.resolve(__dirname, 'src/empty-module.js'),
         // 可选：同时排除手机号验证模块
         '@firebase/auth/dist/esm2019/phone-auth$': path.resolve(__dirname, 'src/empty-module.js')
       }
     }
   };
   

   然后在src目录下创建empty-module.js，内容仅为：

   export {};
   

   这样Webpack打包时会用空模块替代Recaptcha相关代码，不会引入远程脚本。

2. 使用IgnorePlugin直接忽略模块
   也可以通过Webpack插件直接跳过匹配的模块：

   const webpack = require('webpack');
   
   module.exports = {
     // 其他配置...
     plugins: [
       new webpack.IgnorePlugin({
         resourceRegExp: /recaptcha|phone-auth/,
         contextRegExp: /@firebase\/auth/
       })
     ]
   };
   

方法二：修改Firebase Auth初始化配置，禁用Recaptcha自动加载 #

如果你只用谷歌OAuth认证，完全不需要Recaptcha，可以在初始化Auth时禁用相关自动配置：

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

const firebaseConfig = {
  // 你的Firebase配置
};

const app = initializeApp(firebaseConfig);
const auth = getAuth(app);

// 禁用Recaptcha自动加载（仅适用于无需验证的场景，比如纯谷歌登录）
auth.settings.appVerificationDisabledForTesting = true;

注：该配置不会影响谷歌OAuth登录的核心功能，因为谷歌认证本身不需要Recaptcha验证。

方法三：优化导入方式，配合Tree Shaking #

仅导入你实际用到的Firebase Auth模块，避免全量导入：

// 只导入谷歌认证相关模块
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";

结合Webpack的Tree Shaking（需确保mode为production），可以自动剔除未使用的代码，但Firebase部分模块结构可能导致Tree Shaking不彻底，建议搭配方法一的配置使用。

注意事项 #

修改完成后务必测试谷歌认证功能是否正常，确保排除Recaptcha代码后不影响核心业务逻辑。Chrome MV3严格禁止未经许可的远程脚本加载，因此完全排除相关代码是最稳妥的解决方式，不建议尝试将Recaptcha脚本本地化（会涉及适配问题，且可能违反Firebase服务条款）。

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