前置き

この記事を投稿した経緯

皆さんはVTuberって知ってますか？
詳細な説明はgoogleを検索すればいくらでも出てくるので割愛しますが、最近は生放送が主流になっており、放送中のコメント（ライブチャット）に非常に丁寧に対応されている方も多く見受けられます。

そんな中、ある作業配信を見ていた時のこと。
コメント欄に海外の方が外国語でコメントをしました。
配信者さんは外国語に強くないので、普段はコメント欄に出てきた外国語は片っ端から翻訳ツールにかけているそうなのですが、作業中だと手が離せないのでそれも難しいとのこと。

そこで思いつきました。
それ、自動化できるんじゃないか、と。

そこから先はエンジニアによくある好奇心です。
その人でも別の人でも、使ってくれる人がいれば嬉しいことこの上ないですが、別に誰かのために作るわけじゃなくて、実現方法を考えるのを楽しみたかったという。

要件

配信したことがないので分かりませんが、配信者さんは主に下記の方法で画面にコメントを表示しているとのこと。
https://vip-jikkyo.net/youtube-live-chat-on-screen

外部ツールが絡むと一気に難易度が上がるため、今回は上記記事の中で一番分かりやすい「4 通常どおりキャプチャーする方法」を想定します。

OS：windows10
ブラウザ：google chrome

作り方

翻訳API

google翻訳のAPIも用意されてはいるのですが、使い勝手がよくなさそうだったので、こちらの記事を参考にGASでAPIを作成。
https://qiita.com/satto_sann/items/be4177360a0bc3691fdf

ページへの組み込み

独自ページやラッピングページを作るとURLが怪しくなったりと面倒なので、ユーザースクリプトを使ってコメントページ（https://www.youtube.com/live_chat?is_popout=1&v=xxx）にJavaScriptを追加することで実現することにしました。
要素の追加の検出にはMutationObserverを使用しています。

comment_convert.js

(function() {
  let mutationObserver = new MutationObserver(function() {
    if (document.querySelector("#item-scroller #items").childNodes.length) {
      // コメントが追加された時に動作
      var element = document.querySelector("#item-scroller #items").childNodes[document.querySelector("#item-scroller #items").childNodes.length-1].querySelector("#message");

      // スタンプのみのコメントを除外
      if(element.innerText){
        // 翻訳APIへリクエスト
        var param = encodeURI(element.innerText);
        fetch("https://script.google.com/macros/s/AKfycbzU8mU59MnDvhgnOyCVQITJiLgDztcaElh7zxBXgzOAMUfNx0JZ5xbbXzMIDXFd_cQL/exec?text=" + param, {
          method: "GET",
          redirect: 'follow'
        }).then(response => response.text())
        .then(text => {
          var honyaku = JSON.parse(text).text;
          console.log(honyaku);
          if(element.innerText != honyaku){
            // 翻訳結果を追加
            element.innerHTML += "<br>訳：" + honyaku;
          }
        });
      }
    }
  });

  // 要素の追加を監視
  mutationObserver.observe(
    document.querySelector("#item-scroller #items"),
    {
      childList: true
    }
  );
})();