How to use FlutterFire in chrome extension

Question

When I deploy a flutter app that uses firebase as a chrome extension, I get the following error

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.

I tried adding engine.js like this but is does not work.

  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"));
              };

Then it became worse, the error above stayed plus new ones:

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 of these)

Then I tried to change CSP in manifest.json

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

But now it is even worse, the extension refuses to load at all and uninstalled itself after restarting 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

You were almost on the right track at your first attempt. It's not possible to load external script in an extension nowadays so Just download the firebase js files locally and use the code in your 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"));
              };

in your index.html body, add

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

Then you will get the same error after this and you might think my solution is not working. However, there one last step required, in fact, I realized that:

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

Still import the cdn in their first line. for example for firebase-app-check.js , the first line is 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";

So you know what to do from here, change the cdn url to "./firebase-app.js" for all the 3 files.

I do not know why it is very complicated like to use Firebase, Flutter and Chrome extension together but maybe there are better solutions that I do not know. For the people at Flutter and Firebase, if you see this please let us know if there are better solutions.