Twitch number online streamers in Chrome Plugin

Hi,
I want to create plugin in Chrome. I do almost all what I wanted, except online number of streamers in Chrome plugin icon.

I put text “Check”

but I would like to see in this place online number of streamers, or if someone from streamers are online, then will be text “On”.

Can someone help me?

To put text in that place is code:
In .js copy line:

chrome.browserAction.setBadgeText({text: ‘Check’});

Best,
Ivelios

If you had a specific list of channels to check, you could make a GET request to this endpoint with a comma-separated list of channels to check if they’re online or not. Reference.

https://api.twitch.tv/kraken/streams/?channel=a,b,c


Make a GET request to this endpoint to get the general summary of channels on Twitch. You can specify a game in the query string to limit to just that. Reference.

https://api.twitch.tv/kraken/streams/summary

https://api.twitch.tv/kraken/streams/summary?game=Counter-Strike:%20Global%20Offensive

var stream = [“ivelios_christopher”, “esl_sc2”];
var cb = ‘?client_id=API-key&callback=?’;
var url = ‘https://api.twitch.tv/kraken/’;

	$.getJSON(url + 'streams/?channel=' + stream + cb).success(function(data) {
  var streaming = (data.stream === null) ? false : true;
  if (streaming) {
    chrome.browserAction.setBadgeText({text: 'On'});
  } else {
    
  }

});

Thanks for tips, I have done somethink like this, but from some reason not working. Any tips for this?

Best,
Ivelios

jQuery will automatically handle the callback. Just make sure that “API-key” is your client ID. You’re also adding an extra “?” in the query string will not work correctly.

This is the faulty URL that you are creating:

https://api.twitch.tv/kraken/streams/?channel=ivelios_christopher,esl_sc2?client_id=API-key&callback=?


When you’re using the multiple channel endpoint, you cannot use the data.stream === null trick. That’s just for one channel using the stream/<channel> endpoint. Reference.

You may be better served with code like this:

var clientID = 'client ID string';

var channelList = [ 'ivelios_christopher', 'esl_sc2' ];
var baseKraken = 'https://api.twitch.tv/kraken/';
var endpoint = 'streams';

$.getJSON(
		baseKraken + endpoint
		{
			client_id: clientID,
			api_version: 'v5',
			channel: channelList
		}
	)
.done(function(data) {
		if(data._total > 0) {
			chrome.browserAction.setBadgeText({text: 'On'});
		}
	});

Or as a simple function:

var clientID = 'client ID string';
var baseKraken = 'https://api.twitch.tv/kraken/';

function getKrakenAPI(endpoint, data, method) {
	return $.ajax({
			url: baseKraken + endpoint,
			method: method,
			data: data,
			dataType: 'json',
			headers: {
				'Client-ID': clientID,
				Accept: 'application/vnd.twitchtv.v5+json'
			}
		});
}

getKrakenAPI(
		'streams',
		{
			channel: [ 'ivelios_christopher', 'esl_sc2' ]
		}
	)
.done(function(data) {
		if(data._total > 0) {
			chrome.browserAction.setBadgeText({ text: 'On' });
		}
	});

jQuery.ajax reference

Hi,
I used 2nd code.

I have error:

Uncaught TypeError: getKrakenAPI(...).success is not a function
at popup.js:23

Any tips?

.success replaced with .done as of jQuery 3.0

