I am trying to build a chrome extension that uses firebase as a db in my content.js file but it doesn’t work. I am using v3 manifest. But I am unable to import firebase.
I tried setting up firebase in my project using this resource. I also tried downloading the source code from firebase-app.js and firebase-database.js, and imported it using
const firebase = chrome.extension.getURL('./firebase-app.js');
but this file has imports from
https://www.gstatic.com/firebasejs/9.15.0/firebase-app.js
this violates the content_security_policy and I get this error
Refused to load the script ‘https://www.gstatic.com/firebasejs/9.15.0/firebase-app.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.
I am aware of the external code restrictions.
Is there any workaround for this in vanilla JS implementation?
>Solution :
As the ECRs state, you cannot load these scripts from a CDN.
Instead you must install a JavaScript build pipeline (such as webpack or Rollup) to compile an application bundle of your extension’s code.
Firebase has documentation on this process and link to relevant resources that are worth reviewing.