时间戳

首页 > 解决方案 > 将 Manifest Version 3 Chrome Extension 连接到 firestore 数据库

javascript - 将 Manifest Version 3 Chrome Extension 连接到 firestore 数据库

问题描述

问题

我正在编写一个 chrome 扩展，用户将使用它来使用托管在 firestore 数据库中的内容来填写表单。我面临的核心问题是 Chrome 扩展的清单版本 3 似乎不支持任何谷歌与 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 的，并且尝试这样做会在您加载解压缩的扩展程序时立即引发错误。

我的问题：

如何将 Manifest Version 3 Chrome Extension 连接到 firestore 数据库？

我试过的

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

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

这种方法使我陷入了深深的困境，因为这也不起作用，但显然是出于不同的原因。具体来说，对于 MV3，服务工作者不支持 XMLHttpRequest。

可能的后续步骤

从我所做的阅读来看，我真的希望这里有人能指出我错过的东西，似乎无法将 firestore 直接连接到扩展。我在别处读到可以通过 MV3 chrome 扩展访问 firebase 实时数据库。

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

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

只是为了将来证明我们的应用程序，当 MV2 被弃用时，我们不希望陷入混乱。虽然任何官方频道上都没有出现 MV2 的弃用日期，但 Chromium 博客说：

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

这使得 MV2 的生命周期在 2022 年初的某个时候结束。

编辑添加：

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

标签： javascriptfirebasegoogle-chromegoogle-cloud-firestoregoogle-chrome-extension

解决方案

我刚刚看到这个问题，因为我只是在使用 manifest 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"
  }

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

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

希望这可以帮助您或遇到此问题的任何人：D

推荐阅读