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>

这是控制HTML

的javascript

// 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 var是未定义的。

我的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扩展

1 个答案: