Chrome Extension for Twittch API give me an error about Content security policy

Question

I'm doing a chrome extension for my viewers to know when i'm on stream or not, so i've done it but it returns an error

First i've tried to do it with JQuery XMLHttpRequest, but I found out that the JSONP was better for those extensions, so I done it with JSONP requests like this

checkStream();

setInterval(function(){
  checkStream();
}, 5000);

function checkStream() {
  $.ajax({
    url: 'https://api.twitch.tv/kraken/streams/cew_kuhaku?client_id=myclientid',
    jsonp: "callback",
    dataType: "jsonp",
    data: {},
    // Work with the response
    success: function( response ) {
        console.log( response ); // server response

              $("#json").html(response)
              if(response["stream"] == null){
                $("#info").html("Kuhaku n'est pas en stream");
                      chrome.browserAction.setIcon({path: "img/off.png"});
              }else {
                $("#info").html("Kuhaku est en stream")
                      chrome.browserAction.setIcon({path: "img/on.png"});
              }
    }
  });
}

My manifest looks like this :

{
  "manifest_version":2,
  "name":"CEW Kuhaku Streaming",
  "version":"1.0",
  "description":"Extension de stream de CEW Kuhaku",
  "browser_action": {
    "default_popup":"index.html"
  },
  "icons":{
    "64" : "img/on.png"
  },
  "background": {
    "scripts": ["jquery.js", "background.js"]
  }
}

Here is my index.html

<h1>Stream CEW Kuhaku</h1>
<p id="info">Kuhaku est en live</p>
<p id="json"></p>
<script src="jquery.js"></script>
<script src="app.js"></script>

I expect to verify my stream status but i got this :

Refused to load the script because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

Just as a side-note: This probably won't work for your users, since the rate limit of Twitch (without bearer token) is 30 calls per minute, **per client-ID** (the client-ID of **your** application in this case). — Codekie, Jul 10 '19 at 11:53
i've updated it to 1 request/min, for now it's a small comunity — Corentin CEW Khaku Mace, Jul 10 '19 at 11:59
While it's not explicitly stated what happens if the rate limit is violated on a regular base and over extended amount of time (which would happen, once you exceed 30 people having this extension installed and them having the browser open), I can imagine that they might suspend the account. I hope that you're using a different account than your streaming account, for this. — Codekie, Jul 10 '19 at 12:06

score 0 · Answer 1 · answered Jul 10 '19 at 11:42

0

you need to add content security policy configuration to your manifest.json

 "content_security_policy": "script-src 'self' https://example.com; object-src 'self'"

answered Jul 10 '19 at 11:42

Jay Lane

1,379
15
28

did you just copy and paste what i added or did you update the example.com references? – Jay Lane Jul 10 '19 at 11:46
I copied and paste it, and i tried by puting localhost instead – Corentin CEW Khaku Mace Jul 10 '19 at 11:51
I've added my index.html to my original post – Corentin CEW Khaku Mace Jul 10 '19 at 11:53
is there an external js script being loaded anywhere? dont see why youd be getting that error with the 2 local js scripts in your index.html – Jay Lane Jul 10 '19 at 11:57
I only load the 2 local scripts – Corentin CEW Khaku Mace Jul 10 '19 at 11:58
might have to do with the twitch api callback remove the CSP changes to manifest as try adding “permissions”:[“https://api.twitch.tv”] to the manifest – Jay Lane Jul 10 '19 at 12:14
same problem, what could I put instead of the exemple.com ? – Corentin CEW Khaku Mace Jul 10 '19 at 12:32

Chrome Extension for Twittch API give me an error about Content security policy

1 Answers1