Firebase not loading in chrome extension script
I am trying to load Firebase inside my chrome extension content script:
var script = document.createElement("script")
script.type = "text/javascript"
script.src = "https://cdn.firebase.com/js/client/1.1.2/firebase.js"
document.body.appendChild(script)
firebaseUrl = 'https://foobar.firebaseio.com'
root = new Firebase(firebaseUrl)
But I am getting the error:
Uncaught ReferenceError: Firebase is not defined
What am I doing wrong?
source to share
What you do is embed the firebase library with document.body.append(...)
. Then you try to access the firebase library from an internal extension, but the chrome extensions are isolated from the webpage. You have injected the firebase library into the webpage so that it is not directly available to your extension. You can access it in one of two ways:
-
Inject the code you want to interact with firebase into the webpage. It will be able to interact with the injected firebase code.
-
Download java script of firebase library and add firebase code to chrome extension manifest. You will need to download it and package it with the rest of your extension code. It can then be used directly in your add-on code.
I personally recommend 2. It is safer to keep all the code inside the chrome sandbox and not expose the user to any firebase code (as they can inspect the webpage and view the injected code) or the website. This is especially true if you need to use secret or private keys to connect to firebase.
source to share