完全に自分用ですが、しばらくブログ記事を書いていなかったので宣伝も兼ねて書いています。
作ったもの
「YouTube 小窓プレーヤー」という名前の Google Chrome 向けブラウザ拡張機能を作りました。
リポジトリ: GitHub - mkizka/youtube-komado: YouTubeでコメントを見ている時に小窓で動画も表示するブラウザ拡張機能
これは動画の閲覧ページで下方にスクロールすると、自動的に動画が小さく右端に表示され、コメントを読みながら動画もみることが出来るようになるアドオンです。
↓ こんな感じになります。
オプションで小窓プレーヤーのサイズの変更と、小窓プレーヤーを一時的に非表示にする(再度スクロールするとまた小窓表示される)機能があります。
使い方
- Chrome 拡張機能を YouTube 小窓プレーヤー - Chrome ウェブストア からインストール
- YouTube を開く
拡張機能のアイコンをクリックすると小窓プレーヤーのサイズを変更できます。
開発のきっかけ
「Enhancer for YouTube」というブラウザ拡張機能があります。
僕はこの拡張機能がかなり気に入っていて、特に画面を下方にスクロールした時に、動画が小さいプレーヤーで表示される機能がお気に入りでした。
Enhancer for YouTube は他にもかなり多くの機能があるのですが、強いて言えばこの小窓表示の機能以外はほぼ使っておらず、たまに拡張機能を入れ直したりすると不要な機能をオフにするのが若干手間でした。
あとは性格の問題ですが、意図しない動作を防ぐために機能の拡張は必要な範囲で狭くしておきたいと考えていました。
そんなわけでこの拡張機能から、小窓表示機能だけを持つ別の拡張機能に乗り換えようといくつか試したのですが、どれも微妙だった(というか元々のに慣れすぎていた)ので、結局自分で作ることにしました。
技術的な話
開発には webextension-toolbox を使いました。
設定ファイルから Webpack に ts-loader を追加するなどして、TypeScript で開発しています。公式に React もサポートしているので、オプション機能に使用しています。
設定は以下を参考にしました。
おわり
久々にブラウザ拡張機能を作りましたが、ポップアップや webextension-toolbox など試せて良かったです。
