Firebase Migrating - Simple firebase.set doesn't work anymore - Old vs. New

Question

I'm sure the firebase team and everyone here has a busy day, so I'm trying to keep it short. 2 days ago I had a simple code, which worked:

var rootRef = new Firebase(http://*.firebaseio.com/)

function geturl() {
    chrome.tabs.query({currentWindow: true, active: true}, function (tabs) {
        var tabURL = tabs[0].url;
        rootRef.set({
            title: tabURL
        });
    });
}

Now I am trying it to migrate, so I'm having this:

var config = {
    apiKey: "*-*",
    authDomain: "*-*-*.firebaseapp.com",
    databaseURL: "https://*-*-*.firebaseio.com",
    storageBucket: "*-*-*.appspot.com",
};
firebase.initializeApp(config);
var rootRef = firebase.database().ref();

function geturl() {
    chrome.tabs.query({currentWindow: true, active: true}, function (tabs) {
        var tabURL = tabs[0].url;
        rootRef.set({
            title: tabURL
        });
    });
}

And this doesn't work anymore. SDK is updated as well, I changed the src to the new one (be careful with copy/pasting from the new docs, had a 404 for one of the files). Anyone that has a clue?

------ EDIT

I think it has something to do with the content_security_policy in the manifest.json, according to the 3 year old tutorial it needed to be set to this, in order to use firebase in a chrome extension:

"content_security_policy": "script-src 'self' https://cdn.firebase.com 
https://*.firebaseio.com; object-src 'self'"

Now, does someone has an idea how to modify this in order to work with the new SDK? There are a couple of new URLs now required to establish a connection, I think this has to be modified. The popup console gives me this error:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' https://cdn.firebase.com https://.firebaseio.com https://.firebaseio-demo.com https://www.gstatic.com/". Either the 'unsafe-inline' keyword, a hash ('-='), or a nonce ('nonce-...') is required to enable inline execution.

Out of interest, which page had the 404? We'd love to fix it! — Ian Barber, May 18 '16 at 21:52
@IanBarber One of the quickstarts for Web had the /live/3.0.0/firebase.js which does not exist. Only /live/3.0/... or just /3.0.0/firebase.js exist I believe. Furthermore, the script tags are not ended there (). Glad to help. — ffritz, May 18 '16 at 21:59
@Felix do you know which quickstart? that would help a lot thx :) — Nicolas Garnier, May 18 '16 at 22:12
@IanBarber It's a chrome extension, meaning, getting it to log something is not easy. Maybe you guys could write a (new) Tutorial for firebase + chrome extension. ;) — ffritz, May 19 '16 at 06:17
@FelixF. What exactly do you mean by logging not being easy? Maybe you should take a look at [this](https://stackoverflow.com/questions/36107503/console-log-not-working-when-i-load-my-chrome-extension). — Xan, May 19 '16 at 19:20
@Xan Thanks, I was looking for something like this. However, I have a console.log in my popup.js, which does not get logged in any of the 3 consoles. However I found what I added into the question edit above. — ffritz, May 19 '16 at 19:31
You have [inline scripts](https://developer.chrome.com/extensions/contentSecurityPolicy#JSExecution) and that breaks everything. — Xan, May 19 '16 at 19:33
@Xan I have this in my popup.js, isn't that what the docs say is correct? `document.getElementById('clickme').addEventListener('click', geturl);` — ffritz, May 19 '16 at 19:39
Read the docs carefully. Now read them again. Examine the error, it has a source line reference. — Xan, May 19 '16 at 19:40

score 1 · Answer 1 · answered May 18 '16 at 22:19

If this is a new project, you may be hitting one of the more subtle changes: the Database rules are restricted by default.

On Firebase.com the database used to be world read and writeable, but because there are so many new features on Firebase, projects created in the new console default to requiring auth:

{
  "rules": {
    ".read": "auth != null",
    ".write": "auth != null"
  }
}

You can either add anonymous auth to get going, or just updated the rules to the old defaults.

This change was made due to the expanded scope of Firebase - because there are many features on Firebase, it would be easier for someone to create a project and forget to lock down the Database (if they weren't using it), leading them to having a world writable database.

I activated anonymous auth, but it still doesn't write anything to the databse. I'm going to look into it later. thanks though! — ffritz, May 19 '16 at 07:50
I updated the question, could you have a look? The linked Git is from Andrew Lee, maybe he is still in your team? Thanks anyways :) — ffritz, May 19 '16 at 19:17

score 0 · Accepted Answer · answered Jun 08 '16 at 13:43

As Xan pointed out, I had inline scripts which didn't work. I solved it the following way:

Popoup.html

<html>
<head>
    <script src="https://www.gstatic.com/firebasejs/3.0.4/firebase.js"></script>
    <script src="popup.js"></script>
</head>
   <body> 
    <button id="clickme">click me</button>
</body>
</html>

Popup.js

  var config = {
    apiKey: "*-*",
    authDomain: "*.firebaseapp.com",
    databaseURL: "https://*.firebaseio.com",
    storageBucket: "*.appspot.com",
  };
    firebase.initializeApp(config);
      var rootRef = firebase.database().ref();

 function geturl() {
        chrome.tabs.query({currentWindow: true, active: true}, function (tabs) {

        var tabURL = tabs[0].url;
        rootRef.set({
          title: tabURL
          });

  })

};

document.addEventListener("DOMContentLoaded", function() {
  document.getElementById('clickme').addEventListener('click', geturl);
});

Firebase Migrating - Simple firebase.set doesn't work anymore - Old vs. New

2 Answers2