将清单版本 3 Chrome 扩展连接到 firestore 数据库

Question

问题

我正在编写一个 chrome 扩展，用户将使用它来使用 firestore 数据库中托管的内容填写表单。我面临的核心问题是 Chrome 扩展的清单版本 3 似乎不支持任何 google 与 firestore 交互的机制。

以前，在 Manifest 版本 2 中，您可以在 background.html 文件中链接到 CDN 托管的 firebase 脚本，如下所示：

<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-firestore.js"></script>

使用 MV3，出于安全原因，不再允许远程托管代码，尽管我尝试链接的脚本是 google 的，并且在加载解压的扩展后尝试这样做会引发错误。

我的问题：

如何将清单版本 3 Chrome 扩展连接到 firestore 数据库？

我尝试过的

我花了很多时间尝试在本地提取 cdn 脚本，然后将它们直接导入到我的系统中，background.js如下所示：

try {
    importScripts('firebase/firebase-firestore.js');
} catch (error) {
    console.log(error);
}

这种方法让我陷入了困境，因为这也行不通，但显然出于不同的原因。具体来说，对于 MV3，Service Worker 不支持 XMLHttpRequest。

可能的后续步骤

从我完成的阅读来看，我真的希望这里有人能指出我错过的一些东西，看来不可能将 firestore 直接连接到扩展。我在其他地方读到可以通过 MV3 chrome 扩展访问firebase 实时数据库。

在 firestore 和实时数据库之间建立一些链接，以便我们的用户需要能够使用 chrome 扩展程序访问相关内容，然后将实时数据库连接到扩展程序似乎是下一步。这可行吗？

为什么不使用清单版本 2？

只是为了让我们的应用程序面向未来，我们不想在 MV2 被弃用时陷入混乱。虽然任何官方渠道上都没有出现 MV2 的弃用日期，但chromium 博客表示：

“虽然没有取消对 Manifest V2 扩展支持的确切日期，但开发人员预计迁移期从 Manifest V3 登陆稳定渠道起至少会持续一年。”

这使得 MV2 的生命周期将提前到 2022 年。

编辑添加：

他们宣布了一些硬性日期，即 2022 年 1 月，他们停止接受新的 MV2 扩展，但对现有扩展的维护可能会持续到 2023 年 1 月，届时所有扩展都必须是 MV3。

Answer 1

我刚刚看到这个问题，因为我只是用清单 v3 和 firebase 进行扩展，并且我已经遇到同样的问题大约两天了，但我认为我终于找到了解决方案。

导入 firebase 文件

首先，Manifest v3 存在不接受外部文件的问题。在他们的文档中，他们说您可以使用 npm install firebase 并按照他们的文档进行连接，但这仍然损坏。我所做的就是从 firebase 的 url 下载文件并创建一个包含所有文件的文件夹。这些 URL 具有以下模式：

https://www.gstatic.com/firebasejs/VERSION/firebase-SERVICE.js --> （其中 VERSION 是 SDK 版本，例如 9.6.4，SERVICE 是 SDK 名称，例如 firebase-firestore）

所有这些文件都可以位于一个文件夹中，如下所示：

连接到 firebase 然后您必须创建后台文件。就我而言，我将其称为 firebase.js 。在此文件中，第一行将是导入

import { initializeApp } from "/firebase/firebase-app.js";
import { HERE YOU WRITE THE SERVICES YOU WANT } from '/firebase/firebase-auth.js';
import {HERE YOU WRITE THE SERVICES YOU WANT} from '/firebase/firebase-firestore.js';

如您所见，您必须使用文件的相对路径。

您必须知道的一件重要的事情是，firebase 的所有服务文件都依赖于 firebase-app.js，因此您必须将其导入编辑为项目中 firebase-app.js 的相对路径。

然后你必须声明 firebase 配置：

const firebaseConfig = {
    apiKey: "///////",
    authDomain: "///////",
    projectId: "///////",
    storageBucket: "///////",
    messagingSenderId: "///////",
    appId: "///////",
    measurementId: "///////"
};

（您可以在firebase的项目设置页面找到此信息）

最后，您必须像这样初始化您的 firebase 应用程序和所有服务（例如 auth 和 firestore 服务）：

const firebase = initializeApp(firebaseConfig);
const auth = getAuth(firebase);
const db=getFirestore(firebase);

调整清单文件

因为您正在使用导入，所以您的background.js（在我的例子中是firebase.js）必须是模块，因此在manifest.json文件中写入以下内容：

"background": {
    "service_worker": "firebase.js",
    "type": "module"
  }

接下来的步骤取决于您要使用的服务。从这里开始，文档就足够好了。

最后一个快速警告。由于清单 v3 的工作方式，我认为某些服务根本无法工作，但我不太确定。

希望这对您或遇到此问题的任何人有所帮助：D