Unable to use firebase_core with Flutter when building a chrome extension

463 views
Skip to first unread message

Nour Hacker

unread,
Mar 26, 2023, 8:05:57 AM3/26/23
to Chromium Extensions
Hi,

I have been building a chrome extension for the last couple of weeks but now I'm facing an issue when trying to use firebase_core plugin.

I am trying to connect to firebase DB to be able to add/retrieve data using cloud_firestore plugin.

In order to use cloud_firestore funtionalities like FirebaseFirestore.instance.collection, I would first need to initialize firebase by calling:

    WidgetsFlutterBinding.ensureInitialized();
    await Firebase.initializeApp(
      options: DefaultFirebaseOptions.web,
    );

I call this in my main.dart file.

When using the code above, a CSP error occurs. Which says the following:
________________________
main.dart.js:42836 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-Fao661ADUxDSmVdFYUQXNSBGfMlW96o7X2IgkxhpC9E='), or a nonce ('nonce-...') is required to enable inline execution.
________________________

If I don't initialize Firebase, then this error does not occur, but then, I can't use cloud_firestore.

Here's my manifest.json file:
___________
{
    "name": "assistant",
    "short_name": "assistant",
    "description": "A new Flutter project.",
    "version": "1.0.0",
    "content_security_policy": {
        "extension_pages": "script-src 'self' ; object-src 'self'"
    },
    "action": {
        "default_popup": "index.html",
        "default_icon": "icons/Icon-192.png"
    },
    "manifest_version": 3,
    "permissions":[
        "identity"
    ]

}
____________
When I'm building my project in VS Code, I'm using this command:

flutter build web --web-renderer html --csp

I have looked for a solution everywhere, here, here and here. But I am still unable to solve this issue.

I also saw this, which seems that the person who is proposing this solution has made it work for him. But since I am not familiar with javascript, I couldn't understand exactly what he did.

Btw, here are my dependencies from firebase:

  firebase_core: ^2.8.0
  cloud_firestore: ^4.4.5

Is there a "clean" way to solve this issue? I have spent a lot of time trying to solve it without any success :( 

Any help will be greatly appreciated!

Patrick Kettner

unread,
Mar 26, 2023, 8:31:39 AM3/26/23
to Nour Hacker, Chromium Extensions
Hi Nour
Where are you loading the main.dart.js page? Have you tried adding what the error message mentions to the extension_pages section of the content_security_policy in your manifest (e.g. "extension_pages": "script-src 'sha256-Fao661ADUxDSmVdFYUQXNSBGfMlW96o7X2IgkxhpC9E=' 'self' ; object-src 'self'"

patrick 

Nour Hacker

unread,
Mar 26, 2023, 12:22:03 PM3/26/23
to Chromium Extensions, Patrick Kettner, Chromium Extensions, Nour Hacker
Thanks for your answer! 
Yeah I tried that already, but when I do it, it says: "'content_security_policy.extension_pages': Insecure CSP value "'sha256-Fao661ADUxDSmVdFYUQXNSBGfMlW96o7X2IgkxhpC9E='" in directive 'script-src'." Could not load manifest. This happens when I try to load the unpacked folder to chrome://extensions.

Patrick Kettner

unread,
Mar 26, 2023, 12:43:14 PM3/26/23
to Nour Hacker, Chromium Extensions
Can you share more information about the structure of the project? How are you including the file in your project? 

Nour Hacker

unread,
Mar 26, 2023, 12:44:19 PM3/26/23
to Chromium Extensions, Nour Hacker, Patrick Kettner, Chromium Extensions
Btw, I load main.dart.js in index.html file:

<!DOCTYPE html>
<html style="height: 600px; width: 600px">
  <head>
    <meta charset="UTF-8" />
    <title>App</title>
  </head>
  <body>
    <script src="main.dart.js" type="application/javascript"></script>
  </body>
</html>

This didn't cause any issue before. The issue only started happening when I started using firebase_core and cloud_firestore packages.

Patrick Kettner

unread,
Mar 26, 2023, 12:50:17 PM3/26/23
to Nour Hacker, Chromium Extensions
I apologize, I didn't read the original error closely. What is line 42836 of main.dart.js? My guess is it is dynamically downloading code and trying to execute/eval it?

Nour Hacker

unread,
Mar 26, 2023, 12:50:43 PM3/26/23
to Chromium Extensions, Nour Hacker, Patrick Kettner, Chromium Extensions
When I build my flutter project using the command I shared before, I get several files in the build folder:

flutter_service_worker.js
flutter.js
index.html
main.dart.js
manifest.json

And some other folders for canvaskit, assets and icons.
The folder that contains all of these files and folders is then uploaded to chrome://extensions.

My extension works "fine" because I can open it and do some basic stuff with it. I can even authenticate users using the firebase authentication service with email and password.

Now, I'm trying to basically save and retrieve data from cloud firestore databse. The setup has been done as shown in the official documentation and I can actually save retrieve data if I build my project as a flutter web app (and not extension). But when I try to make requests to the DB through my extension, I get the errors I shared.

Nour Hacker

unread,
Mar 26, 2023, 12:52:47 PM3/26/23
to Chromium Extensions, Nour Hacker, Patrick Kettner, Chromium Extensions
No worries, the line 42836 is showing this :

o.head.appendChild(m)

This piece of code is generated by the flutter build so I'm not really sure what it's trying to do.

Patrick Kettner

unread,
Mar 26, 2023, 12:54:50 PM3/26/23
to Nour Hacker, Chromium Extensions
That is likely appending a script element to the page. You would need to either share the entire project, or use the chrome debugger to dig into it further.

Nour Hacker

unread,
Mar 27, 2023, 5:18:56 AM3/27/23
to Chromium Extensions, Patrick Kettner, Chromium Extensions, Nour Hacker
Hi Patrick
I just sent you a zipped folder of my entire Flutter project. I appreciate the help!

Patrick Kettner

unread,
Mar 27, 2023, 7:18:30 PM3/27/23
to Nour Hacker, Chromium Extensions
Just to summarize for the public group, the issue here was firestore adding the script tag (both the bootstrap, and the subsequent files). This was breaking because you can't load remote resources that way in mv3. Putting the output of the flutter build through a rollup[1] config inlines all of the SDK and works[2]. 

1 - I don't know Flutter very well. if there is a way to hook into it's module resolution process, it should be done there instead
2 - The errors no longer happen, at least. I haven't run a full test suite on firestore, but it resolves and connects.

Sahil SeemFlow

unread,
Jun 13, 2023, 3:01:39 AM6/13/23
to Chromium Extensions, Nour Hacker
has this issue been resolved?

Patrick Kettner

unread,
Jun 13, 2023, 4:28:58 PM6/13/23
to Sahil SeemFlow, Chromium Extensions, Nour Hacker

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/2d13c42e-30e0-4da6-a492-14df96e9610cn%40chromium.org.
Reply all
Reply to author
Forward
0 new messages