如何在Chrome扩展的content_scripts中添加Cloud Firestore库？

当然可以！在Chrome扩展的content_scripts里集成Firebase的Firestore库，有几种实用的方案，我帮你一步步拆解：

方案1：本地脚本直接引入（Manifest V2/V3通用） #

这是最直接的方式，把Firebase的库文件下载到你的扩展目录中，然后在manifest.json里声明加载顺序：

1. 从Firebase官网下载对应的firebase-app.js和firebase-firestore.js文件，放到扩展的根目录（比如新建一个libs子文件夹存放）。
2. 修改manifest.json的content_scripts配置，注意必须先加载Firebase库，再加载你的业务脚本：

{
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["https://your-target-site.com/*"], // 替换成你需要匹配的目标网站
      "js": [
        "libs/firebase-app.js",
        "libs/firebase-firestore.js",
        "your-content-script.js"
      ]
    }
  ]
}

3. 在your-content-script.js里初始化并使用Firestore：

// 初始化Firebase配置
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

// 初始化App和Firestore实例
firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();

// 示例：获取集合数据
db.collection("users").get().then((querySnapshot) => {
  querySnapshot.forEach((doc) => {
    console.log(`${doc.id} =>`, doc.data());
  });
});

方案2：动态加载CDN脚本（适合Manifest V3） #

如果不想本地存放库文件，可以在content script里动态创建<script>标签加载CDN资源，但要注意content script的隔离上下文限制：

// 封装动态加载脚本的工具函数
function loadFirebaseScript(url, callback) {
  const script = document.createElement('script');
  script.src = url;
  script.onload = callback;
  document.head.appendChild(script);
}

// 先加载Firebase核心库，再加载Firestore模块
loadFirebaseScript('https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js', () => {
  loadFirebaseScript('https://www.gstatic.com/firebasejs/9.23.0/firebase-firestore.js', initFirebase);
});

function initFirebase() {
  // 注意：这里的firebase对象属于页面全局上下文，而非content script的隔离环境
  // 如果需要在content script中使用Firestore数据，需通过Chrome消息API跨上下文通信
  const firebaseConfig = { /* 你的配置信息 */ };
  window.firebase.initializeApp(firebaseConfig);
  const db = window.firebase.firestore();
  
  // 示例：添加文档到集合
  db.collection("posts").add({
    title: "New Post",
    content: "Hello from Chrome Extension!"
  });
}

提示：动态加载的脚本会注入到页面的全局上下文，若要在content script中使用Firestore操作结果，可通过chrome.runtime.sendMessage实现跨上下文数据传递。

方案3：使用ES模块打包（推荐Manifest V3） #

如果你的扩展采用现代化开发流程（比如用Webpack/Rollup打包），可以直接通过npm安装Firebase，然后在代码中导入模块：

1. 初始化npm项目并安装Firebase：

npm init -y
npm install firebase

2. 在你的content script源文件中导入并使用：

import { initializeApp } from 'firebase/app';
import { getFirestore, collection, addDoc } from 'firebase/firestore';

const firebaseConfig = { /* 你的配置信息 */ };

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

// 示例：异步添加文档
async function addNewUser() {
  try {
    const docRef = await addDoc(collection(db, "users"), {
      name: "John Doe",
      email: "john@example.com"
    });
    console.log("Document written with ID: ", docRef.id);
  } catch (e) {
    console.error("Error adding document: ", e);
  }
}

addNewUser();

3. 用打包工具将代码打包成单个文件，再在manifest.json中引用打包后的文件即可。这种方式的优势是代码更模块化，也避免了上下文隔离的问题。

注意事项 #

• Manifest V3限制：Manifest V3中content scripts不能直接引用外部CDN脚本（content_scripts.js字段仅支持本地文件），方案2是绕开这个限制的可行方式。
• 配置安全：Firebase的apiKey属于公开识别项（并非保密密钥），但其他配置项（如projectId）请确保正确填写。
• 权限配置：无需额外在manifest.json中声明跨域权限，Firebase的API域名已在Chrome默认允许列表中。

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