chrome extension cannot link it with my firebase database

Question

how to link google chrome extension with my firebase database. I have tried connecting it like a simple web page but its not working with the extension. It gives the error about inline code when i initialize firebase in my html file. The error is following: Refused to load the script 'cdn.firebase.com/v0/firebase.js'; because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:"

 // Initialize Firebase
  Firebase.enableLogging(true);
  var ref = new Firebase("https://test-7c659.firebaseio.com")
  var config = {
    apiKey: "AIzaSyBxmZNZ0FyHavvPQ7Q7fQAn2875qmdXtH0",
    authDomain: "test-7c659.firebaseapp.com",
    databaseURL: "https://test-7c659.firebaseio.com",
    projectId: "test-7c659",
    storageBucket: "test-7c659.appspot.com",
    messagingSenderId: "578149428062"
  };
  firebase.initializeApp(config);

<!doctype html>
<!--
 This page is shown when the extension button is clicked, because the
 "browser_action" field in manifest.json contains the "default_popup" key with
 value "popup.html".
 -->
<html>
  <head> 
   
   <script src="canvasjs.min.js"></script>
   <script src="popup.js"></script>
   <link rel="stylesheet" type="text/css" href="bootstrap.css">

    <title>Neurostic</title>
    <style>
      body {

           margin: 20px 20px 8px 20px;
           width: 400px;
           direction: ltr;
           height: 400px;

      }
    
    </style>
  </head>
  <body>      
 
    <h4 id = "object" onclick="fire();">Health Care</h4>
    <div id="chartContainer" style="height: 300px; width: 100%;" ></div>
    <script type="text/javascript" src="https://cdn.firebase.com/v0/firebase.js"></script>
    <script type="text/javascript" src=add_firebase()></script>
  </body>
</html>

"It gives the error about inline code" what error? Update your question with a minimal reproducible example. — evolutionxbox
Refused to load the script 'cdn.firebase.com/v0/firebase.js' because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:" — Musab Akram
Can you put that in your question? As that error is quite important. — evolutionxbox

arao arao · Accepted Answer · 2017-05-28T18:40:58

Make sure you are adding the correct content-security-policy in your chrome extension's manifest file.

You should add the following to your manifest.json file:

"content_security_policy":"script-src 'self' https://www.gstatic.com/ https://*.firebaseio.com https://www.googleapis.com; object-src 'self'"

And you can include firebase.js in your extension's html using this:

<script src="https://www.gstatic.com/firebasejs/4.0.0/firebase.js"></script>

Note the version of firebasejs might change depending on when you read this answer. Include the latest version by checking here.

Additionally, you can find an example on using firebase in a chrome extension here

chrome extension cannot link it with my firebase database

1 Answers