Menu
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>
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.
772
Log in to the Firebase console, then click Add project. Select your existing Google Cloud project from the dropdown menu, then click Continue. (Optional) Enable Google Analytics for your project, then follow the prompts to select or create a Google Analytics account. Click Add Firebase.
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.
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).
Example:
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)
});
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());";
But this variant is very bad, because page's CSP may block your JS in this case. document.body.appendChild(ele);
85
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
