はじめに

この記事は、KIT Developer Advent Calendar 2019 2日目になります。Advent Calendarの時期が来ると、今年ももう少しで終わるな〜っていう実感が湧いてきますね。

KIT Developer Advent Calendar 2019 - Qiita

それでは、ReactでChrome拡張を開発して公開したお話について書いていきます📝

今回開発したもの

タブを管理するActive Tab ListerというChrome拡張になります。

動作の様子 | 動作の様子

開発背景

Chromeを使っていて、以下のことに困っていました。

1. 前に見ていたページを探したいと思った時に、開いているタブが多いと、ページタイトルが見切れてしまい切り替えることが困難
2. 見ているページをスマートフォンやiPadですぐに見たいときに、Slackなどで送るのは手間
3. Chromeのタブをたくさん開いていると、メモリを沢山消費しているので開いているが不要なタブをサクッと削除したい
   • しかし、タブを沢山開いているとFaviconしか表示されないような状態になってしまい、不要なタブの判断がしづらい

これらの問題を解決するため、

1. 開いているタブの一覧を表示して、タップするとそのページに遷移できるようにする
2. 開いているタブのQRコードを読み取ることで、スマートフォン・iPadでも別のサービスを経由することなく瞬時に開くことができるようにする
3. 複数ページを開いている際に「いくつタブを開いているのか」すぐに見ることができ、タイトルを見て不要だと思ったタブはDELETEボタンで削除できるようにする

という仕様を満たすように開発を進めていきました。

manifestファイルの書き方

Chrome拡張の開発において記入が必須のマニフェストファイル(manifest.json)の書き方については、以下の記事が大変分かりやすかったです。