Hooking up firebase database to chrome extension

Question

I have a Chrome extension that has a popup menu of lists of words drawn from a firebase database.

here's the HTML from the pop-up

<!DOCTYPE html>
<body>
    <script src="browser_action.js" ></script>
    <script src="../action.js" ></script>
    <script src="../firebase.js" ></script>
    <style type="text/css">
        #mainPopup {
            padding: 10px;
            height: 200px;
            width: 400px;
            font-family: Helvetica, Ubuntu, Arial, sans-serif;
        }
        h1 {
            font-size: 2em;
        }
    </style>

    <div id="mainPopup">

        <div id="wordListHTML">First div element with class="example".</div>

    </div>

</body>

</html>

and here's the javascript controlling the HTML

// testing if the javascript is able to manipulate the HTML
document.addEventListener("DOMContentLoaded", function(){
  document.getElementById("wordListHTML").innerHTML = "Hello there";

});


//gets a list of words in single strings back alphabetically from firebase
fireBank.orderByKey().on("child_added", function(snapshot){
  console.log(snapshot.key() + " " + snapshot.val());
  var wordList = snapshot.key() + " " + snapshot.val();
  document.getElementById("wordListHTML") = wordList;
});

I'm having trouble getting the data back from firebase, which is the second part of the script. It says that my fireBank var is undefined.

my firebase.js, and action.js file is on the root folder, each defining the var firebase and fireBank. But the HTML file, named browser_action.html is located within a folder in the root called browser_action But I referenced it already at the beginning of the body.

The code runs fine if I just lump everything together, but that's not exactly how I want to handle my code.

wOxxOm wOxxOm · Accepted Answer · 2015-10-23T08:54:27

browser_action.js is referenced before ../firebase.js and the scripts are loaded in that order, so fireBank is undefined.

Solution 1a: move <script src="browser_action.js" ></script> after firebase.js.
Solution 1b: move <script src="browser_action.js" ></script> before the closing </body> tag so that it's loaded after the page is completely loaded and you won't need the page load handler: document.addEventListener("DOMContentLoaded", ... wrapper becomes unnecessary.

Solution 2: move all the code in browser_action.js inside the page load handler:

document.addEventListener("DOMContentLoaded", function(){
    ..............
    fireBank.orderByKey()..........
});

Hooking up firebase database to chrome extension

1 Answers