"Uncaught ReferenceError: firebase is not defined" when adding firebase to chrome extension

0
votes

I am trying to add Firebase to a Chrome extension and am getting the error "Uncaught ReferenceError: firebase is not defined", when I follow examples I am finding on the Internet (including all the answers I find on Stack Overflow).

My background.js file is only a few lines:

var config = {
  apiKey: "x-x",
  authDomain: "xx",
  databaseURL: "xx",
  projectId: "xx",
  storageBucket: "xx",
  messagingSenderId: "xx"
};

firebase.initializeApp(config);

The manifest is equally simple:

{
  "name": "test",
  "version": "0.0.32",
  "description": "test",
  "background": {
    "persistent": true,
    "scripts": [
      "background.js",
      "firebase-app.js",
      "firebase-firestore.js"
    ]
  },
  "short_name": "test",
  "permissions": [
    "activeTab"
  ],

  "content_security_policy": "script-src 'self' https://cdn.firebase.com https://*.firebaseio.com; object-src 'self'",
  "manifest_version": 2
}

If I try to use firebase.js (taken from Angular 7 node_modules directory) instead of firebase-app.js & firebase-firestore.js (from firebase-bower-master), Chrome complains and says I should include only the packages for the specific functions I want to use.

Every example I find indicates that the js scripts should be automatically loaded into background.js and work fine.

What am I missing?

Thanks for your help!

Edward

1
javascriptfirebasegoogle-chrome-extension
The very first thing I'd try is changing the order of the scripts so background.js is last. - Chris G
Chris - how did you get the JSON to format? I tried with (obviously) no success..... - Edward Caulfield
Super! The odd thing is that in my full app I have another js file that is included after background.js that works fine. However, putting background.js last did the trick. Thank you very much!! - Edward Caulfield
Cool; I wasn't 100% sure but too lazy to try myself ;) However it looks like if script A uses script B, then script B needs to be above script A. So there's nothing odd really about what you describe. background.js doesn't need to be last, but it needs to be below the firebase script. As for the formatting, indent by four spaces for code (it's basically Markdown). - Chris G

1 Answers

0
votes

Per Chris' suggestion, putting background.js last did the trick.

  "background": {
    "persistent": true,
    "scripts": [
      "firebase-app.js",
      "firebase-firestore.js",
      "background.js"
    ]
  },