Greasemonkeyを使ってTwitch Whisperメッセージを読む

Question

私は特定のtwitchチャンネルのチャットボットからのささやきメッセージに応じてTwitch.tvのいくつかの要素を調整するgreasemonkeyスクリプトを持っています。私の目標は、ささやきチャットを観察し、新しいすべてのホイップサーメッセージを読んだり、それに応じて調整したり、チャットウィンドウを閉じたりして、私が囁きを受けたことがわからないようにすることです。

私はGreasemonkey、HMTLまたはJavascript一般に精通していません。私は確実に動作し、観察を伝えることができる限り

// Observe twitch whisper chat 
    var whisperArea = document.getElementsByClassName('conversations-manager')[0]; 
    observeDOM(whisperArea ,function(){ 
    NewWhisperMessage(); 
    }); 

：これを行うには、私が知っている唯一の方法は、すべてのささやきウィンドウ（conversation-manager）を含むクラスにobserveDOMを使用することです。今ではない部分に：私の方法NewWhisperMessageそれ自身。

まずは最初のアプローチについて説明します。始めに私はすべての新しいささやきを見つけようとしました。ウィスパーが受信されると、ウィスパーウィンドウが開きます。この時点で、私はちょうどこれは一種のsomtimes動作しますが、ある

var allChatMessages = document.getElementsByClassName("conversation-chat-line"); 
var newestChatMessage = allChatMessages[allChatMessages.length - 1]; 

によってクラスconversation-chat-lineの最後の要素を取ると、一般的に

<div class="ember-view conversation-chat-line incoming" title="Sat Jul 09 2016 11:52:38 GMT+0200" id="ember2564"> 
<span style="" class="from">NameOfMessageWriter</span> 
<span class="colon">:</span> 
<span style="" class="message"> 
     Here is the message! 
     </span> 
</div> 

：ウィスパーウィンドウ自体はmutlipleメッセージ行は次のように構築しています1つのDOMアップデートに到着するマルチファイルのメッセージがあるようです（これは意味がありますか？）私はこれに気づいたので、より信頼性の高いより複雑なアイデアを考え出しましたが、それでもやはり頻繁に失敗するようです。これがこのセッションの最初の新しいささやきである場合、開始点が見出されなければならない（LastWhisperTitleがまだ空である）

1）：

私のアプローチは、4つのステップでおおよそ働きます。このために私はtwiserチャットウィンドウのセパレータ要素を新しいワイパーメッセージ（クラスnew-message-divider）のために見つけようとしています。その前にチャットメッセージを取得してtitle属性とこのメッセージのメッセージテキストを保存しようとしますメッセージを一意に識別します（id属性は使用できません）。このステップは1回だけ実行されます。

2）今度はすべてのチャットメッセージを、最後の2つの変数（タイトルとメッセージテキスト）で識別されます。すべてのチャットメッセージを取得するには、getElementsByClassNameを使用してください。私はこの最新のメッセージのインデックスを保存し、ステップ3）から始めます。

3）最初の新しいチャットメッセージのインデックスを持つことで、順方向の繰り返しと各メッセージの順番の解析が開始されます。

4）新しいメッセージが読み込まれたときにウィスパウィンドウを閉じます。私はまだすべてで唯一の一部またはなしささやくメッセージが読まれる問題を抱えている

var LastWhisperTitle = ""; 
var LastWhisperMessage = ""; 
var ChannelName = "NameOfChatBot" 

function NewWhisperMessage(){ 

    if(LastWhisperTitle == "") { 
     // New Session: Find first new whisper 

     // Find new message divider 
     var newMessageDividerArray = document.getElementsByClassName("new-message-divider"); 
     var newMessageDivider = newMessageDividerArray[newMessageDividerArray.length - 1]; 

     // Find newest message already read 
     var sibling = newMessageDivider.previousSibling; 
     while(sibling) { 
      if(sibling.nodeType == 1) { 
       if(sibling.className != "undefined"){ 
        if(sibling.className.indexOf("conversation-chat-line") > -1) { 
         break; 
        } 
       } 
      } 
      sibling = sibling.previousSibling; 
     } 
     if(!sibling){ 
      return; 
     } 

     // Store this message as last read whisper 
     LastWhisperTitle = sibling.title; 
     LastWhisperMessage = sibling.getElementsByClassName("message")[0].textContent.trim(); 
    } 

    // Get all messages 
    var whisperMessageArray = document.getElementsByClassName("conversation-chat-line"); 
    var foundNewMessage = false; 

    // Find index in array of the first new message 
    var firstNewMessageIndex = 0; 
    for(i = whisperMessageArray.length - 1; i >= 0; i--){ 
     var currentWhisper = whisperMessageArray[i]; 
     var currentTitle = currentWhisper.title; 
     var currentMessage = currentWhisper.getElementsByClassName("message")[0].textContent.trim() 

     if(currentTitle == LastWhisperTitle && currentMessage == LastWhisperMessage){ 
      // This message was already read -> the message with the previous index is new 
      if(i == whisperMessageArray.length - 1) { 
       // No new message 
       return; 
      } else { 
       firstNewMessageIndex = i+1; 
       break; 
      } 
     } 
    } 

    if(firstNewMessageIndex == 0){ 
     // No new message 
     return; 
    } 

    // Parse all messages from index to newest message 
    for(i = firstNewMessageIndex; i < whisperMessageArray.length; i++){ 
     var currentWhisper = whisperMessageArray[i]; 
     var writer = currentWhisper.getElementsByClassName("from")[0].textContent; 
     var message = currentWhisper.getElementsByClassName("message")[0].textContent.trim(); 

     if(writer == ChannelName){ 
      ParseWhisperMessage(message); 
      foundNewMessage = true; 
     } 
     LastWhisperTitle = currentWhisper.title; 
     LastWhisperMessage = message; 
    } 

    if(foundNewMessage){ 
     // Close Chat Window 
     CloseWhisperWindow(); 
    } 

} 

：

そして、ここで最終mehtodである（条件はちょうど新しいメッセージが到着しない場合に手動でささやきウィンドウを開くができます） 。私のアプローチには何が問題なのでしょうか？

Answer 1

私はこの問題を発見したようです。私の方法自体は基本的に機能しますが、唯一の問題は、documentにdocument.getElementsByClassName("conversation-chat-line");を使用しているので、複数のウィスパー会話が開いているときにバグが発生しているということです（twitchボットだけでなく）。これにより、LastWhisperTitleとLastWhisperMessageの値が失われます。

var conversationHeaderNames = document.getElementsByClassName('conversation-header-name'); 
var currentConversation; 
// Find the correct conversation window 
for(i = 0; i < conversationHeaderNames.length; i++){ 
    if(conversationHeaderNames[i].innerHTML.trim() == ChannelName){ 
     currentConversation = conversationHeaderNames[i].parentNode.parentNode; 
     break; 
    } 
} 
if(!currentConversation) return; // No conversation with chat bot 

、その後、私はちょうどcurrentConversationとdocumentを交換する必要があり、それが動作します：

ソリューションは、私の関数の先頭にこのコードを配置することです。