Chrome扩展内容脚本中无法加载Firebase

Question

我正在尝试在Chrome扩展程序的内容脚本中加载Firebase：

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)

但是我收到了错误信息：

Uncaught ReferenceError: Firebase is not defined 

我做错了什么？

- tldr

---

在 GitHub 上还有一个带有 Firebase 的示例 Chrome 扩展程序，您可以用作参考：https://github.com/firebase/firebase-chrome-extension - Kato

请查看这个，我认为它可能对你有帮助 https://dev59.com/6Inca4cB1Zd3GeqP9Ex2#42153075 - normalUser

Answer 1

您正在使用 document.body.append(...) 注入 Firebase 库。然后，您试图从扩展程序内部访问 Firebase 库，但是 Chrome 扩展程序与网页隔离开来。您将 Firebase 库注入到网页中，因此扩展程序无法直接访问它。您可以通过以下两种方式之一访问它：

1. 将要与 Firebase 交互的代码注入到网页中。它将能够与注入的 Firebase 代码交互。

2. 下载 Firebase 库 JavaScript，并将 Firebase 代码添加到您的 Chrome 扩展程序清单中。您需要下载它并将其打包到扩展程序的其余代码库中。然后，它可以直接在您的扩展程序代码中使用。

我个人推荐第二种方式。将所有代码保留在 Chrome 沙箱内更安全，不会向用户（因为他们可以检查网页并查看您注入的代码）或网站公开任何 Firebase 代码。特别是如果您需要使用任何秘密或私有密钥连接到 Firebase，则更是如此。

- Afforess

---

感谢你详细的解释，我也选择了2 :) - tldr