Chapter 01

はじめに

gia
gia
2022.02.08に更新

簡単な自己紹介

  • フロントエンドエンジニア (3年目)
  • 仕事では TypeScript, React, Electron がメイン
  • 開発リーダをやるようになってミーティングが増えて、設計とか管理とか上流工程の作業が増えてきたため仕事を辞めたいという感情が爆発中。自分はとても消極的な生き物なのでリーダとか向いてない。いずれリーダの仕事にも慣れたりするんだろうか。
  • 仕事を辞めるために figma, CSS を勉強したいと思っている今日この頃
  • 今年こそは会社を辞められるといいですね🎉

今回はじめて chrome 拡張機能を作ったので、自分の備忘録としてその記録をまとめておこうと思ったのですが、せっかくなので公開することにしました。よろしくお願いします。

どんな chrome 拡張機能を作るのか

自分は youtube で動画を鑑賞しているときになぜかその動画のサムネイルを確認したくなることが稀によくありました。ブラウザバックすれば確認はできますが、それはさすがに面倒です。しかも動画一覧で確認できるサムネイルは自分にしてみれば小さすぎます。できれば動画を止めずに、動画ページのどこかをワンクリックすればその動画のサムネイルがバンと大きく表示されるというのが理想です。が、そんな機能は youtube にありません。や、自分が知らないだけかもしれません。(ループ再生機能も知らなかった)

ないなら作るしかないので、作ることにしました。
こんな感じで動画のサムネイルが確認できる想定です。

機能的には動画ページのサムネイルを表示するだけというとてもシンプルなものだし、これなら 最近勉強しようと思っていた figma と css も実践で試せそうでちょうど良さそうです。

chrome 拡張機能の名前は youtube thumbnails getter にしました。くそださいです。ですがこだわり始めると名前を決めるだけでも1週間、2週間はかかってしまいます。なのでもう、えいやとこれで決定することにしました。もういちどいいます。youtube thumbnails getter 。くそださいです。

自分は土日を生贄に捧げ、youtube thumbnails getter を召喚することに成功しました。

以下は成果物です。

作ったもの

作ってよかったこと

  • chrome の拡張機能をつくるのが怖くなくなったこと。とりあえず実装からリリースまでの流れを理解できたので、次からこんな chrome の拡張機能あるといいなというアイデアが出た時に実行に移るハードルが下がった。
  • ひとりで設計、デザイン、実装、リリースのサイクルを土日だけで回せたのはいい経験になったし、これからもれくらいの規模感のアプリを短いサイクルで作っていきたいと思った。
  • chrome ウェブストアに自分の拡張機能が並んだのでちょっと嬉しかった

よろしくお願いします

初心者なのでまずは chrome の拡張機能で hello world するところからはじめます。
自分用の備忘録をちょっと修正して、校正せずに公開してしまっているので、間違いなどありましたらご指摘いただけますと幸いです🙏
よろしくお願いします。