如何在Chrome扩展程序中使用Firebase数据库

Question

如何在Chrome扩展程序中使用Firebase数据库

javascriptgoogle-chromefirebasefirebase-realtime-databasegoogle-chrome-extension

15

我希望将其用作我的内容脚本的一部分，以便可以从我的Firebase数据库中提取数据。然而，我不知道如何引用Firebase文档中提供的脚本:

<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase.js"></script>

我知道如果我在弹出的HTML页面中做所有事情，那么我可以加载脚本标签，但是在内容脚本中，除了内容页面之外没有其他HTML页面，所以我不确定这是否可能。

- Khalil Hijazi

3

您需要下载脚本并将其与您的扩展程序捆绑在一起。或者您可以在manifest.json中允许下载SDK。请参见https://github.com/firebase/quickstart-js/tree/master/auth/chromextension。 - Frank van Puffelen

@FrankvanPuffelen 我没有使用认证。只是使用数据库，所以我不确定那个链接是否仍然有效？ - Khalil Hijazi

@FrankvanPuffelen，看起来我必须将扩展上传到商店才能使其正常工作？我刚刚这样做了，但这真的有必要吗？ - Khalil Hijazi

@FrankvanPuffelen 按照指示操作，但是没有起作用。 - Khalil Hijazi

@Khalil Hijazi 你最终解决了这个问题吗？ - jkupczak

@jkupczak 没有，我已经有一段时间没有看它了。希望很快能够查看其他答案，看看是否解决了问题。 - Khalil Hijazi

2个回答

1

将以下内容添加到您的扩展清单文件中应该就可以解决问题了：

"permissions": [
    "https://www.gstatic.com/firebasejs/5.3.0/firebase.js"
],

完成上述步骤后，您应该能够使用扩展JavaScript中的任何正常XHR客户端访问API（请注意安全问题）。

- Kenzoid

您是在建议他专门使用那个网站吗？那是什么？ - jkupczak

@jkupczak 不好意思，我忘了，我马上改。 - Kenzoid

@jkupczak 已修复。 - Kenzoid

@Kenzoid 感谢您的建议，我会尽快检查并看看它是否解决了问题。 - Khalil Hijazi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MobDev · Accepted Answer

ContentScript运行在页面的DOM上，但是在不同的JS沙盒中，所以你无法像示例中所示那样直接通过DOM注入JS。

我建议您将firebase库加载到后台页面，然后您可以从后台脚本访问它，并通过后台后端代理请求从您的Content Script中。这不会导致firebase库每次加载页面时都加载内容脚本，而是在后台页面初始化时仅加载一次（或者您可以使用非持久性后台脚本通过请求来加载它）。

示例：

manifest.json

{
    "manifest_version": 2,
    "name": "FireBase Demo",
    "description": "FireBase client demo",    
    "version": "0.0.1",
    "permissions": [
        "<all_urls>",
        "tabs"
    ],
     "background": {
       "page": "bg.html",
       "persistent": false
     },
     "content_scripts": [{
        "matches": ["https://*/*","http://*/*"],
        "js": ["cs.js"]
    }],
     "content_security_policy": "script-src 'self' https://www.gstatic.com/firebasejs/5.3.0/firebase.js; object-src 'self'"
}

bg.html

<html>
    <head>
        <script src="https://www.gstatic.com/firebasejs/5.3.0/firebase.js"></script>
        <script src="bg.js"></script>
    </head>
    <body></body>
</html>

bg.js

firebase.initializeApp({
  apiKey: '...',
  authDomain: '...',
  projectId: '...'
});

var db = firebase.firestore();
db.settings({timestampsInSnapshots: true});
  chrome.runtime.onMessage.addListener((msg, sender, response) => {
    if (msg.command == "add"){
      console.log("process msg add", msg, sender, response);
      db.collection(msg.collection).add(msg.data).then((result) => {
        console.log("success", result)
        response({type: "result", status: "success", data: result, request: msg});
      }).catch((result) => {
        console.log("error", result);
        response({type: "result", status: "error", data: result, request: msg}); 
      });
    }
    return true;
  });

cs.js

chrome.runtime.sendMessage({command: "add", collection: "users", data: {name: "user"}}, (msg) => {
  console.log("response", msg)
});

另一种方法是通过将Firebase JS库和需要运行的代码加载到页面的JS沙盒中，使用类似以下方式向页面的DOM注入它：

var script = document.createElement("script");
script.src = "https://www.gstatic.com/firebasejs/5.3.0/firebase.js"
document.body.append(script); // firebase lib will be loaded to the page's JS sandbox and page's DOM
var fn = function injectedFunction(seed) { /* your JS code you want to run is page's sandbox */ }
var ele = document.createElement("script");
ele.textContent = fn+"console.log(injectedFunction());";

但是这种变体非常糟糕，因为页面的内容安全策略可能会阻止您的JS代码在这种情况下运行。 document.body.appendChild(ele);