Extension - Overlay - Sending Click position

Extensions
1

Hey everyone,

I’m trying to create a simple script to send click positions, then back-end emulate them in a modded game.

Here’s the script thus far, but I can’t seem to get clicks to track.

<!DOCTYPE HTML>
<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
<script>
const xhr = new XMLHttpRequest();
var userId=0;

document.addEventListener("DOMContentLoaded", function(){
	Twitch.ext.onAuthorized(function(auth){
		userId= auth.userId;
	});
});

function sendClick(event) {
	document.body.textContent = "clientX: " + event.clientX + " - clientY: " + event.clientY;
	document.body.innerHTML+="<div class='clickloc' style='z-index:1; position:absolute; top:"+event.clientX+"px; left:"+(event.clientY)+"px'><—</div>"
	var params="name="+userId+"&cmd=!click "+event.clientX+","+event.clientY;
	xhr.open("GET", "*********.com/click.php?"+params);
	xhr.send();
}
//document.addEventListener("click", sendClick);

function test(){
	document.body.innerHTML="DID THIS WORK!?";
}
</script>
<div style='position: fixed;height: 100%;width: 100%;opacity: 0.5;top: 0;left: 0;background-color: blue;' onclick='test();'>Div Test</div>
2

CSP disallows the use of onclick
CSP disallows the use of inline script.
CSP disallows the use of inline styles in native HTML (adding style via JS is fine)

All Code needs to be in a JS file.
And use addEventListener or similar to add click events

3

Thank you!