Aujourd'hui je vous propose d'apprendre à créer une extension pour les navigateurs Chrome et Firefox qui aura pour but de signaler à l'utilisateur quand un streamer sera en live ou non sans qu'il ait besoin de se rendre sur Twitch.
Le prérequis
Pour pouvoir utiliser l'API de Twitch vous devez enregistrer votre application (votre extension) sur le site officiel de Twitch à cettre adresse : https://www.twitch.tv/kraken/oauth2/clients/new
Sur ce lien vous aurez à donner un nom à votre application et un lien de redirection (localhost si vous travailler en local). Une fois le formulaire rempli et soumis vous recevrez votre client ID instantanément.
Sauvegarder le bien vous aurez besoin par la suite.
Pour Commencer
Tout d'abord on va configurer notre manifest.json qui est le coeur de notre extension, c'est lui qui contient toutes les informations (nom, description, îcone, ...).
{
"manifest_version": 2, // Indique la version du manifest (toujours 2)
"name": "Extension Twitch", // Le nom de votre extension
"description": "Vous informe si il y a un live", // La description
"version": "1.0", // La version en en l'occurrence la première donc 1.0
// Nous n'avons pas besoin d'avoir de permissions supplémentaires
"browser_action": { // Les paramètres
"default_popup": "index.html" // Le popup qui s'affichera quand vous cliquez sur l'îcone
},
"icons": { // L'îcone qui s'affichera lorse que vous êtes sur la page extensions des paramètre
"64" : "img/icon_64.png" // 64 = 64x64 la taille de votre image
},
"background": { //Chargement des scripts en background de notre navigateur
"scripts": ["background.js"]
}
}Pour réaliser notre système qui vérifie constamment si le live est actif nous allons avoir besoin d'utiliser des scripts JS en background. Cette option permet de spécifier les scripts à lancer en tâche de fond (quelque soit le nombre de fenêtres chrome ouvertes par l'utilisateur).
Créons la popup
Pour rappel la popup est une petite fenêtre qui s'affiche au niveau des îcones des extensions qui contient du code HTML classique.
<style>
h1,p{
text-align:center
}
</style>
<h1>Twitch Extensions</h1>
<p id="info">Le live est actif</p> // Message de base qui sera modifié avec du JSOn assigne ici un id à la balise <p> afin de pouvoir cibler cet élément en JavaScript plus tard.
Création du système en background
Nous allons commencer par réaliser le script background.js. Pour pouvoir accèder à l'API de Twitch nous allons avoir besoin d'effectuer une requête HTTP depuis notre script JS.
Pour cela nous allons utiliser la class XMLHttpRequest présente dans JavaScript.
var xhr = new XMLHttpRequest()
xhr.open("GET", "https://api.twitch.tv/kraken/streams/platiscript?client_id=08922ax6vgljagb8hewjbb8bchbidf", true)
xhr.onreadystatechange = function(channel) {
if(xhr.readyState == 4) {
var data = JSON.parse(xhr.responseText)
var elm = document.getElementById("info")
if(data["stream"] == null){
//Stream Eteint
}else{
//Stream Actif
}
}
xhr.send();La fonction open() de l'objet xhr est le coeur de notre requête, elle demande 3 paramètres.
- La méthode à utiliser pour notre requête, dans cet exemple nous allons utiliser une requête de type GET.
- Le lien de notre requête qui contient le nom du streamer que nous voulons vérifier et aussi le clientID que vous avez noté soigneusement.
- Un booléen qui permet de préciser si cette opération doit être faite de manière synchrone ou asynchrone.
On écoute ensuite la résolution de la requête gràce à la propriété onreadystatechange. L'API de twitch renvoie les informations sous forme de JSON, on utilisera donc la méthode JSON.parse() afin de convertir ces informations en objet JavaScript.
Ensuite n'avons plus qu'à naviguer dans la variable data et sélectionner le tableau stream qui sera null si il n'y a pas de stream en cours.
Créons le système pour la popup
Maintenant que nous avons réalisé le système principale de notre extension nous allons nous en servir pour modifier la popup en fonction de l'état du stream.
var xhr = new XMLHttpRequest()
xhr.open("GET", "https://api.twitch.tv/kraken/streams/platiscript?client_id=08922ax6vgljagb8hewjbb8bchbidf", 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 = "red"
elm.innerHTML = "PlatiScript n'est pas en live actuellement :("
}else{
elm.style.color = "green"
elm.innerHTML = "Viens voir PlatiScript en live maintenant !"
}
}
}
xhr.send()Tout ce code va ce situer dans un fichier nommé app.js qu'on va venir charger dans notre index.html car les scripts éxecuter en background ne peuvent pas agir sur notre popup.
<style>
h1,p{
text-align:center
}
</style>
<h1>Twitch Extensions</h1>
<p id="info">Le live est actif</p> // Message de base qui sera modifié avec du JS
<script src="app.js"></script>Système d'actualisation
Une fois cette modification effectuée, notre extension est fonctionnelle mais au lancement du navigateur seulement. Or nous voulons que cette extension s'actualise de maniètre automatique afin de pouvoir vérifier constamment si le live n'est pas actif. C'est pourquoi nous allons modifier notre script background.js.
var tickRate = 60000 // On vérifiera l'api toutes les minutes
function checkStream() {
var xhr = new XMLHttpRequest()
xhr.open("GET", "https://api.twitch.tv/kraken/streams/LeFresechReream?client_id=08922ax6vgljagb8hewjbb8bchbidf", true)
xhr.onreadystatechange = function () {
if(xhr.readyState == 4) {
var data = JSON.parse(xhr.responseText)
if(data["stream"] === null){
chrome.browserAction.setIcon({path:"img/icon_red.png"})
}else{
chrome.browserAction.setIcon({path:"img/icon_green.png"})
}
// On relance la fonction après X secondes
setTimeout(checkStream, tickRate)
}
}
xhr.send()
}
// On lance la fonction dès le démarrage
checkStream() On peut voir plusieurs modifications, la première est que dans notre condition nous n'avons plus qu'une méthode setIcon() qui va venir changer l'îcone de l'extension. Vous pouvez aller voir la documentation de Chrome pour découvrir l'ensemble des méthodes disponibles https://developer.chrome.com/extensions.
Ensuite nous mettons en place un système qui va vérifier l'API de twitch toutes les minutes en englobant notre logique de vérification dans une fonction qui va s'auto appeler au bout d'un interval définit.
Charger votre extension
Enfin pour charger cette extension dans votre navigateur vous devez activer le mode développeur dans les paramètres de Chrome. Pour cela vous allez dans vos paramètres > plus d'outils > extensions et vous cocher la case mode développeur. Vous devriez alors voir apparaitre trois nouveaux boutons pour charger des extensions. Une fois les tests terminés vous pourrez la publier sur le store Chrome / Firefox.
Conclusion
Dans ce tutoriel nous aurons appris à créer une extension, à utiliser la class XMLHttpRequest pour envoyer des requêtes à l'API de Twitch . Maintenant vous savez créer des extensions pour vos streams ou ceux de vos amis ou autres !