Hi,
thanks for tip, now are without errors. But “On” in BadgeText still miss :[

chrome.browserAction.setBadgeText( { text: “$stats” } );

var clientID = ‘app-ID-key’;
var baseKraken = ‘https://api.twitch.tv/kraken/’;

function getKrakenAPI(endpoint, data, method) {
return $.ajax({
url: baseKraken + endpoint,
method: method,
data: data,
dataType: ‘json’,
headers: {
‘Client-ID’: clientID,
Accept: ‘application/vnd.twitchtv.v5+json’
}
});
}

getKrakenAPI(
‘streams’,
{
channel: [ ‘ivelios_christopher’, ‘esl_sc2’ ]
}
)
.done(function(data) {
if(data._total > 0) {

$stats = write: “On”;

  }

});

Maybe in somethink like this will be working? But I dont know how do it in .js Maybe BadgeText cant be in “If” function.

Best,
Ivelios

I haven’t used jQuery in a long time then xD – Thanks, updated.

No, there’s no limitation of a surrounding closure type or anything like that in Javascript.

As far as I can tell this code should do the trick.

/*...*/
.done(function(data) {
		if(data._total > 0) {
			chrome.browserAction.setBadgeText({ text: 'On' });
		}
	});

But the issue may be that it needs to be run in the background.js instead of popup.js assuming that popup.js isn’t the background script and you have a background.js.

I do not wish to demean, but I don’t use jQuery. I’m just reading the documentation. This boils down to a Read The Fine Manual case.

http://api.jquery.com/jQuery.ajax/#jqXHR

jqXHR.done(function( data, textStatus, jqXHR ) {});
An alternative construct to the success callback option, refer to deferred.done() for implementation details.

Then a bit further down.

If json is specified, the response is parsed using jQuery.parseJSON before being passed, as an object, to the success handler. The parsed JSON object is made available through the responseJSON property of the jqXHR object.

This says you should be looking at the 3rd parameter’s respinseJSON member, not the first parameter’s members.

It’s available in both places. It does not say that it is only available through the third argument.

By passing the dataType argument as “json”, I am telling it to parse it as JSON automatically and pass that instead of the original string.

Hi,
I change name from popup.js to background.js. Effect the same, and no errors in consol :[

When I put code like this:

var clientID = 'API-key';
var baseKraken = 'https://api.twitch.tv/kraken/';

function getKrakenAPI(endpoint, data, method) {
	return $.ajax({
			url: baseKraken + endpoint,
			method: method,
			data: data,
			dataType: 'json',
			headers: {
				'Client-ID': clientID,
				Accept: 'application/vnd.twitchtv.v5+json'
			}
		});
}

getKrakenAPI(
		'streams',
		{
			channel: [ 'ivelios_christopher', 'esl_sc2' ]
		}
	)
.done(function(data) {
		if(data._total > 0) {

    

		}
	});

chrome.browserAction.setBadgeText( { text: "On" } );

The text “On” display normal. I don`t get it. In “If” not working, but solo without “If” in, working normal :[

Best,
Ivelios

The background.js has a separate “background page” console. You also need to declare it as the background page in the manifest (reference). Go to chrome://extensions/ and enable “Developer mode” then you will see “Inspect views” under your extension. Find and click “background page” and a separate console will appear. You will probably get Uncaught ReferenceError: $ is not defined because you’re not loading jQuery in the background so make sure to include a copy of jQuery with your extension and declare it in the manifest. I suggest this StackOverflow answer.

The only way to access the resulting data is within the done callback. Inside of the if statement or not will not matter. You can have an else statement and display "Off" instead.

.done(function(data) {
		if(data._total > 0) {
			chrome.browserAction.setBadgeText( { text: "On" } );
		}
		else {
			chrome.browserAction.setBadgeText( { text: "Off" } );
		}
	});
.fail(function(jqXHR, textStatus, errorThrown) {
		chrome.browserAction.setBadgeText( { text: "Err" } );
		console.log('Ajax error', { jqXHR, textStatus, errorThrown });
	});

Hi,
I add .done and .fail, but with .fail was error in script. So I only add .done. I check on consol, no errors.

manifest.json

{
“name”: “My Bookmarks”,
“version”: “1.1”,
“description”: “A browser action with a popup dump of all bookmarks, including search, add, edit and delete.”,
“permissions”: [
“bookmarks”,
://.twitch.tv/*”
],
“browser_action”: {
“default_title”: “My Bookmarks”,
“default_icon”: “icon.png”,
“default_popup”: “background.html”
},
“manifest_version”: 2,
“content_scripts”: [
{
“js”: [“jquery-3.2.1.min.js”, “background.js”]
}
],
“content_security_policy”: “script-src ‘self’ https://ajax.googleapis.com; object-src ‘self’”
}

When I create like this base on Chrome api

{
“name”: “My Bookmarks”,
“version”: “1.1”,
“description”: “A browser action with a popup dump of all bookmarks, including search, add, edit and delete.”,
“permissions”: [
“bookmarks”,
://.twitch.tv/*”
],
“browser_action”: {
“default_title”: “My Bookmarks”,
“default_icon”: “icon.png”,
“default_popup”: “background.html”
},
“manifest_version”: 2,
"background": [
{
"scripts": [“jquery-3.2.1.min.js”, “background.js”]
}
],
“content_security_policy”: “script-src ‘self’ https://ajax.googleapis.com; object-src ‘self’”
}

Effect is the same as above.

background.js

var clientID = ‘key-API’;
var baseKraken = ‘https://api.twitch.tv/kraken/’;

function getKrakenAPI(endpoint, data, method) {
return $.ajax({
url: baseKraken + endpoint,
method: method,
data: data,
dataType: ‘json’,
headers: {
‘Client-ID’: clientID,
Accept: ‘application/vnd.twitchtv.v5+json’
}
});
}

getKrakenAPI(
‘streams’,
{
channel: [ ‘ivelios_christopher’, ‘esl_sc2’]
}
)
.done(function(data) {
if(data._total > 0) {
chrome.browserAction.setBadgeText( { text: “On” } );
}
else {
chrome.browserAction.setBadgeText( { text: “Off” } );
}
});

Effect is, that “On” not display, but “Off” display when you click on icon in browser even if some streamers are online.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.