Twitch number online streamers in Chrome Plugin

Ivelios_Christopher · June 17, 2017, 2:26pm

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

Alca · June 17, 2017, 7:10pm

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

Ivelios_Christopher · June 17, 2017, 7:57pm

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

Alca · June 17, 2017, 9:31pm

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

Ivelios_Christopher · June 18, 2017, 10:20am

Hi,
I used 2nd code.

I have error:

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

Any tips?

broadstone · June 18, 2017, 2:35pm

.success replaced with .done as of jQuery 3.0

Ivelios_Christopher · June 18, 2017, 4:32pm

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

Alca · June 18, 2017, 9:07pm

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

Alca · June 18, 2017, 9:15pm

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.

broadstone · June 19, 2017, 1:55am

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.

Alca · June 19, 2017, 4:32am

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.

Ivelios_Christopher · June 19, 2017, 4:38pm

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

Alca · June 20, 2017, 2:01am

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 });
	});

Ivelios_Christopher · June 20, 2017, 5:17pm

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.

system · July 20, 2017, 5:29pm

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