Live Chat Grid

YouTube Live とニコニコ生放送のチャットを抽出して、グリッドレイアウトで表示する Chrome 拡張機能です。両方のチャットを一つのウインドウに同時に表示出来ます。

一度表示したチャットはスクロールせず同じ位置に表示し続けるので、テキストを読んでいる途中でテキストの位置がスクロールで上下に動くことはありません。新しいチャットは一番古いチャット位置に順次上書きされます。

インストール

git clone https://github.com/susumuota/livechatgrid.git
cd livechatgrid
npm ci
npm run build

YouTube Live https://www.youtube.com/watch/v=* またはニコニコ生放送 https://live.nicovideo.jp/watch/lv* のページを開く
右クリックしてコンテキストメニューを開き、Live Chat Grid を選択すると別ウインドウを表示しライブチャットを表示
- さらに、このウインドウで F12 キーを押して DevTools を表示すると、過去のチャットログを表示できます。ログの種類で Verbose と Info をそれぞれ有効にしてください。
チャットが更新されないときは元ページをリロード
それでもダメなら拡張機能の設定ページで更新を押してから元ページをリロード

Live Chat Grid のウインドウで F12 キーを押して DevTools を表示し、以下のコードを入力して設定を行います。詳細は common.ts を参照してください。以下設定例です。

columns で列、 rows に行を指定します。

chrome.storage.local.set({ columns: 5, rows: 15 })

上記設定後に、スクロールバーが消えるようにウインドウサイズをマウスで調整してください。フォントサイズは通常通り Command+- と Command+= で調整出来ます。

rowHeight に (行数 * 1.5 + 2)rem を文字列で指定(1.5 は line-height, 2 は padding)。はみ出た分はマウスホバーすると表示出来ます。

chrome.storage.local.set({ rowHeight: '6.5rem' })

rowHeight に auto を指定するとチャット全体を表示出来ますが、グリッドの高さがメッセージによって変わるのでテキストの位置がずれます。

chrome.storage.local.set({ rowHeight: 'auto' })

isFixedGrid を false にすると、固定グリッドをやめてチャットをスクロールさせます。 rows を多めに設定出来ます。スクロールバーの一番下までスクロールした状態だと自動スクロールします。

chrome.storage.local.set({ isFixedGrid: false, rows: 20 })

isEnabled を false にした後に元ページをリロードすると、チャットの抽出を停止します。

chrome.storage.local.set({ isEnabled: false })

Susumu OTA