ReactでChrome拡張を開発・公開した話

Reactを使ってChrome拡張『Active Tab Lister』を開発＆公開した経験をシェア！開発背景・manifest.jsonの設定・デバッグ方法・Chromeウェブストアへの公開手順を詳しく解説。

はじめに

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

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

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

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

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

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

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

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

npm run buildをすると、ルートディレクトリにbuildディレクトリを作成
chrome://extensions/へアクセスし、パッケージ化されていない拡張機能を読み込むをクリックします。
拡張機能のディレクトリを選択できるので、先ほど作成されたbuildディレクトリを追加します。 (manifest.jsonはpublicディレクトリにもありますが、buildディレクトリを選びます)

※ 普段のフロントエンド開発の要領でnpm start,yarn startをしてもChrome拡張の動作確認は出来ないので注意です。

公開手順は以下のようになっています。Publish in the Chrome Web Storeより

また、少なくとも以下の画像が必要です。

(ここがちょっと大変ですが公開まであと少しなので、もうひと頑張りです!!)その後、1~2日ほど待って審査が通れば、公開されます。

Chrome拡張は公開する際に厳しい審査もなく、自分のアイデアを簡単に形にして届けることが出来ます。普段Chromeを使っていて、こんなものがあれば便利だなって思うことがあれば作成してみるのも良いですね！

開発リポジトリはこちらになります。IssuesやPR大歓迎です😄