ポートフォリオページ
ポートフォリオページ
小幡 十矛（Obata Tomu）｜プロフィール｜共創で価値をつくるエンジニア・新規事業×ブランドづくり/📝 小幡 十矛（おばた とむ）の共創ブログ｜iOS×新規事業×リアルとデジタルの交差点から生まれる挑戦の記録/ReactでChrome拡張を開発＆公開！開発背景・デバッグ・公開手順を解説

ReactでChrome拡張を開発＆公開！開発背景・デバッグ・公開手順を解説

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

はじめに

この記事は、KIT Developer Advent Calendar 2019 2日目になります。Advent Calendarの時期が来ると、今年ももう少しで終わるな〜っていう実感が湧いてきますね。
それでは、ReactでChrome拡張を開発して公開したお話について書いていきます📝

今回開発したもの

タブを管理するActive Tab ListerというChrome拡張になります。
動作の様子 | 動作の様子
動作の様子 | 動作の様子

開発背景

Chromeを使っていて、以下のことに困っていました。
  1. 前に見ていたページを探したいと思った時に、開いているタブが多いと、ページタイトルが見切れてしまい切り替えることが困難
  1. 見ているページをスマートフォンやiPadですぐに見たいときに、Slackなどで送るのは手間
  1. Chromeのタブをたくさん開いていると、メモリを沢山消費しているので開いているが不要なタブをサクッと削除したい
      • しかし、タブを沢山開いているとFaviconしか表示されないような状態になってしまい、不要なタブの判断がしづらい
これらの問題を解決するため、
  1. 開いているタブの一覧を表示して、タップするとそのページに遷移できるようにする
  1. 開いているタブのQRコードを読み取ることで、スマートフォン・iPadでも別のサービスを経由することなく瞬時に開くことができるようにする
  1. 複数ページを開いている際に「いくつタブを開いているのか」すぐに見ることができ、タイトルを見て不要だと思ったタブはDELETEボタンで削除できるようにする
という仕様を満たすように開発を進めていきました。

manifestファイルの書き方

Chrome拡張の開発において記入が必須のマニフェストファイル(manifest.json)の書き方については、以下の記事が大変分かりやすかったです。
Chrome 拡張機能のマニフェストファイルの書き方 - Qiita
https://developer.chrome.com/extensions/manifest についての自分用おぼえがきです。 マニフェストファイルの書き方にフォーカスしていますので、個々の用語の説明などは端折ったりしています。 以下の項目は、マニフェストファイルに必須です。 マニフェストファイル自身のバージョンです。 現在のバージョンは 2 で、なおかつ現在有効なバージョンは 2 しかありません。 なので、とにかく と書けばいいです。 バージョンは数値なのでクォートは不要です。 拡張機能の名称です。45 文字まで。I18N に対応しています。 また、これは必須ではないですが、 short_name で略称を定義することもできます。12 文字までが推奨されます。 拡張機能のバージョンです。 1 から 4 つの数値を dot で区切って並べて作ることができます。それぞれの数値は 0 から 65535 までの範囲を取ることができます。 0 以外の数字の前に 0 をつけることはできません。つまり "032" などはできません。 拡張機能の自動更新機能でバージョンの上下関係がチェックされるので、適当に付けてはいけないし、拡張機能を更新する際には必ずバージョンが上がってなくてはなりません。 バージョン間の比較をする際は、ドット区切りのより左にあるバージョンが優先されます。つまり 1.1 は 1.0.9999 より上位のバージョンとみなされます。 区切りが 4 つ未満の時は、足りない部分は 0 が入っているとみなされます。なので 1.1.0.1 は
https://qiita.com/mdstoy/items/9866544e37987337dc79

Chrome拡張の実行方法

  1. をすると、ルートディレクトリにディレクトリを作成
  1. へアクセスし、をクリックします。
  1. 拡張機能のディレクトリを選択できるので、先ほど作成されたディレクトリを追加します。 (manifest.jsonはディレクトリにもありますが、ディレクトリを選びます)
※ 普段のフロントエンド開発の要領で, をしてもChrome拡張の動作確認は出来ないので注意です。

デバッグについて

Webアプリ開発と同じ点

  • Chrome拡張のアプリでもChrome DevToolsを使って検証することが出来ます

異なる点

  • React Developer Toolsを使用することが出来ない
    • そのため、Stateの確認などは少々手間になってしまいます

公開手順について

公開手順は以下のようになっています。Publish in the Chrome Web Storeより
  1. 作成されたディレクトリをzip形式に圧縮する
  1. ChromeDeveloperDashboardにアクセスし、5ドルの登録料を払います(年会費制ではないので一度支払えばOKな点も良いですね)
  1. 「新しいアイテムを追加する」をクリックして、zipファイルをアップロードします
  1. アプリケーションの詳細な説明を追加します。
また、少なくとも以下の画像が必要です。
  • ストアに表示する128x128のアイコン(ファビコンを再利用できます)
  • アプリの動作を示すために、1280x800または640x400のスクリーンショット,YouTubeビデオのいずれか
  • Chromeウェブストアの壁に表示される440x280のタイルアイコン
(ここがちょっと大変ですが公開まであと少しなので、もうひと頑張りです!!)その後、1~2日ほど待って審査が通れば、公開されます。

終わりに

Chrome拡張は公開する際に厳しい審査もなく、自分のアイデアを簡単に形にして届けることが出来ます。普段Chromeを使っていて、こんなものがあれば便利だなって思うことがあれば作成してみるのも良いですね！
開発リポジトリはこちらになります。IssuesやPR大歓迎です😄
💡
この記事はこちらのクロスポストになります
署名2025/3/3 16:552025/4/1 23:47
Xでポスト
小幡 十矛（Obata Tomu）｜プロフィール｜共創で価値をつくるエンジニア・新規事業×ブランドづくり/📝 小幡 十矛（おばた とむ）の共創ブログ｜iOS×新規事業×リアルとデジタルの交差点から生まれる挑戦の記録/ReactでChrome拡張を開発＆公開！開発背景・デバッグ・公開手順を解説