将 firebase 数据库连接到 chrome 扩展

Question

我有一个 Chrome 扩展程序，它有一个从 firebase 数据库中提取的单词列表的弹出菜单。

这是弹出窗口中的 HTML

<!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>

这里是 javascript 控制 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;
});

我无法从脚本的第二部分 firebase 取回数据。它说我的 fireBank 变量未定义。

my firebase.js 和 action.js 文件位于根文件夹中，每个文件都定义了 var firebase 和 fireBank。但是名为 browser_action.html 的 HTML 文件位于名为 browser_action 的根文件夹中但是我已经在正文的开头引用了它。

如果我将所有内容放在一起，代码运行良好，但这并不是我想要处理代码的方式。

Answer 1

browser_action.js 在 ../firebase.js 之前被引用并且脚本按该顺序加载，因此 fireBank 是 undefined.

解决方案 1a：将 <script src="browser_action.js" ></script> 移到 firebase.js 之后。
解决方案 1b：将 <script src="browser_action.js" ></script> 移到结束 </body> 标记之前，以便在页面完全加载后加载它，您将不需要页面加载处理程序：document.addEventListener("DOMContentLoaded", ... 包装器变得不必要了。

解决方案 2：将 browser_action.js 中的所有代码移动到页面加载处理程序中：

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

将 firebase 数据库连接到 chrome 扩展

Hooking up firebase database to chrome extension

javascript

google-chrome-extension

firebase