Chrome扩展接入Firebase 9.x后直接打开HTML报语法错误如何排查？

云原生阿岚

2026-9-30

问题排查步骤

报错的核心原因是你使用的Firebase 9.x默认是ES Module版本，浏览器默认将无特殊声明的script标签识别为普通脚本，不识别import/export模块化语法，因此直接打开HTML会报错；Chrome扩展的页面环境默认支持模块化规则，所以加载为扩展时没有触发报错。你可以按照以下步骤逐一排查修复：

步骤1：替换为兼容普通脚本的Firebase CDN版本
将HTML中的Firebase资源替换为带-compat后缀的兼容版本，该版本支持直接在普通script标签中使用，无需额外配置模块化：
```
<script src="https://www.gstatic.com/firebasejs/9.1.2/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.1.2/firebase-database-compat.js"></script>
```

步骤2：修正firebase.js的逻辑错误
你自定义了同名的initializeApp函数，会覆盖Firebase提供的初始化方法，且函数内部调用initializeApp会触发无限递归，直接删除自定义的函数外层，使用Firebase暴露的全局方法即可：

const firebaseConfig = {
  apiKey: "XXXXXXXXXXXXXXXXXXXXX",
  authDomain: "coupon-finder-73300.firebaseapp.com",
  projectId: "coupon-finder-73300",
  storageBucket: "coupon-finder-73300.appspot.com",
  messagingSenderId: "432596469035",
  appId: "1:432596469035:web:54b907640f9065fc33b16e"
};
// 初始化Firebase
const app = firebase.initializeApp(firebaseConfig);
console.log(app);

步骤3：原生ES Module用法适配（可选）
如果你不想使用compat版本，就给所有引入Firebase相关资源的script标签添加type="module"属性，告知浏览器这些资源为ES模块：
```
<script type="module" src="https://www.gstatic.com/firebasejs/9.1.2/firebase-app.js"></script>
<script type="module" src="https://www.gstatic.com/firebasejs/9.1.2/firebase-database.js"></script>
<script type="module" src="firebase.js"></script> 
```
同时取消firebase.js中import { initializeApp }行的注释，删除自定义的initializeApp函数即可。
步骤4：双场景验证
修改完成后分别测试直接打开HTML文件、加载为Chrome扩展两种场景，确认无报错且初始化日志正常打印即可。

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