Felix F. Felix F. - 5 months ago 35
Javascript Question

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

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.

Answer

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);
});
Comments