Chrome扩展引入Firestore库遇UTF-8编码错误问题求助

我之前开发Chrome扩展时也踩过类似的坑，把本地下载的Firestore库放到content_scripts里就触发了编码报错，折腾了好一会儿才搞定，给你几个可行的解决思路：

1. 检查并转换Firestore库文件的编码 #

最常见的原因就是你下载的Firestore.js文件本身不是UTF-8编码。用VS Code就能快速修复：

• 用VS Code打开下载的Firestore库文件
• 看编辑器右下角的编码标识（比如显示GBK、ISO-8859-1之类的）
• 点击这个编码，选择「通过编码重新打开」，然后选「UTF-8」
• 再点击右下角的编码，选择「通过编码保存」，再次选「UTF-8」覆盖原文件
• 重新打包或加载扩展，编码问题大概率就能解决

2. 确认manifest.json的content_scripts配置无误 #

检查你的manifest.json里content_scripts的配置，确保Firestore库的路径正确，且没有额外指定错误的编码参数：

"content_scripts": [
  {
    "matches": ["https://your-target-page.com/*"],
    "js": ["firebase-app.js", "firebase-firestore.js", "your-content-script.js"]
  }
]

注意加载顺序要合理：先加载Firebase核心库，再加载Firestore，最后是你的业务脚本。

3. 替代方案：动态注入CDN版本的Firestore库 #

如果本地文件的编码问题始终搞不定，不如换个思路——在content script里动态注入CDN链接，绕过本地文件的编码限制：
在你的业务content script里加入这段代码：

// 动态加载Firestore库
function loadFirestore(callback) {
  const script = document.createElement('script');
  script.src = 'https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore.js'; // 替换成你需要的版本
  script.onload = callback;
  document.head.appendChild(script);
}

// 等Firestore加载完成后再执行你的逻辑
loadFirestore(() => {
  // 这里写你的Firestore相关代码
  const db = firebase.firestore();
  // ... 其他操作
});

这样既不用处理本地文件的编码问题，还能保证库是官方标准版本。

另外要注意：Chrome扩展的content_scripts只允许加载文本格式的UTF-8文件，如果你下载的Firestore库是异常压缩的二进制格式，也会触发这个错误，尽量从Firebase官方下载标准压缩或未压缩的版本。

内容的提问来源于stack exchange，提问作者Arno van Doesburg