Chrome拡張機能の開発入門(概要編)

本ページでは、Chrome拡張機能の開発方法について解説します。

拡張機能の開発において最低限知っておくべき基本的な情報をまとめたもので、初心者向けの内容となっています。

Chrome拡張機能の基本構造

Chrome拡張機能はManifest File (JSON)を中心に、Javascript、HTML、css、pngなどのファイルで構成されます。
これらのファイルを一つのフォルダにまとめたものが一つの拡張機能となります。

以下は、Chrome拡張機能の基本的な構造となります。
なお、manifest.json以外のフォルダやファイルは任意の名前をつけることができます。

folder/(拡張機能のルートフォルダ)
 └ manifest.json ← 拡張機能のManifest File(JSON)
 └ js/(スクリプト用のフォルダ)
   └ script.js ← 拡張機能で実行するスクリプト(Javascript)
 └ icons/(アイコン用のフォルダ)
   └ icon.png ← 拡張機能のアイコン(png)

このフォルダをzip形式で圧縮しアップロードすることで、ストアで公開することができます。

Manifest File

Chrome拡張機能ではManifest Fileを必ず用意する必要があります。
具体的には、manifest.jsonという名前のJSONファイルを、拡張機能のルートフォルダに配置します。

Manifest Fileはその拡張機能に関する情報がJSON形式で記されたファイルです。
このファイルには、拡張機能の名前、バージョン、作成者名、説明、アイコン画像、実行するスクリプトや表示させるページ、Chrome APIを用いるためのアクセス許可設定などを記述します。

以下は、Manifest Fileの記述例です。
ここでは便宜上コメントを付与していますが、実際に記述する際はコメントがあるとエラーとなりますのでご注意下さい。

Permissions

前項でも触れましたが、拡張機能でChromeAPIを使用する場合はManifest Fileの「permissions」でアクセス許可を設定する必要があります。

以下の表はパーミッションの一例となります。
その他のパーミッションについては、公式ドキュメントをご確認ください。

activeTab アクティブなタブにアクセスする場合
bookmarks ブックマークにアクセスする場合(chrome.bookmarks)
contextMenus コンテキストメニューにアクセスする場合(chrome.contextMenu)
cookies Cookieにアクセスする場合(chrome.cookies)
fontSettings Chromeのフォント設定にアクセスする場合(chrome.fontSettings)
history 履歴にアクセスする場合(chrome.history)
storage ユーザーデータの保存・読み取りを行う場合(chrome.storage)

Content Scripts

Chrome拡張機能は、Content Scriptsと呼ばれるスクリプトを任意のページ(Manifest Fileの”matches”で指定したURL)で実行することができます。

なお、Content Scriptsという名前ですが、スクリプト(Javascript)の他にcssを適用することも可能です。
ここでは便宜上コメントを付与していますが、実際に記述する場合はコメントを付けるとエラーとなりますのでご注意下さい。

Content Scriptsで実行されるJavaScriptは、対象ページのDOMへ自由にアクセスすることができますが、対象ページのJavaScriptへは直接アクセスすることができません(ページ内で定義されているJavaScriptの変数や関数へのアクセスは不可)。

また、Chrome APIについても一部のものしか使用することが出来ません。

Background Page(Event Page)

Chrome拡張機能は、Background Pageと呼ばれるバックグラウンドで動くページ(もしくはスクリプト)を持つことができます。

Background Pageでは、継続的に動作させたい処理や重たい計算処理、ファイルのダウンロードなど時間がかかる処理などを行いたい場合に利用します。

Manifest Fileに以下のように記述すると、拡張機能の起動と同時に指定したスクリプトがバックグラウンドで動作を開始します。
ここでは便宜上コメントを付与していますが、実際に記述する場合はコメントを付けるとエラーとなりますのでご注意下さい。

Action

Actionを設定すると、ブラウザの右上に拡張機能のボタンが表示されます。

このボタンは、クリックした時にポップアップを表示させることができます。
表示させるポップアップはhtmlファイルを指定します。

Manifest Fileの記述は以下のようになります。ここで設定したhtmlファイル(popup.html)がポップアップで表示されます。

公開前の拡張機能をインストールする方法

開発中の動作確認など、ストアへ公開する前に拡張機能をインストールしたい場合があると思います。

公開前の拡張機能をインストールするには、まずChrome設定の「拡張機能の管理」画面へ行き、右上にある「デベロッパーモード」を有効にします。

デベロッパーモードを有効にすると下の画像にあるようなボタンが現れるので、この中の「パッケージ化されていない拡張機能を読み込む」をクリックします。

Chromeのデベロッパーモード

Chromeのデベロッパーモード

するとフォルダ選択のダイアログが現れるので、ここでインストールしたい拡張機能のルートフォルダを選択するとインストールが完了します。

インストールした拡張機能が正しく動作しない場合は、「拡張機能の管理」画面でエラーボタンが表示されていないか確認します。

エラーボタンが表示された拡張機能

エラーボタンが表示された拡張機能

さらに「ビューを検査」のリンクをクリックしてコンソールを表示させ、拡張機能実行時にエラーメッセージが出ないか確認すると良いでしょう。

拡張機能のサンプル

最後に、最小限の構成で作られた拡張機能のサンプルをご紹介します。
ページが読み込まれる度にアラートが表示されるという役に立たない機能ではありますが(笑)、拡張機能の基本を理解するのに役立つかと思います。

まずは「sample_extension」というフォルダを作成し、その中にManifest File(manifest.json)とscript.jsという2つのファイルを作成します。

なお、manifest.jsonとscript.jsの文字コードは共にutf-8で保存してください。
他の文字コードで保存すると、拡張機能のインストールに失敗するので注意が必要です。

sample_extension/(拡張機能のルートフォルダ)
   └ manifest.json ← 拡張機能のManifest File(JSON)
   └ script.js ← 拡張機能で実行するスクリプト(Javascript)

Manifest File(manifest.json)の中身は、以下のように記述します。

なお、ここでは最小限の構成とするため省略していますが、実際に拡張機能を公開する際には、”author”(作成者名)や”icons”(アイコン)等も設定した方が良いでしょう。
ここでは便宜上コメントを付与していますが、実際に記述する場合はコメントを付けるとエラーとなりますのでご注意下さい。

script.jsの中身は、以下のように記述します。
アラートを表示させるだけなので、たった1行のコードです。

これで拡張機能のファイルは準備出来たので、これを前項の手順でデベロッパーモードからインストールします。
インストールが完了すると、以下のように拡張機能(Sample extension)が登録されます。

インストールされたSample extension

インストールされたSample extension

この拡張機能を有効にした状態で何らかのWebページを開いてみてください。
以下のようなアラートが表示されると思います。

Sample extensionによって表示されたアラート

Sample extensionによって表示されたアラート

コメント