YouTubeのコメント欄を見ながら動画を小窓表示するブラウザ拡張機能を作った

完全に自分用ですが、しばらくブログ記事を書いていなかったので宣伝も兼ねて書いています。

https://raw.githubusercontent.com/mkizka/youtube-komado/main/app/images/icon128.png
これはあまりにも適当なアドオンのアイコン

YouTube 小窓プレーヤー」という名前のGoogle Chrome向けブラウザ拡張機能を作りました。

chrome.google.com

github.com

これは動画の閲覧ページで下方にスクロールすると、自動的に動画が小さく右端に表示され、コメントを読みながら動画もみることが出来るようになるアドオンです。

↓こんな感じになります。

https://raw.githubusercontent.com/mkizka/youtube-komado/main/screenshot.png
動画が小窓で表示される様子( https://www.youtube.com/watch?v=gu3KzCWoons )

オプションで小窓プレーヤーのサイズの変更と、小窓プレーヤーを一時的に非表示にする(再度スクロールするとまた小窓表示される)機能があります。

開発のきっかけ

「Enhancer for YouTube」というブラウザ拡張機能があります。

chrome.google.com

僕はこの拡張機能がかなり気に入っていて、特に画面を下方にスクロールした時に、動画が小さいプレーヤーで表示される機能がお気に入りでした。

Enhancer for YouTubeは他にもかなり多くの機能があるのですが、強いて言えばこの小窓表示の機能以外はほぼ使っておらず、たまに拡張機能を入れ直したりすると不要な機能をオフにするのが若干手間でした。

あとは性格の問題ですが、意図しない動作を防ぐために機能の拡張は必要な範囲で狭くしておきたいと考えていました。

そんなわけでこの拡張機能から、小窓表示機能だけを持つ別の拡張機能に乗り換えようといくつか試したのですが、どれも微妙だった(というか元々のに慣れすぎていた)ので、結局自分で作ることにしました。

技術的な話

開発には webextension-toolbox を使いました。

github.com

設定ファイルからWebpackに ts-loader を追加するなどして、TypeScriptで開発しています。公式にReactもサポートしているので、オプション機能に使用しています。

設定は以下を参考にしました。

github.com

おわり

久々にブラウザ拡張機能を作りましたが、ポップアップやwebextension-toolboxなど試せて良かったです。