Hi I'm in the process of developing an app and at the moment I'm just running through all the basics and testing different aspects of what Chrome extensions can do. I want to test that I can connect my extension to my own webserver (the aim is to eventually collect data and send it to a database). I followed some instructions on AJAX and put this code into a simple popup extension I made. I however ran into security issues : "Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution." I have read through the instructions that Google have about this but I'm not sure how I should correct my code.
This is what I have in popup.html:
<div id="demo">
<h2>Let AJAX change this text</h2>
<button type="button" id="click-this" ()">Change Content</button>
</div>
And this is what I have in background.js
function loadDoc() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("demo").innerHTML = this.responseText;
}
};
xhttp.open("GET", "my url", true);
xhttp.send();
}
And in popup.js
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("click-this").addEventListener("click", handler);
});
I have my url in the permission section of manifest.json.
As I said I'm new to this so any advice or criticism is welcome!
Thanks :)