如何在Chrome扩展程序中使用Firebase数据库 [英] How to use firebase database in chrome extension
问题描述
我想将其用作内容脚本的一部分，以便可以从Firebase数据库中获取数据.但是，我不知道如何引用Firebase文档中给出的脚本:
I want to use it as part of my content script so that I can fetch data from my firebase database. However, I don't know how I can reference the script that's given in the firebase docs:
<script src="https://www.gstatic.com/firebasejs/5.3.0/firebase.js"></script>
我知道，如果我在弹出的html页面中全部完成操作，那么我可以加载script标签，但是在内容脚本中，除了内容页面之外没有html页面，因此我不确定甚至有可能.
I know that if I was doing it all in the pop up html page, then I could load the script tag, but in the content script, there's no html page other than the content page, so I'm not sure if this is even possible.
推荐答案
ContentScript在页面的DOM上运行，但是在不同的JS沙箱上运行，因此您不能直接通过DOM注入JS，如示例所示.
ContentScript runs on page's DOM, but on different JS sandbox, so you can't directly inject JS via DOM as it is shown in the example.
我建议您将firebase lib加载到后台页面，然后可以从后台脚本访问它，并可以通过后台后端从内容脚本访问代理请求.不会在每次加载页面时加载内容脚本时加载firebase lib，也不会在后台页面init中加载一次(或者您可以使用非持久性后台脚本通过请求来加载它).
I would recommend you to load firebase lib to the background page and then you can access it from your background script and proxy requests from your Content Script via background backend. This will not cause firebase lib loaded every time you load page loads content scripts and it will be load once on background page init (or you can load it by request using non-persistent background script).
示例:
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库和页面中的DOM注入到页面的DOM中来加载您的Firebase JS库和您需要运行的代码.
Another variant is to load your firebase JS lib and the code you need to run to the page's JS sandbox by injecting it to the page's DOM with something like:
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());";
但是此变体非常糟糕，因为在这种情况下页面的CSP可能会阻塞您的JS.document.body.appendChild(ele);
But this variant is very bad, because page's CSP may block your JS in this case. document.body.appendChild(ele);
这篇关于如何在Chrome扩展程序中使用Firebase数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
