如何在 Chrome 擴展中使用 FlutterFire

Question

當我部署一個使用 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.

Answer 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 的人員，如果您看到此消息，請告訴我們是否有更好的解決方案。