StreamDeck Tabは、開いているYouTube動画とTwitch配信を自動収集し、常設ダッシュボードへまとめます。どのタブが再生中かを確認し、表示、再生・停止、ミニプレイヤー、ミュート、終了をカードから操作できます。
- YouTubeとTwitchの対象タブを自動検出
- ライブと動画を分けて表示
- サムネイル、タイトル、チャンネル、再生状態、残り時間、視聴者数を表示
- カードからタブ表示、再生・停止、ミュート、終了を操作
- 常に最前面へ表示できるミニプレイヤー（小窓内に再生・停止、ミュート、音量スライダーを搭載）
- ミニプレイヤーは全タブでひとつだけ。閉じる・切り替えると、以前の小窓と元動画を実際に停止
- 停止したTwitchライブの再開は裏側で試み、数秒で復帰しない場合のみ対象タブを表示して再生
- Twitchライブのサムネイルを定期更新し、前回配信の画像キャッシュを防止
- 動画の再生位置を保存し、次回表示時に続きから再開
- Memory Saverで休止されたタブも状態を保って表示
- キーボード操作、明確なフォーカス表示、動きを減らす設定に対応
- Google ChromeまたはChromium系ブラウザ
- Manifest V3
- WindowsとmacOS
Node.jsを用意し、プロジェクト直下で実行します。
npm install
npm run buildchrome://extensionsを開く- 「デベロッパーモード」を有効にする
- 「パッケージ化されていない拡張機能を読み込む」を選ぶ
- 生成された
distフォルダを指定する - 必要に応じて
chrome://extensions/shortcutsでショートカットを確認する
コード更新後は npm run build を実行し、拡張機能一覧から再読み込みしてください。
- ツールバーアイコンまたは
Alt+Shift+Dでダッシュボードを開く - YouTube動画またはTwitchチャンネルを開くとカードが追加される
- カードの操作:
- 「表示」: 対象タブを前面へ移動
- 「再生／停止」: プレイヤー状態を切り替え
- 「ミニ／終了」: ミニプレイヤーを開閉（終了すると再生も停止）
- 音声アイコン: ミュートを切り替え
- 閉じるアイコン: 対象タブを終了
ミニプレイヤーはブラウザ全体でひとつだけ動作します。小窓の「×」、カードの「終了」、別動画の小窓への切り替えのいずれでも、閉じた動画は実際に一時停止します。裏で配信が流れ続けることはありません。
Twitchライブは非表示タブのままでは、停止後の再読み込みが始まらない場合があります。停止したTwitchライブを「再生」または「ミニ再生」すると、まず裏側で復帰を試み、数秒で復帰しない場合は対象タブを表示して再生します。
Twitchライブの小窓内で停止した場合だけは、即時再開のために配信本体を維持したまま小窓映像と音声を止めるソフト停止になります。再開時は停止位置ではなく現在のライブ位置へ即時復帰します。小窓を閉じるとソフト停止も実際の停止へ確定します。
npm run lint
npm run build| コマンド | 内容 |
|---|---|
npm run lint |
TypeScript型検査と静的検査 |
npm run build |
dist/ へ拡張機能を生成 |
src/
├─ background/ サービスワーカー、状態管理、コマンド処理
├─ content/ YouTube・Twitchのプレイヤー連携
├─ dashboard/ ダッシュボードUI
└─ shared/ メッセージ契約、型、URL判定
public/ HTML、マニフェスト、アイコン
docs/ 設計書と実装計画
使用する主な権限:
tabs: 対象タブの検出、表示、終了、ミュートstorage: 表示設定と動画再生位置の保存scripting: 拡張更新時に既存の動画タブを再読み込みせず、新版の連携処理だけを適用
対象サイトは youtube.com と twitch.tv だけです。外部サーバーへ閲覧履歴や個人情報を送信する処理はありません。
- 配信サイト側の画面構造変更により、視聴者数などの補助情報が取得できなくなる場合があります
- YouTube広告中は再生位置が広告側の値になる場合があります
- シークレットモードには対応していません
- 休止中タブは、タブを復帰させてからミニプレイヤーを利用できます
- Twitchライブを小窓内で停止（ソフト停止）している間は配信データの受信が継続します
ライセンスは未設定です。利用条件を明確にする場合は、公開後にライセンスファイルを追加してください。