Error using Firebase from Chrome App

Question

I am attempting to use Firebase from within a Chrome App (not an extension) and have not been able to work around the following error:

Refused to load the script 'https://{my firebase id}.firebaseio.com/.lp?start=t&ser=81980096&cb=15&v=5' because it violates the following Content Security Policy directive: "default-src 'self' chrome-extension-resource:". Note that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

my manifest.json file looks like this:

{
  "manifest_version": 2,
  "name": "Simple Demo",
  "version": "1",
  "icons": {
    "128": "icon_128.png"
  },

  "permissions": ["https://*.firebaseio.com/"],
  "app": {
    "background": {
      "scripts": ["background.js"]
    }
  },
  "minimum_chrome_version": "28"
}

I have the firebase.js script local to the chrome app, the issue seems to be that it tries to load other scripts which isn't permitted.

Any ideas are appreciated.

Answer 1

Well, You can use firebase REST API Approach, in this case, I've used for my chrome app and its working fine. This don't require to have firebase SDK to be added!

Read the following docs, https://firebase.googleblog.com/2014/03/announcing-streaming-for-firebase-rest.html

https://firebase.google.com/docs/reference/rest/database/

https://firebase.google.com/docs/database/rest/retrieve-data

Approach is very simple

Protocol is known as SSE (Server Sent Events) where you listen to specific server URL and when something changes, you get the event callback.

In this case, firebase officially provides SSE based mechanism

A sample code snippet is,

 //firebaseUrl will be like https://xxxxx.firebaseio.com/yourNode.json or https://xxxxx.firebaseio.com/yourNode/.json
 //notice ".json" at the end of URL, whatever node you want to listen, add .json as suffix
    var firebaseEventSS = new EventSource(firebaseUrl);
    //and you will have callbacks where you get the data
    firebaseEventSS.addEventListener("patch", function (e) {
                var data = e.data;
            }, false);
    firebaseEventSS.addEventListener("put", function (e) {
                var data = e.data;
            }, false);

Just check few EventSource examples and combine with Firebase Doc for REST API and you are all set!

Don't forget to close() when it's done.

firebaseEventSS.close();

Answer 2

This is an old question, but the solution offered by the Firebase team is to use a different URL protocol for the database.

So instead of using https://<app>.firebaseio.com/ you'd use wss://<app>.firebaseio.com/.

I found the solution here. Here is an answer provided by the Firebase team on this subject.