0

I'm working on building my first Google Chrome extension but have run into a problem.

I simply want the extension to make a popup window when an icon is clicked. This window will itself display a canvas thats color will change, to green, when a button is clicked.

I've tested my code on websites such as Codepen and it works fine but not when I actually run it in Chrome.

All of my extension's files are in the same folder.

Here is my HTML: 

<!doctype html>
<html>
<head> <script src="popup.js"> </script> </head>
<canvas id="canvs" style="border: 2px solid black"></canvas>
    <input type = "button" value = "color" onclick="colorChange()">
</html>

JavaScript (popup.js): 

function colorChange(){
    var can = document.getElementById("canvs");
    can.style.backgroundColor = "green";
}

Any help would be appreciated, thanks!

Fraser
  • 12,565
  • 6
  • 46
  • 97
Anthony Graves
  • 11
  • 4
  • No messages on the console? – Denis Cappelini Aug 20 '17 at 01:54
  • Try adding some debugging information - for example make the function `function colorChange(event) { var can = document.getElementById("canvs"); can.style.backgroundColor = "green"; console.log('colorChange', event, can); }` what does the console output when you click the button? – Fraser Aug 20 '17 at 02:08
  • Thanks, I didn't know about the console. The error message I get it is "popup.html:19 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." – where line 19 is – Anthony Graves Aug 20 '17 at 02:27
  • Additional duplicate: [onClick within Chrome Extension not working](https://stackoverflow.com/a/25721457) – Makyen Aug 20 '17 at 04:24

1 Answers1

0

Chrome Extension Does not support inline javaScript

You should be 

<input id="color" type = "button" value = "color" >


$("#color").click(function(){
 // your code
});

// popup.js
window.onload= function(){
 var color = document.getElementById("color");
 color.onclick = function(){
  // your code
 }
}
haisen
  • 81
  • 1
  • 7