ポートフォリオページ
ポートフォリオページ
小幡 十矛（Obata Tomu）｜価値を共創するエンジニア・アプリ開発・新規事業立ち上げ・ブランドづくり/📝小幡 十矛（Obata Tomu）の技術・ビジネスブログ｜iOS・Notion・価値を共創するエンジニアの知見/📝 記事一覧/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大歓迎です😄
💡
この記事はこちらのクロスポストになります
小幡 十矛（Obata Tomu）｜価値を共創するエンジニア
東京を拠点に、アプリ開発・新規事業立ち上げ・ブランドづくりに取り組んでいます。
2021年にサイバーエージェントへ新卒入社後、ABEMA Live や AmebaブログのiOSアプリ開発を担当。
現在はフリーランスとして、複数の新規プロダクトやリアル店舗の立ち上げに挑戦中です。
🎯 Mission｜人の挑戦を加速する仕組みをつくる ── アイデアを形にし、前に進める“土台”や“場”を共創する
📌 「リアルな場 × デジタル」の可能性を探求し、新しい挑戦が生まれる土壌を育てる
🔹 エンジニアリング × ビジネスの視点から、アイデアを形にし、成長を支えていく
🔹 実店舗オーナーを目指し、オーダースーツ・ドライヘッドスパ・セレクトショップの複合店舗の立ち上げにも挑戦中
👥 特に、社会人1〜5年目くらいで
「やりたい気持ちはあるけど、最初の一歩に迷っている」方へ。 「自分の可能性をもっと広げたい」 「モヤっとしたアイデアがあるけど、どう進めていいかわからない」 そんなフェーズにいる方と、一緒に考えたり、手を動かしたりできたら嬉しいです。
🌱 「挑戦したい20代」との出会いも、大切にしています。 「ちょっと話してみたいな」くらいの気持ちで、気軽に声をかけてもらえたら嬉しいです！🙌
📷 Instagram（リアルイベントや趣味の発信中心）： https://www.instagram.com/tomu28creator
🌐 詳しいプロフィールはこちら https://obata-tomu.jp/
Xでポスト
小幡 十矛（Obata Tomu）｜価値を共創するエンジニア・アプリ開発・新規事業立ち上げ・ブランドづくり/📝小幡 十矛（Obata Tomu）の技術・ビジネスブログ｜iOS・Notion・価値を共創するエンジニアの知見/📝 記事一覧/ReactでChrome拡張を開発＆公開！開発背景・デバッグ・公開手順を解説