javascript 如何在chrome扩展中使用FlutterFire

3yhwsihp 于 2022-12-17 发布在 Java

关注(0)|答案(1)|浏览(214)

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

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.

(many（其中）
然后尝试更改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

来源：https://stackoverflow.com/questions/74822985/how-to-use-flutterfire-in-chrome-extension

1条答案

按热度按时间

fnvucqvd1#

你第一次尝试的时候就已经走上了正确的道路。现在在扩展中加载外部脚本是不可能的，所以只需要在本地下载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网址改为"./firebase-app.js"。
我不知道为什么同时使用Firebase，Flutter和Chrome扩展会很复杂，但也许有更好的解决方案，我不知道。Flutter和Firebase的人，如果你看到这个，请让我们知道是否有更好的解决方案。

赞(0）回复(0）举报 2022-12-17

我来回答

javascript 如何在chrome扩展中使用FlutterFire

1条答案

相关问题

热门标签

最新问答