寻求Manifest V3版本Chrome扩展连接Firestore数据库的可行方案

前置准备 #

• 完成Firebase项目创建与Firestore数据库初始化，获取项目配置信息（apiKey、authDomain、projectId等）
• 在扩展的manifest.json中配置必要权限：

  {
    "host_permissions": ["https://firestore.googleapis.com/*", "https://*.firebaseio.com/*"],
    "background": {
      "service_worker": "sw.js",
      "type": "module" // 启用ES模块支持
    }
  }
  

方法一：使用Firebase模块化JS SDK适配MV3 #

MV3的后台环境是Service Worker，需使用Firebase的模块化SDK（避免依赖DOM API）：

1. 安装SDK：

   npm install firebase
   

2. 在sw.js中初始化并调用Firestore：

   import { initializeApp } from 'firebase/app';
   import { getFirestore, doc, getDoc, setDoc } from 'firebase/firestore/lite';
   
   // 填入你的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"
   };
   
   const app = initializeApp(firebaseConfig);
   const db = getFirestore(app);
   
   // 示例：读取文档
   async function fetchUserDoc(userId) {
     const docRef = doc(db, "users", userId);
     const docSnap = await getDoc(docRef);
     return docSnap.exists() ? docSnap.data() : null;
   }
   
   // 示例：写入文档
   async function saveUserDoc(userId, userData) {
     const docRef = doc(db, "users", userId);
     await setDoc(docRef, userData);
   }
   

方法二：直接调用Firestore REST API #

若不想引入SDK，可通过HTTP请求直接操作Firestore，更轻量：

// 示例：读取指定文档
async function getFirestoreDoc(projectId, docPath) {
  const url = `https://firestore.googleapis.com/v1/projects/${projectId}/databases/(default)/documents/${docPath}`;
  const response = await fetch(url, {
    method: 'GET',
    headers: {
      'Authorization': 'Bearer ' + USER_AUTH_TOKEN, // 需通过Firebase Auth获取ID Token
      'Content-Type': 'application/json'
    }
  });
  return await response.json();
}

// 示例：写入文档
async function setFirestoreDoc(projectId, docPath, data) {
  const url = `https://firestore.googleapis.com/v1/projects/${projectId}/databases/(default)/documents/${docPath}?updateMask.fieldPaths=*`;
  await fetch(url, {
    method: 'PATCH',
    headers: {
      'Authorization': 'Bearer ' + USER_AUTH_TOKEN,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ fields: formatDataToFirestoreType(data) })
  });
}

// 辅助函数：将JS数据转为Firestore字段格式
function formatDataToFirestoreType(data) {
  const formatted = {};
  for (const key in data) {
    const value = data[key];
    if (typeof value === 'string') formatted[key] = { stringValue: value };
    if (typeof value === 'number') formatted[key] = { integerValue: value.toString() };
    // 可扩展其他数据类型（布尔、数组等）
  }
  return formatted;
}

安全与权限配置 #

1. Firestore规则：在Firebase控制台配置符合业务需求的安全规则，例如：

   rules_version = '2';
   service cloud.firestore {
     match /databases/{database}/documents {
       match /users/{userId} {
         allow read, write: if request.auth.uid == userId; // 仅允许用户操作自己的文档
       }
     }
   }
   

2. API密钥来源限制：在Google Cloud控制台的API密钥设置中，添加扩展的来源白名单：chrome-extension://YOUR_EXTENSION_ID/*，避免密钥被滥用。

常见问题处理 #

• CORS错误：检查manifest.json的host_permissions是否包含Firestore相关域名，确认API密钥的来源配置正确。
• Service Worker模块导入失败：确保manifest.json的background字段添加了"type": "module"，或使用打包工具（Webpack/Rollup）将SDK打包为兼容Service Worker的文件。

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