Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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"]
    }
  ]

https://www.openrec.tv/live/ 

から始まるパスにアクセス時に、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 ドル必要でした。まあいいかと思って払いました。

coa00
frontend, node.js あたりの仕事をする人。エンジニアからディレクションまでなんでもやる人。フリーランスのお友達とお仕事くださいー。
http://coa.nu
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away