How to hide Firebase credentials in chrome extension?

I am working on a chrome extension, and using Cloud Firestore. As mentioned in Google’s documentation, I have to put the code in the JavaScript file itself, which is easily visible to anyone who can extract the source code. For security purposes, we can allow access to database only through certain domain names or certain apps. But in the case of Google Chrome extension, it is neither being hosted with a domain name nor it can be registered as an app. So, how do I not let anyone mess around with it ?

And my second question is that I have some if statements inside the chrome extension code which relates credentials from Cloud Firestore and shows result according to it. Like this –

if(userrefdoc.getCoins < 1){
   console.log("Not enough coins. Buy some more");

So, if someone can extract and modify my code, he can easily change the if statements according to his need and gets access to the features, which he is not allowed to use. So, how do I deal with this scenario too ?

Adding the firestore library to the manifest.json

So i’ve been working on a google chrome extension which alters HTML in a list of specific pages. What this means is that I don’t have an HTML file to insert the firebase and firestore library urls into, which should then go into the manifest.json file.

After having downloaded the actual library files and added them to the content_scripts the firestore library seems to be throwing a error which tells me the firestore library file is not UTF-8 encoded. The firebase library itself works perfectly fine but the firestore file won’t.

I’ve tried working around this issue by loading the libraries inside of my background.html and somehow parsing the data I get there to my actual app but this seemed very unpractical. There is also not a lot to be found when specifically looking for a combination between firestore and google chrome extentions.

UTF-8 Encoding the firestore file with the standard mac-os tools didn’t do much for me either, as is suggested by one other issue I found on this matter.

So my question pretty much sums up to: “How do you include the firestore library into a google chrome extension through the manifest.json?”.

Thanks for reading, help would be very much appreciated!

Cloud Firestore not returning data when used inside chrome extension

I’m trying to use firestore inside a chrome extension and I set everything up following some docs I found through google.

In my manifest.json file I added this:

"content_security_policy": "script-src 'self' https://*; object-src 'self'"

And inside a html file where I want to use firestore, I’m including these:

In that same html file, I’m including another js file which has the following code:

var config = {
    apiKey: "xxx",
    authDomain: "xxx",
    databaseURL: "xxx",
    projectId: "xxx",
    storageBucket: "xxx",
    messagingSenderId: "xxx"


firebase.firestore().collection('users').onSnapshot(function(snapshot) {

The problem is that is always an empty array despite some data actually existing. There are no errors or warnings. It just returns an empty array.

Chrome Dev Tools: How to simulate offline for a particular domain than the entire network?

Use case?
Firebase has a new product Firestore, that enables offlinePersistence as per their documentation.

I want to test a situation, where the app loads, but there is no connection made to firebase (think of Progressive Web App with cached static assets by serviceworker), but no network to connect to Firebase.

My code looks like

import React from "react";
import {fdb} from "../mainPage/constants";

// includeDocumentMetadataChanges to know when backend has written the local changes
// includeQueryMetadataChanges to know if changes come from cache using 'fromCache' property
const queryOptions = {
    includeDocumentMetadataChanges: true,
    includeQueryMetadataChanges: true

const collectionName = "todos";
export default class ToDos extends React.Component {
    constructor(props) {
        this.state = {
            items: [],
            textBox: "",
            loading: true

    componentWillMount() {
        let unsubscribe = fdb.collection(collectionName)

            .onSnapshot(queryOptions, function (querySnapshot) {
                let items = [];
                querySnapshot.forEach(function (doc) {
                    //console.log(" data: ", doc &&;
                this.setState({"items": items});
        this.setState({"unsubscribe": unsubscribe});

    componentWillUnmount() {

    handleTextBoxChange = (event) => {

    handleAddItem = () => {
            "title": this.state.textBox
        }).then(function (docRef) {
            //console.log("added " +, docRef.get());

    handleRemoveItem = (item) => {
        console.log("Deleting: ",;
            .then(function () {
                console.log( + " deleted successfully");
                console.log( + " failed to delete: ", reason);

    render() {
        return (
{this.state.items .map((item, index) => )}
) } } const Item = ({item, onDeleteClick}) => { let pendingWrite = item.metadata.hasPendingWrites ? "[PendingWrite]" : "[!PendingWrite]"; let source = item.metadata.fromCache ? "[Cache]" : "[Server]"; return
onDeleteClick(item)}/> {source + " " + pendingWrite + " " +}

Is there a way in Chrome Developers Tool, to simulate/disable calls to a specific domain?