如何在 Chrome 扩展中使用 FlutterFire答案

【问题标题】：How to use FlutterFire in chrome extension如何在 Chrome 扩展中使用 FlutterFire
【发布时间】：2022-12-16 18:21:56
【问题描述】：

当我部署一个使用 firebase 作为 chrome 扩展的 flutter 应用程序时，出现以下错误

main.dart.js:36994 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-YBHx8OpTDOL4+BciDWDJCan2nXW4/AjhyYodJv5SvZg='), or a nonce ('nonce-...') is required to enable inline execution.

我试过像这样添加 engine.js 但没有用。

  window.ff_trigger_firebase_core = async (callback) => {
    callback(await import("https://www.gstatic.com/firebasejs/9.11.0/firebase-app.js"));
  };
      window.ff_trigger_firebase_app_check = async (callback) => {
        callback(await import("https://www.gstatic.com/firebasejs/9.11.0/firebase-app-check.js"));
      };
          window.ff_trigger_firebase_remote_config = async (callback) => {
            callback(await import("https://www.gstatic.com/firebasejs/9.11.0/firebase-remote-config.js"));
          };
              window.ff_trigger_firebase_firestore = async (callback) => {
                callback(await import("https://www.gstatic.com/firebasejs/9.11.0/firebase-firestore.js"));
              };

然后情况变得更糟，上面的错误仍然存在，加上新的错误：

engine2.js:22 Uncaught (in promise) TypeError: Failed to fetch dynamically imported module: https://www.gstatic.com/firebasejs/9.11.0/firebase-remote-config.js

Refused to load the script 'https://www.gstatic.com/firebasejs/9.11.0/firebase-firestore.js' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

（其中很多）

然后我尝试更改manifest.json中的CSP

"content_security_policy": {
        "extension_pages": "script-src 'self' https://www.gstatic.com; object-src 'self'"
    },

但现在更糟糕的是，扩展完全拒绝加载并在重启 chrome 后自行卸载：

Failed to load extension
File
~/StudioProjects/yilong_ma/build/web
Error
'content_security_policy.extension_pages': Insecure CSP value "https://www.gstatic.com" in directive 'script-src'.
Could not load manifest.

【问题讨论】：

标签： javascript flutter firebase dart google-chrome-extension

【解决方案1】：

您在第一次尝试时几乎就走在了正确的轨道上。现在不可能在扩展中加载外部脚本，所以只需在本地下载 firebase js 文件并使用 engine.js 中的代码：

  window.ff_trigger_firebase_core = async (callback) => {
    callback(await import("./firebase/firebase-app.js"));
  };
      window.ff_trigger_firebase_app_check = async (callback) => {
        callback(await import("./firebase/firebase-app-check.js"));
      };
          window.ff_trigger_firebase_remote_config = async (callback) => {
            callback(await import("./firebase/firebase-remote-config.js"));
          };
              window.ff_trigger_firebase_firestore = async (callback) => {
                callback(await import("./firebase/firebase-firestore.js"));
              };

在您的 index.html 正文中，添加

<script src="engine.js" type="module"></script>

然后你会在这之后得到同样的错误，你可能认为我的解决方案不起作用。然而，还需要最后一步，事实上，我意识到：

firebase-app-check.js
firebase-firestore.js
firebase-remote-config.js

仍然在他们的第一行导入 cdn。例如firebase-app-check.js，第一行是import{_getProvider as e,getApp as t,_registerComponent as r,registerVersion as n}from"https://www.gstatic.com/firebasejs/9.11.0/firebase-app.js";

所以你知道从这里做什么，将所有 3 个文件的 cdn url 更改为 "./firebase-app.js"。

我不知道为什么同时使用 Firebase、Flutter 和 Chrome 扩展会很复杂，但也许有更好的解决方案，我不知道。对于 Flutter 和 Firebase 的人员，如果您看到此消息，请告诉我们是否有更好的解决方案。

【讨论】：