Error connecting Chrome extension to Firebase RTB: "firebase.database is not a function"

Question

I'm trying to create a chrome extension that saves some info to firebase database but I can't get it to work. I have followed the quickstart.js example and this post but I'm missing something. I have something like the following (this is simplified):

manifest.json

{
"manifest_version": 2,

"name": "My extension",
"description": "saving info to firebase",
"version": "1.0",
"background": {
    "scripts": [
        "firebase-app.js",
        "background.js"
    ],
    "persistent": false
},

"browser_action": {
    "default_popup": "popup.html"
},

[...]

"content_security_policy": "script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'; connect-src 'self' wss://*.firebaseio.com;"
}

app.js

var config = {

apiKey: "XXX",
authDomain: "XXX.firebaseapp.com",
databaseURL: "https://XXX.firebaseio.com",
projectId: "XXX",
storageBucket: "XXX.appspot.com",
messagingSenderId: "XXX",
};

firebase.initializeApp(config);

var saveButton = document.getElementById('save');

function writeFirebase( A, B, C) {
  var postData = {
    first: A,
      second: B,
      third: C
  };

  var newPostKey = firebase.database().ref().child('info').push().key;

  var updates = {};
  updates['/info/' + newPostKey] = jobData;

  return firebase.database().ref().update(updates);
}


saveButton.onclick = function() {
    A = 'A';
B = 'B';
C = 'C';

    writeFirebase(A, B, C);
  };

app.html

<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Tasty</title>
        <link rel="stylesheet" href="css/app.css" />
    </head>
    <body>
        <div>     

            <button class="save" id="save">Save info</button>

        </div>

        <script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-app.js"></script>

        <script src="app.js"></script>
    </body>
</html>

So, when I click the save button and app.js executes firebase.database().ref().child('info').push().key; y get an error:

Uncaught TypeError: firebase.database is not a function

Can someone help me? Thanks!

You have to include the script for the database: <script src="https://www.gstatic.com/firebasejs/7.14.4/firebase-database.js"></script> before your script for app.js. — Iván Nokonoko

Iván Nokonoko Iván Nokonoko · Accepted Answer · 2020-06-03T16:32:12

According to the documentation, in order to access the Realtime Database, apart from the Firebase core (firebase-app.js) you have to include the database script, like this:

<script src="https://www.gstatic.com/firebasejs/7.14.6/firebase-database.js"></script>

Error connecting Chrome extension to Firebase RTB: "firebase.database is not a function"

1 Answers