时间戳

首页 > 解决方案 > 我正在尝试创建一个 twitch chrome 扩展，但我的代码是用于旧的 twitch api

javascript - 我正在尝试创建一个 twitch chrome 扩展，但我的代码是用于旧的 twitch api

问题描述

我需要帮助，感谢这个网站，我创建了一个 chrome 扩展：https ://www.grafikart.fr/tutoriels/extension-chrome-firefox-twitch-900 唯一的问题是它适用于旧的 twitch api，我不不知道如何使用新的所以有我的 main.js ：

setInterval(function(){
    checkstream()

}, 5000)
function checkstream() {
    var xhr = new XMLHttpRequest()
    xhr.open("GET", "https://api.twitch.tv/kraken/streams/kalevis_?client_id=000000000000000000000000000000", true)
    xhr.onreadystatechange = function() {
      if(xhr.readyState == 4) {
        var data = JSON.parse(xhr.responseText)
        if(data["stream"] == null){
                $("#activity").html("Kalevis_ ne stream pas ")
            }else{
                $("#activity").html("Kalevis_ est en train de stream")
                var notif = new Notification('kalevis_',{
                    'icon' : 'img/icon.png',
                    'body' : 'kalevis_ est en live'
                })
            }
        }else{
            $("#activity").html("Error")
        }
       };
       xhr.send();

}

和我的 html 页面：

    <head>
        <style>
            body {
                background-image:url(https://forums-images.oneplus.net/attachments/547/547028-7aac0a57f8e75169e7c3ca3500d7987e.jpg);
            }
            h4 {
                color: blanchedalmond;
            }
            .img {
                border: 5px solid white !important;
                box-shadow: 0 5px 24px 0 rgba(0,0,0,0.2), 0 5px 20px 0 rgba(0,0,0,0.22) !important;
                border-radius:5rem
            }
            .btn {
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                border-radius: 3px;
            }
            h4 {
                font-family: 'Karla', sans-serif !important;
            }



        </style>
    </head>
    <body>

        <center>
            <h4 style="font-size: 3em !important;margin-bottom:0px;padding-left:30px;padding-right: 30px;">kalevis_</h4>
            <img class="img" src="img/icon.png" width="70px" height="70px" alt="">
            <h4 id="activity">Kalevis_</h4>
            <p id="debug"></p>
            <button class="btn btn-primary" id="twitch">twitch</button>
            <button class="btn btn-primary" id="discord">discord</button>
        </center>
        <script src="js/jquery.js"></script>
        <script src="js/click.js"></script>
        <script src="js/main.js"></script>
    </body>

问题是它与新的 twitch api 不兼容所以它不显示任何输出有人可以帮我将它转换为新版本的 twitch api

标签： javascriptnode.js

解决方案

没关系，我找到了一个解决方案，我只使用 JQuery，所以我的新工作 main.js 是：

var api = 'helix';
var client_id = 'awn5pjjdxpb0mieqeb96d8cwr682nj';
var user = '45885376'; //id de Kalevis : 45885376
var timeToCheckLive = '120000';
var timeToResetNotifs = '10800000';





checkStream(user, client_id, api);

var check = setInterval(function(){
    checkStream(user, client_id, api);

}, timeToCheckLive );


function checkStream(user, client_id, api){
        $.ajax({
            type: "GET",
            beforeSend: function(request) {
              request.setRequestHeader("Client-Id", client_id);
            },
            url: "https://api.twitch.tv/"+api+"/streams?user_id="+user,
            processData: false,
            success: function(response) {
                var data = response.data[0]; 
                if(typeof data == "undefined"){
                    //stream is offline
                }else{
                    var gameId = data["game_id"];
                    var liveTitle = data["title"];
                    var liveViewersCount = data["viewer_count"];
                    $.ajax({
                        type: "GET",
                        beforeSend: function(request) {
                          request.setRequestHeader("Client-Id", client_id);
                        },
                        url: "https://api.twitch.tv/"+api+"/games?id="+gameId,
                        processData: false,
                        success: function(response) {
                            var liveGame = response.data[0]['name'];
                            liveGame = "Joue &#xE0; : " + liveGame
                            $('#gamePlaying').html(liveGame);   
                        }
                        });
                    //Stream is online



                }   


            }
          });
    }

如果你想要我的最终扩展，我在 github 上开源它：https ://github.com/aimericrouyer/twhitch-chrome-extention-for-kalevis-

推荐阅读