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.

Have you added the content security policy { "content_security_policy": "script-src 'self' https://cdn.firebase.com https://*.firebaseio.com; object-src 'self'" } in your manifest? — Dayton Wang
I did try that and just tried again to be sure, doesn't help, think that setting only applies to chrome extensions, not chrome apps. — whitey
Ok I see. I think you need to download the script and put it into the Chrome App folder instead of loading the script directly from the web. — Dayton Wang
It is the firebase.js script which I do have local that is attempting to download other scripts that is causing the problem it seems. — whitey
You may need to go the sandbox route. (That ExtJS is just an example tutorial) — Xan

normalUser normalUser · Accepted Answer · 2017-02-10T06:44:39

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();

Error using Firebase from Chrome App

2 Answers