Openrec の読み上げ Chrome Extension を作ってみた。

6130 ワード
MutationObserver JavaScript Speech chrome-extension JavaScript テキストリンク

openrec スピーチ

Splatoon が大好きで実況とかもたまにみるので Openrec の読み上げ extension を作ってみました。

IMAGE ALT TEXT HERE

インストールはこちら
openrecスピーチ

リポジトリは https://github.com/coa00/openrec_speech

読み上げエンジン

ブラウザに搭載されているspeechSynthesisをそのまま使いました。

これだけのコードで喋らせることができます。

const utterThis = new SpeechSynthesisUtterance('読み上げるよー'); |
speechSynthesis.speak(utterThis); |

チャットの更新を検知

dom の更新の検知方法ですが、今回は chrome の Extension なので実験的な　MutationObserverを使うことにしました。

やることを簡単に書くと

  • 増減を監視したい DOM を取得する
  • 増えた時の処理を書く（MutationObserver　のコールバックに設定）

ソースはこんな感じです。

// 監視したいDOM
const liveChatList = document.getElementsByClassName('js-liveChatList')[0]

// オブザーバインスタンスを作成
const chatListObserver = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    const li = mutation.addedNodes.item(1);
　　　　　　　　　// li からテキストを取り出して喋らせる

  });
});

// オブザーバの設定
// 子要素の増加を知りたいのでchildList
const listConfigs = { childList: true };

// 対象ノードとオブザーバの設定を渡す
chatListObserver.observe(liveChatList, listConfigs);

extension の作り方

extension には色々種類はあるのですが、今回は特定のサイトだけで動作する　content_scripts　にしました。

manifest.json を下記のようにします。


  "content_scripts": [
    {
      "matches": ["https://www.openrec.tv/live/*"],
      "js": ["openrec_voice.js"]
    }
  ]

から始まるパスにアクセス時に、JS を呼び出すといった動きを実現できます。

このあたりを参考にしました。

icon のバリエーションを作るのがめんどくさい。

アイコンをストアに公開するにあたり作らないといけないのですが、地味に面倒でした。
Mac はコマンドラインでリサイズしてくれました。

sips -Z 16 source.png --out icon16.png  
sips -Z 48 source.png --out icon48.png  
sips -Z 128 source.png --out icon128.png

素晴らしい。

ストアに公開するのに初期費用　5　ドル必要でした。まあいいかと思って払いました。