Firebase not getting loaded in chrome extension content script

Question

I'm trying to load Firebase inside my chrome extension's 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 get the error message:

Uncaught ReferenceError: Firebase is not defined

What am I doing wrong?

There is also an example chrome extension with Firebase in GitHub you can use for reference: github.com/firebase/firebase-chrome-extension — Kato
Please have a look at this, i think it might help you stackoverflow.com/questions/29399594/… — normalUser

Afforess Afforess · Accepted Answer · 2014-10-26T03:46:34

What you are doing is injecting the firebase library by using document.body.append(...). Then, you are trying to access the firebase library from inside your extension, but chrome extensions are sandboxed away from the web page. You injected the firebase library into the web page, so it is not directly accessible to your extension. You can access it one of two ways:

Inject the code you want to interact with firebase into the web page. It will be able to interact with the injected firebase code.
Download the firebase library javascript, and add the firebase code to your chrome extension manifest. You will have to download it and package it with the rest of your extension's codebase. It then can be used directly in your extension code.

I personally recommend 2. It is more secure to keep all of the code inside the chrome sandbox and not expose any firebase code to the user (as they could inspect the web page and view your injected code) or website. This is especially true if you need to use any secret or private keys to connect to firebase.

Firebase not getting loaded in chrome extension content script

1 Answers