I am trying to create a basic chrome extension to sign in with google using Firebase but I keep getting this error:
Refused to load the script 'https://apis.google.com/js/api.js?onload=__iframefcb441380' because it violates the following Content Security Policy directive: "script-src 'self' https://www.gstatic.com/firebasejs/3.7.3/firebase.js".
Here is my popup.html (you can ignore everything under the sign in and log out buttons):
<html>
<head>
<script src="https://www.gstatic.com/firebasejs/3.7.3/firebase.js"></script>
</head>
<body>
<div id="banner">
<div id="banner-content">
Frogger
</div>
<div id="banner-button">
<button id="gSign">Google Signin</button>
<button id="gOut">Google Signout</button>
</div>
</div>
<div class="container" style="display: none;">
<input id="txtEmail" type="email" placeholder="Email">
<input id="txtPassword" type="password" placeholder="Password">
<button id="btnLogin" class="btn btn-action">
Log In
</button>
<button id="btnSignUp" class="btn btn-secondary">
Sign Up
</button>
<button id="btnLogOut" class="btn btn-action hide">
Log Out
</button>
</div>
<script src="app.js"></script>
</body>
</html>
here is my app.js:
(function(){
// Initialize Firebase
var config = {
apiKey: "My key is here",
authDomain: "my domain is here",
databaseURL: "I have all this filled out properely",
storageBucket: "bucket",
messagingSenderId: "senderId"
};
firebase.initializeApp(config);
function googleSignin() {
firebase.auth()
.signInWithPopup(provider).then(function(result) {
var token = result.credential.accessToken;
var user = result.user;
console.log(token)
console.log(user)
}).catch(function(error) {
var errorCode = error.code;
var errorMessage = error.message;
console.log(error.code)
console.log(error.message)
});
}
function googleSignout() {
firebase.auth().signOut()
.then(function() {
console.log('Signout Succesfull')
}, function(error) {
console.log('Signout Failed')
});
}
document.getElementById("gSign").addEventListener("click", e=>{
firebase.auth()
.signInWithPopup(provider).then(function(result) {
var token = result.credential.accessToken;
var user = result.user;
console.log(token)
console.log(user)
}).catch(function(error) {
var errorCode = error.code;
var errorMessage = error.message;
console.log(error.code)
console.log(error.message)
});
});
}())
and finally here is my manifest.json (where I think I'm doing something wrong):
{
"manifest_version": 2,
"name": "Getting started example",
"description": "This extension shows a Google Image search result for the current page",
"version": "1.0",
"content_security_policy": "script-src 'self' https://www.gstatic.com/firebasejs/3.7.3/firebase.js; object-src 'self'",
"browser_action": {
"default_popup": "popup.html"
},
"permissions": [
"activeTab",
"https://www.gstatic.com/firebasejs/3.7.3/firebase.js"
]
}
NOTE: Please try to answer this with what I can do specifically to stop this error from occurring. I have looked at tons of different posts and websites but they weren't specific enough, all they gave were links to read.
EDIT:
I figured out how to whitelist links, but as i continue to whitelist, more and more links keep coming up saying that they violate the CSP. So my question is; is there a way to know all of the links I need to whitelist? How can I do this? Thanks.
