タブ上からYoutubeを消してバックサウンドとして流せるChrome拡張機能を作った話

YoutubeのURLを入れることで別ウィンドウが開いてバックサウンドとしてYoutubeの曲を流せるChrome拡張機能をつくりました。再生リストも対応。

Mac / Win それぞれ友達にテストとして使ってもらい動くことを確認してもらいました。ありがとう。

※8/21修正:一部タイトルと文章の表現に変更を加えました。

ここからDLできます：Extension Youtube Player

成果物

URLを入力すると、

小ウィンドウが開きます

何が嬉しいのか

Chromeブラウザのタブ上にYoutubeがあると視界の邪魔になります。

パソコン作業がメインの人、特にエンジニアだとググりまくってタブが一時的に無数に増えてしまうと思います。
タブを移動する度にYoutubeが現れてしまい煩悩をくすぐってしまいますよね。
(チャンネル登録した人の新着動画サムネなんかは見たくない)

実際に「あのページどこだっけ〜」と考えながらタブを移動するふとYoutube画面が表示されてしまいそのまま意識が流れて行ってしまうことは多々あったし。
そこで小ウィンドウで最低限だけ開くことでメインWindowの裏に動画が隠れるし開いた動画だけしか情報が入ってこないよう遮断ができます。

どうやって作ったのか

popup.jsとbackground.jsの２つを使いました。加えてChromeのポップアップウィンドウ用に独自でwindow.jsを用意しました。(邪道なやり方かもしれない)

popup.js側でURLを受け取ったらchrome.runtime.sendMessage()関数で流します。
それをchrome.runtime.onMessage.addListener()関数でbackground.jsの中で受け取ります。
受け取った引数毎に処理できるよう ref関数 を用意しておき今後、処理を増やしやすいようにしました。

background.js

chrome.runtime.onMessage.addListener(function (payload) {
  const { action } = payload;
  ref(action, payload);
});

const ref = (action, payload) => {
  switch (action) {
    case "newWindow":
      openWindow(payload);
      break;
    default:
      break;
  }
};

const openWindow = (payload) => {
  const { url: youtubeURL } = payload,
    w = 400,
    h = 287,
    topPosition = screen.height - (h + 40),
    leftPostion = screen.width - (w + 40);

  chrome.windows.create({
    url: "src/window/index.html#&" + youtubeURL,
    type: "popup",
    height: h,
    width: w,
    top: topPosition,
    left: leftPostion,
  });
};

youtubeの埋め込みはURLのoptionの値を用いて埋め込むことができます。(今回はAPIへ値を送ったけれど使わなくても埋め込みできる)
これがベストプラクティスとは思いませんが、そのためyoutube動画をポップアップウィンドウへ反映させるため、ポップアップへ送るURL末尾に 「 # 」 を使ってYoutubeのURLデータをポップアップウィンドウへ送りました。

それをwindow.jsで正規表現を使って 「 # 」 以降を受け取り Iframe Player API と共にYoutubeを埋め込むことができました。

chrome.windows.create({
    url: "src/window/index.html#&" + youtubeURL,
    type: "popup",
    height: h,
    width: w,
    top: topPosition,
    left: leftPostion,
  });

注意点

ポップアップウィンドウ(動画)を開きすぎるとポップアップウィンドウはメモリを食うのであまり開きすぎない方が良いかと思います。

意識したこと

できる限りシンプルに作ること。
最初はプレイヤーらしくスイッチをいくつか用意してリッチにしようと思っていました。

ですが過去に「STOP Twitter」と呼ばれるTwitterを時間指定で使えなくするプラグインを作ったところ権限が多すぎるのか、何かしらのコンプラに触発したのか審査が降りずに公開することができませんでした。

↑お釈迦になったけれど自分のために今でもつかってる公開されずに終わった幻のプラグイン

今回の Extension Youtube Player でも公開できない可能性もあるし、複雑にして良いことは少ないなと判断したためできる限り権限を減らしシンプルにしました。
リッチな機能をつけたりstorage機能を使って過去に入力したURLをログにしておきたかったのですがそこら辺も断捨離。

反省点

特に２つあります。
データは適当に送らないこととさっさとAPIを使うべきだったこと

データを適当に送って正規表現が面倒になった

「正規表現つかっとけばどうにでもなるっしょ」と思いポップアップへ送るパラメータを正規表現して適当に配列にまとめて送り、そのままそれに合わせて受け取った側でさらなる正規表現を使っていったところ、とてもごちゃごちゃしたコードになりました。
ここで覚えたことはデータはできる限り生で送るか、しっかりと使いやすい状態で送りましょう。ということ(当たり前体操)

APIを使うべきだった

最初はIframe Player API(公式サイト)を使わずにやろうとしましたがとても遠回りでした。

URLだけで埋め込もうとすると埋め込んだYoutube動画のスタイリングを変更したり次の動画を再生するアクションを実行することができず、思う通りに作ることができませんでした。
(再生できない場合のメッセージを表示し次の動画を再生する処理を実行したかった)

Chrome拡張機能は面白い

最先端で新しいかっこいいプラットフォームや技術がどんどん出てきているけれどChrone拡張機能をつくることもとても楽しいので改めて民主化して欲しさはある。

公開できずとも最悪、自分が使えばいいしそれはそれで世界で自分だけが享受できる便利さという最高の贅沢が楽しめる。

JavaScriptの基礎知識とChrome拡張機能ならではの関数と簡単な環境設定を覚えれば「初めまして」の人でも簡単に公開するところまで漕ぎ付けられるのはスマホアプリにはない良さだ。
ソースコード側はTypeScriptを使ってWebpackなどを使ってトランスパイルすれば当然TSも使えて学習にもなる(それで一個プラグインも作ってる)

ということで個人開発している今のプロダクトをつくり終えたらまたChrome拡張機能で色々とつくりたいと思う。なんだかんだバニラJSはとても楽しい