AJAX/JQuery not coming through

Extensions
1

Hey guys,

I try to build my first extension and so far it is running pretty well.
I’ve tested it on my local machine by using the Twitch Developer Rig.
Sadly by switching to hosted testing it is not working any more.

Everything works great… I get the numeric user id and everything.
BUT: It seems like my AJAX/JQuery does not fire up at all.
I use a hosted PHP-script to export a JSON formatted stream with live results.

It looks like this:

var data_file = "https://www.website.com/json.php";
        var http_request = new XMLHttpRequest();
        try{
           http_request = new XMLHttpRequest();
        }catch (e){
           try{
              http_request = new ActiveXObject("Msxml2.XMLHTTP");		
           }catch (e) {	
              try{
                 http_request = new ActiveXObject("Microsoft.XMLHTTP");
              }catch (e){
                 console.log("Browser broke!");
                 return false;
              }
					
   }
}
http_request.onreadystatechange = function(){
   if (http_request.readyState == 4  ){
  var jsonObj = JSON.parse(http_request.responseText);

and so on...

Maybe it’s obvious but since I’m an absolute starter: What could be the issue here?
Thank you guys!

2

What if any error is returned in your console.

What if any is the error/success code in chrome inspector (or equivalent)

Did you setup CORS headers on your PHP script?

3

Hey Barry,

thanks for your superfast response.

So header on the JSON-php-script are

header("Access-Control-Allow-Origin: *");
header("content-type: application/json");

I use safari (and also used Firefox to check) and the errors are:

  • Unable to post message to https://supervisor.ext-twitch.tv. Recipient has origin https://www.twitch.tv.
  • Refused to execute a script because ‘unsafe-eval’ does not appear in the script-src directive of the Content Security Policy. (which points to: mTimer = setTimeout(‘loadJSON();’,500):wink:

Regarding error-/success-codes:

  • I don’t get any response for the json-php
4

Ignore not relevant to extensions

You have inline scripts or evals which are not allowed by extension policy. All JavaScript must be loaded from a .js file, loaded relatively to the html

This indicates that your code didn’t run in order to make the request.

5

Thanks but as far as I understand it everything runs as an .js file. Everything but the https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js and the external JSON-script.

The javascripts are loaded on the header of the video_overlay.html

the function loadJSON is in one of those .js-files in the package.
Since I’m new to this: What is the meaning of inline scripts and evals. I don’t get that seeing that pointed line.
Thanks for your help!

EDIT:
Maybe I have made a wrong embed, so my header looks like this:

<script src="https://extension-files.twitch.tv/helper/v1/twitch-ext.min.js"></script>
<script src="./src/js/jquery-3.3.1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans|Oswald" rel="stylesheet">
<script src="./src/js/TweenMax.js"></script>
<script src="./src/js/TimelineMax.js"></script>
<script src="./src/js/CSSPlugin.js"></script>
<script src="./viewer.js"></script>
<script src="./src/js/mainscript.js"></script>

The JSON happens on the mainscript.js
I’ve build in a console output which fires (early in the code) so the script seems to be embedded ok.

6

Without the source I’m not sure where the issue lies at this point

7

Eval is strictly prohibited in Extensions. By passing a string to setTimeout you’re causing it to have to eval the string you’ve passed it.

Try just passing it the function rather than a string.

8

Eval is strictly prohibited in Extensions. By passing a string to setTimeout you’re causing it to have to eval the string you’ve passed it.

Try just passing it the function rather than a string.

Nice try, but the error is still the same with just “setTimeout(‘loadJSON();’,500);”

[Error] Refused to execute a script because 'unsafe-eval' does not appear in the script-src directive of the Content Security Policy.

9

Should be

setTimeout(() => { loadJSON(); }, 500);

The issue is the ' around loadJSON()

(Initially I was going with copy/paste fail to the formatting of the code sample/error. Hence asking for source to confirm

10

YOU DID IT!
It works! Thank you guys!
For your time and patience.
I’m afraid this wasn’t the last time I’ll need help though :wink:
Have a great day!

11

Argh, just an additional question regarding working around inline javascript:

What would be the correct solution to correct this rejected inline js:
<a href=# onclick="dothis(1)"><div id=field style='position: absolute; left: -100%; bottom: 120px; vertical-align: middle; text-align: center; display: inline-block; width: 40%; height: 30px; padding: 5px; background-color: #4ab73c; border-radius: 5px;'>Text</div></a>

Error: [Error] Refused to execute a script for an inline event handler because ‘unsafe-inline’ does not appear in the script-src directive of the Content Security Policy. (video_overlay.html, line 73)

the function dothis() does this:

function dothis(number){
    		var xhttp = new XMLHttpRequest();
    		xhttp.onreadystatechange = function() {
      		if (this.readyState == 4 && this.status == 200) {
      		}
    		};
    		xhttp.open("POST", "https://www.website.com/post.php", true);
    		xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    		xhttp.send("number="+number);
    		
document.getElementById("field").style.backgroundColor = "#000000";
    		
stop_animating();
    		}
12

The CSS needs to be moved to a stylesheet

And the anchor will need and ID applied to it and an event listener attached to it.

As inline CSS and inline javascript is now allowed.

13

Thanks again! You rock!
Again: Have a great day!