Web extension problem with kraken v3 to v5

API Migration
1

Hello, i coding a web extension for chrome and firefox for twitch streamer and I’ve got a issue this morning, I understand its the kraken v3 api shutdown which is the problem.
Can someone help me for migrate to v5, im don’t good at JS

the app :

var streamerName = "Gregggg"; /*your name*/
var streamerURL = "gregggg_"; /*your twitch channel name !important*/
var xhr = new XMLHttpRequest()
xhr.open("GET", "https://id.twitch.tv/streams/" + streamerURL + "?client_id=68jskcduf24nyrvd1px4sp8ju3ucrc", true)
xhr.onreadystatechange = function(channel) {
if(xhr.readyState == 4) {
var data = JSON.parse(xhr.responseText)
var elm  = document.getElementById("info")
if(data["stream"] === null){
  elm.style.color = "#ccc"; /*<-- color for offline text */
  elm.innerHTML = "Offline"; /* <-- offline text here*/
}else{
  elm.style.color = "#fff"; /*<-- color for online text */
  elm.innerHTML = streamerName + " " + "is now live !"; /*<-- text online here*/
}
}
}
xhr.send()

the background script :

var tickRate = 30000 
var streamerName = "Gregggg"; /*your name*/
var streamerURL = "gregggg_"; /*your twitch channel name !important*/
function checkStream() {
var xhr = new XMLHttpRequest()
xhr.open("GET", "https://id.twitch.tv/streams/" + streamerURL + "?client_id=68jskcduf24nyrvd1px4sp8ju3ucrc", true)
xhr.onreadystatechange = function (channel) {
if(xhr.readyState == 4) {
  var data = JSON.parse(xhr.responseText)
  if(data["stream"] === null){
    chrome.browserAction.setIcon({path: "icons/icon-offline.png"});/* <-- name your icon offline here , path */
    chrome.browserAction.setTitle({title: streamerName + " - Live off"}); /* <-- mini-popup on mousehover icon */
  }else{
    chrome.browserAction.setIcon({path: "icons/icon-online.png"})/* <-- name your icon online here , path */
    chrome.browserAction.setTitle({title: streamerName + " - Live on"}); /* <-- mini-popup on mousehover icon */
  }
  setTimeout(checkStream, tickRate)
}
}
xhr.send()
}
checkStream()

sorry for my bad english :slight_smile:

2

Here is the migration guide:

https://dev.twitch.tv/docs/v5/guides/migration/

You need to send a v5 header

Accept: application/vnd.twitchtv.v5+json

And use BroadcasterID/userIDs instead of their name

https://dev.twitch.tv/docs/v5/guides/migration/#username-versus-user-id

1 Like
3

Can you say me what code i put in to it, i don’t understand http-request and other

4

Didn’t you write this in the first place?

This needs to be the UserID for Gregggg instead

header setting is covered by

So

var xhr = new XMLHttpRequest()
xhr.setRequestHeader('Accept', 'application/vnd.twitchtv.v5+json');

For example (untested) should work

1 Like
6

No idea what the issue is there. Since the header you added is the same as the header below it. And it matches what it’s the docs for XMLHttpRequest.

Remove the image as it leaks an oAuth which is a secret and secrets should not be publically reveeled.

1 Like
7

I begin to understand, thank you for helping me, I think I can solve the problem now (ok my bad)

8

until this morning i haven’t got some issue and now i’v got this thing :

Access to XMLHttpRequest at 'https://id.twitch.tv/streams/gregggg_?client_id=***' from origin 'chrome-extension://***' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

why ?

9

This URL is incorrect.

I missed this in your initial post

1 Like
10

Oh i don’t view this, i modifi it, now it works, chrome don’t reset all of the code, its stupid but now it works, thanks again :grin: