将Chrome扩展迁移至Manifest V3对接Firestore遇无输出问题求助

我正在将一款Chrome扩展迁移至Manifest V3，已解决所有报错，但刷新扩展后：

• Service Worker控制台无任何输出
• Firestore数据库未新增数据

以下是更新后的代码：

manifest.json #

{
  "name": "QuickChat",
  "version": "1.0",
  "description": "Chat quick!",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js", 
    "type": "module"
  },
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self'; script-src-elem 'self' 'unsafe-inline' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com;"
  }
}

background.js #

import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.22.2/firebase-app.js';
import { getFirestore, collection, getDoc, doc } from "https://www.gstatic.com/firebasejs/9.22.2/firebase-firestore.js";

// The app's Firebase configuration(change it to fit your database).
var firebaseConfig = {
  apiKey: "<api-key>",
  authDomain: "<auth-domain>",
  databaseURL: "<db-url>",    
  projectId: "<project-id>",
  storageBucket: "<storage-bucket>",
  messagingSenderId: "<messagingSender-Id>",
  appId: "<app-id>",
  measurementId: "<measurement-Id>"
};


// Initialize Firebase
const app = initializeApp(firebaseConfig);
// Initialize Cloud Firestore and get a reference to the service
const db = getFirestore(app);

// Write data
// This code is from : https://firebase.google.com/docs/firestore/query-data/get-data
const citiesRef = collection(db, "cities");

(async () => {
  await setDoc(doc(citiesRef, "SF"), {
    name: "San Francisco", state: "CA", country: "USA",
    capital: false, population: 860000,
    regions: ["west_coast", "norcal"] });
  await setDoc(doc(citiesRef, "LA"), {
    name: "Los Angeles", state: "CA", country: "USA",
    capital: false, population: 3900000,
    regions: ["west_coast", "socal"] });
  await setDoc(doc(citiesRef, "DC"), {
    name: "Washington, D.C.", state: null, country: "USA",
    capital: true, population: 680000,
    regions: ["east_coast"] });
  await setDoc(doc(citiesRef, "TOK"), {
    name: "Tokyo", state: null, country: "Japan",
    capital: true, population: 9000000,
    regions: ["kanto", "honshu"] });
  await setDoc(doc(citiesRef, "BJ"), {
    name: "Beijing", state: null, country: "China",
    capital: true, population: 21500000,
    regions: ["jingjinji", "hebei"] });




  // Read data.
  // This code is from : https://firebase.google.com/docs/firestore/query-data/get-data
  const docRef = doc(db, "cities", "SF");
  const docSnap = await getDoc(docRef);

  if (docSnap.exists()) {
    console.log("Document data:", docSnap.data());
  } else {
    // docSnap.data() will be undefined in this case
    console.log("No such document!");
  }
});

问题解决 #

1. 缺少setDoc方法导入

代码中使用setDoc写入Firestore数据，但import语句未包含该方法，导致方法未定义，执行报错但无输出。修改import语句：

import { getFirestore, collection, getDoc, doc, setDoc } from "https://www.gstatic.com/firebasejs/9.22.2/firebase-firestore.js";

2. 异步匿名函数未执行

定义了async匿名函数但未调用，导致内部的写入/读取逻辑完全没运行。修改函数末尾，添加执行调用：

(async () => {
  // 原有代码
})();

额外建议

Manifest V3中extension_pages的CSP尽量避免使用'unsafe-inline'，当前场景下导入外部Firebase脚本已包含合法源，可尝试移除'unsafe-inline'测试是否正常运行。

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