I keep getting the error "Refused to execute inline event handler because it violates the following Content Security Policy directive

Question

I am making a Chrome extension that needs JavaScript. How can I include JavaScript in my Chrome extension?

This is the popup.Json as it has requested me to do.

 function AddNewPopup() { var popup = document.getElementById("myPopup"); popup.classList.toggle("show"); } And here is the script tool that it keeps blocking.

 <div class="popup" onclick="AddNewPopup()"><button class="addnew"><span class="popuptext" id="myPopup">Test for 0.9</span><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSH-bdYc7hZzKrjl7v1tMC2qEwo7F_3HgFWyQ&usqp=CAU" width="50"></button></div>

Please tell me how to get rid of this security issue and insert my JavaScript.

Answer 1

Having an onclick handler in your html like that (an example of inline javascript) is not allowed in extensions.

To get it to work you'll need to include popup.js from your html and from within popup.js register the onclick hander like so:

<script src="popup.js"></script>

popup.js:

document.getElementById('myPopup').addEventListener("click", AddNewPopup);

You can read more about that error in this article here: https://developer.chrome.com/extensions/contentSecurityPolicy#JSExecution