Chrome拡張機能をサクッと作ってストアまで公開する手順

Chrome拡張機能とは?

Google Chromeで使用できる機能を増やしたり、既存の機能を強化するものです。
Chrome Extension(エクステンション)とも呼ばれます。

Chrome拡張機能は以下のChromeウェブストアで公開されており、インストールすることが出来ます。

Chrome ウェブストア
https://chrome.google.com/webstore?hl=ja

どのようにしてChrome拡張機能を作成するのか

一から作成するのは準備が大変なため、テンプレートを生成して作成していきます。

Chrome拡張機能の作成・実行手順

作成に必要なライブラリをインストール

Chrome拡張機能のテンプレートを生成・作成・実行に必要なライブラリをインストールします。

  • yo:Chrome拡張機能のテンプレート生成のジェネレータを実行するコマンド
  • generator-chrome-extension:Chrome拡張機能のテンプレート生成のジェネレータ
  • bower:JavaScript/CSS/HTMLなどを依存関係を含めて管理してくれるフロントエンド用パッケージ管理ツール
  • gulp:自動化ツール

Chrome拡張機能のテンプレートを作成

テンプレートの作成が始まります。
完了までしばらく待ちます。

必要なパッケージをインストール

どのようなChrome拡張機能を作成するかにもよりますが、少なくともjQueryは使用すると思うためインストールしておきます。

他にもインストールしたいものがあれば、必要に応じてインストールしてください。
(select2を使用したい場合は bower install select2 など)

作成されたテンプレートのディレクトリ・ファイル

▼トップディレクトリの一覧

▼app/ 直下の一覧。作成に辺りメインで使用します。

▼app/scripts.babel/ 直下の一覧。Chrome拡張機能の動作をコーディングするディレクトリ・ファイルです。

マニフェストファイルの内容を変更

app/manifest.json のファイルで、Chrome拡張機能の基本設定を行います。
主に、バージョンやアイコン、パーミッション、拡張機能が動作するURLなどを指定します。

以下はテンプレートとして作成されたマニフェストファイルの内容です。

最低限の変更として、例えばChatworkだけで動作するChrome拡張機能とし、jQueryも使用できるようにしてみます。

Chrome拡張機能の動作内容のコーディング

どのような動作を行うChrome拡張機能とするか、app/scripts.babel/ 以下のファイルに処理内容を記述します。
各ファイルの概要は前述のとおりです。

実行

トップディレクトリにて以下のコマンドを実行します。

app/scripts.babel/ 以下のコードをビルドして、app/scripts/ 以下に実行ファイルを生成してくれます。
また app/ 以下のファイル内容が変更された場合、自動でリロードしてくれる便利なコマンドです。

Chromeブラウザにて作成した拡張機能の読み込みを行う

まず、Chromeブラウザの拡張機能の画面である chrome://extensions/ を開きます。

  1. 画面右上の「デベロッパーモード」をONにします。
  2. その後表示される「パッケージ化されていない拡張機能を読み込み」を選択し、app/ ディレクトリを選択します。
  3. 作成したChrome拡張機能が読み込まれます。

ここまで完了すると、後は app/scripts.babel/ ディレクトリ以下のファイルに変更を加えつつChromeブラウザで動作を確認しながら開発していきます。

もしgulp watchコマンドでリロードされているのに上手く変更が反映されない場合は「Chromeブラウザの拡張機能の画面」の再読込ボタンをクリックして、読み込んだ拡張機能を手動で再読込してみてください。

または拡張機能の動作を確認しているタブで開いてる画面を、再読込してみてください。

Chromeウェブストアへのリリース

以下の画面で、作成した拡張機能の登録&申請を行います。

デベロッパー ダッシュボード
https://chrome.google.com/webstore/developer/dashboard?hl=ja

「新しいアイテムを追加する」ことで、作成した拡張機能を公開出来ます。
(公開ボタンをクリックしてから、おおよそ1時間以内でストアに公開されます)

尚、初めて拡張機能を登録する場合は一度だけ $5 を支払う必要があります。

今回の手順で作成したChrome拡張機能

元々作成のきっかけは、外国の方とChatworkでメッセージをやり取りする機会が増えたことでした。

メッセージを都度コピー&ペーストしてGoogle翻訳の画面で翻訳することが手間だった為、ワンクリックでGoogle翻訳の画面を別タブで開いて、開いた瞬間メッセージの翻訳結果も表示されているChrome拡張機能を作成しました。

Chatwork翻訳 – Chrome ウェブストア
https://chrome.google.com/webstore/detail/injgocnfmhafkbiclbhobfkahpnfokdb

チャットワークの画面から手軽にメッセージを翻訳できる、Google Chrome拡張機能『Chatwork翻訳』をリリースしました。

2019年2月8日

最後に

Chrome拡張機能を一から作るのは大変なため、テンプレートを作成してくれるジェネレータは非常に有り難いかと思います。


【動確環境】
Mac:10.14.3
npm:ver6.6.0
yo:ver2.0.5
bower:ver1.8.8
gulp:CLI version 2.0.1 / Local version 3.9.1

コメントを残す

メールアドレスが公開されることはありません。

ABOUTこの記事をかいた人

高原 徹也

大手通信キャリアを経て、大ヒットスマートフォンアプリ開発を手がける企業で多数の開発プロジェクトに携わった後、起業。 起業後も様々な開発プロジェクトに携わり、開発を通じて会社を大きく成長させ、今ではASP会社、メディア運用会社を子会社で持ち、シンガポール法人でWEBメディア会社を経営、M&Aを手がける起業家として活動中。