chrome扩展无法将其与我的firebase数据库链接

时间:2017-04-19 13:51:48

标签: javascript html

如何将google chrome扩展程序与我的 firebase数据库相关联。 我尝试将其连接成一个简单的网页,但它不适用于扩展程序。当我在我的html文件中初始化firebase时,它给出了有关内联代码的错误。错误如下:拒绝加载脚本'cdn.firebase.com/v0/firebase.js';因为它违反了以下内容安全策略指令:“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>

1 个答案:

答案 0 :(得分:1)

确保在Chrome扩展程序的清单文件中添加正确的content-security-policy

您应该将以下内容添加到manifest.json文件中:

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

你可以使用以下内容在你的扩展程序的html中包含firebase.js:

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

请注意,firebasejs的版本可能会发生变化,具体取决于您何时阅读此答案。通过选中here包含最新版本。

此外,您可以在chrome扩展程序here

中找到有关使用firebase的示例