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

标签 javascript firebase google-chrome google-cloud-firestore google-chrome-extension

问题
我正在编写一个 chrome 扩展,用户将使用它来使用托管在 firestore 数据库中的内容来填写表单。我面临的核心问题是 Chrome 扩展的 list 版本 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,远程托管代码为 no longer allowed出于安全原因,尽管我尝试链接的脚本是谷歌的,并且一旦加载解压缩的扩展程序,尝试这样做就会引发错误。
我的问题:
如何将 Manifest Version 3 Chrome Extension 连接到 firestore 数据库?
我试过的
我花了很多时间尝试在本地提取 cdn 脚本,然后将它们直接导入到我的 background.js 中。像这样:
try {
    importScripts('firebase/firebase-firestore.js');
} catch (error) {
    console.log(error);
}
这种方法使我陷入了深深的困境,因为这也不起作用,但显然是出于不同的原因。具体来说,对于 MV3,服务 worker 不支持 XMLHttpRequest。
可能的后续步骤
从我所做的阅读来看,我真的希望这里有人能指出我错过的东西,似乎无法将 firestore 直接连接到扩展。我在别处读到可以通过 MV3 chrome 扩展访问 firebase 实时数据库。
为我们的用户需要能够使用 chrome 扩展程序访问的相关内容在 firestore 和实时数据库之间建立一些链接,然后将实时数据库连接到扩展程序似乎是下一步。这可行吗?
为什么不使用 list 版本 2?
只是为了将来证明我们的应用程序,当 MV2 被弃用时,我们不希望陷入困惑。虽然任何官方 channel 都没有显示 MV2 的弃用日期,但 the chromium blog says :

"While there is not an exact date for removing support for Manifest V2 extensions, developers can expect the migration period to last at least a year from when Manifest V3 lands in the stable channel."


这使得 MV2 的生命周期在 2022 年初的某个时候结束。
编辑添加:
他们announced some hard dates , 2022 年 1 月,他们停止接受新的 MV2 扩展,但对现有扩展的维护可能会持续到 2023 年 1 月,届时所有扩展都必须是 MV3。

最佳答案

我刚刚看到这个问题,因为我只是在使用 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)
所有这些文件都可以像这样在一个文件夹中:
enter image description here
连接到火力基地
然后你必须创建你的背景文件。就我而言,我称它为 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);
调整 list 文件
因为您正在使用导入,所以您的 background.js(在我的情况下为 firebase.js)必须是模块,因此在您的 manifest.json 文件中写入以下内容:
"background": {
    "service_worker": "firebase.js",
    "type": "module"
  }
接下来的步骤取决于您要使用的服务。从这里开始,文档就足够好了。
最后一个快速警告。由于 manifest v3 的工作方式,我认为某些服务根本不起作用,但我不太确定。
希望这可以帮助您或遇到此问题的任何人:D

关于javascript - 将 Manifest Version 3 Chrome Extension 连接到 firestore 数据库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69160743/

相关文章:

google-chrome - Chrome扩展弹出窗口中的表单发布没有做任何事情

javascript - 使用 CreateJS 按下鼠标并移动会将 chrome Canvas 降低到 30FPS

javascript - 如何正确制作此动画?

javascript - 当资源不是本地时,Cordova android 4.x 后退按钮事件不会触发(使用 http)

javascript - Firebase `is not a function` Firebase 5.11.1 及更高版本出错

firebase - 我们不能在 Firebase Cloud Functions 中写入多个文件吗

javascript - 求解代数方程的思维过程?

javascript - 箭头键在 Firefox 中无法使用给定的 javascript 工作

ios - 在不同设备上使用同一帐户数据不同步

jquery - 在 td 中为 div 设置动画会导致 Chrome 中出现不稳定的行为