ポンコツエンジニアのごじゃっぺ開発日記。

いろいろポンコツだけど、気にするな。エンジニアの日々の開発などの記録を残していきます。 自動で収入を得られるサービスやシステムを作ることが目標!!

YouTubeの動画をなるべく全画面で表示させるためのChrome拡張機能を作ってみた。

Chromeブラウザのウィンドウは全画面にしたくないけど、Youtubeの動画を全画面で表示させたいってことありませんか?

自分はよくあります。例えば、iTermで背景を透過にして後ろでYouTubeの動画を流しながらプログラムを書く等。こういった場合って、chromeブラウザを全画面にするとできないんですよね。

作ってみた

そこで、そういうときに便利なchrome拡張機能を作ってみました。

youtube-full-display」という、Youtubeの動画をなるべく全画面で表示させるためのツールです。

(名前もアイコンも雑ですみません。)

↓こちらからインストールすることができます。

https://chrome.google.com/webstore/detail/youtube-full-display/jdddikepcogipfhmhifccngpkoeeknji?hl=ja

使い方

インストールするとブラウザのツールバーのところに以下のようなアイコンが表示されるかと思います。

アイコンが黒色の状態になっているときは対応していないサイトを開いているサインです。

ここで、YouTubeを開き、テキトーに動画を流してみます。すると以下のように色が変わるはずです。

このときに、アイコンをクリックすると、現在流している動画が別ウィンドウで開き、そこのウィンドウでなるべく全画面で表示させてくれると思います。

これで、ブラウザのフルスクリーン表示ではないが、なるべく全画面に近い状態で流せたと思います。

あとは、例えば動画を右クリックして「ループ再生」を選択することで、ずっとそれを流してくれたりします。

この拡張機能がやっていること

さて、実際にこの拡張機能がどういう処理をしているかというのを紹介したいと思います。

まず、開いているタブのURLを見て、有効なページかどうかを判断します。有効なページのときにアイコンが赤色に変わるようにしています。

赤色のアイコンをクリックしたタイミングで、開いている動画のURLを新しいウィンドウで開きます。このとき、chromeブラウザのツールバーなどを非表示の状態で開いています。

あとは、新しく開いた動画の不要なDOMを削除して、動画のところだけ画面いっぱいに表示(width=100%, height=100%)にしています。

これだけの処理を書いています。

最後に

この拡張機能のおかげで、作業のやる気が上がり、仕事効率が爆上げしたと思います。

あと、今回、初めてchrome拡張機能をリリースしてみましたが、意外と簡単にできました!

お問い合わせプライバシーポリシー制作物