Google Chrome Extensionの作り方 第１回 ～Hello World編～
Google Chrome Extensionの作り方 第２回 ～概要編～
Google Chrome Extensionの作り方 第３回 ～実践編～

Google Chrome Extensionの作り方 ～概要編～

今回は前回端折ったChrome Extensionの基本的な部分について書きます。
前回の内容と重なる部分がありますがご了承ください。

前置きしますが、簡単な拡張機能を作成できるようになる程度の知識です。
(それ以上は私が書けません。)

Chrome Extensionとは？

前回書いたように、Chromeの拡張機能のことです。

「HTML/JavaScript(jQuery)/CSS」で作成します。

拡張機能のUI

Chromeの拡張機能には２つのUIがあります。
「ブラウザアクション」と「ページアクション」です。

ブラウザアクション
全てのページで、URL欄の横に拡張機能のアイコンを表示します。
ほぼ全てのページに対して、またはページに依存せず拡張機能を使用したい場合に選択します。
例)Google Mail Checker
(前回作成したHello Worldの拡張機能はブラウザアクションです。
manifestファイルに”browser_action”と書いてあります。)

ページアクション
特定のページを開いたときのみ、URL欄の横にアイコンが表示されます。
条件に一致しないページでは、アイコンが非表示になります。
特定のページでのみ拡張機能を使用したい場合に選択します。
例)Mappy
(manifestファイルに”page_action”と指定しただけでは、アイコンが表示されません。
スクリプトで動的にアイコンの表示を制御しなければいけないので注意です。)

アイコンをクリックしたときの動作は様々です。
ポップアップを表示したり、個々の拡張機能専用のページを開いたり、ページに対して処理をしたりなどです。

ブラウザアクションとページアクションの両方を選択することはできません。
それぞれの用途から考えて当然ですね。
manifestファイルに”browser_action”と”page_action”両方を記述すると、
拡張機能を読み込むときエラーが表示されます。

どちらか一方を選ばないといけないわけではなく、両方選択しないこともできます。

拡張機能の構成ファイル

・manifestファイル(manifest.json)

その他必要に応じて、
・HTMLファイル
・JavaScript
・画像
など

manifestファイルは必須です。
それ以外のファイルは拡張機能ごとに変わります。

配布の際はこれらを１つのフォルダにまとめ、ZIPファイルにパッケージ化します。

manifestファイル
「manifest.json」のことを指します。
拡張機能についての情報を付与します。

● 必須
“manifest_version”:
manifestファイルのバージョンです。
現在は2以外指定できません。

“name”:(I18N対応)
拡張機能の名前です。最大45文字です。
略称として別途”short_name”というものを指定できます。こちらは12文字以内推奨です。

“version”:
拡張機能のバージョン。
以下の形式からバージョンを指定できます。

“version”: “1”
“version”: “1.0”
“version”: “2.10.2”
“version”: “3.1.2.4567”

指定できる整数は”0～65535″の範囲で、0で始まる整数は無効です。
(99999や032など)

Chromeが拡張機能の新しいアップデートがあるか判断する場合、
バージョンの比較は一番左側の数字から行われます。
例えば、”1.1.9.9999″から”1.2.0″にバージョンアップした場合、”1.2.0″の方が新しいと判断されます。

また、”1.1.9.9999″と”1.1″では”1.1.9.9999″の方が新しいと判断されます。
これは”1.1″にない右側２つの数字は、0と判断されるためです。
(“1.1″は”1.1.0.0″として比較されたことになる。)

“version”以外に、表示目的のバージョンである”version_name”も設定できます。

“version_name”: “1.0 beta”
“version_name”: “build rc2”
“version_name”: “3.1.2.4567”

● 推奨
“default_locale”:
拡張機能を国際化対応する場合に指定します。
_localesディレクトリが存在する場合は必須です。存在しないなら、指定しないでください。
この指定をするときは、_localesディレクトリを作り、さらにサブディレクトリとして
ロケールごと”message.json”を用意し、ロケールにあったテキストを設定する必要があります。

“description”:(I18N対応)
拡張機能の説明です。HTMLなどは使用できません。132文字以内です。

“icons”:
Chrome ウェブストアや拡張機能の詳細ページなどで使用されるアイコンです。

128*128: ストアや拡張機能の詳細ページなどで使用されます。
48*48: 拡張機能ページで使用されます。
16*16: ファビコンとして使用されます。

透明化情報を綺麗に保てるPNG形式推奨です。
もちろん、BMP、GIF、ICO、JPEGなども可能です。

● どちらか１つ(選択しないことも可能)
“browser_action”:
ブラウザアクションを選択する場合に指定します。

“page_action”:
ページアクションを選択する場合に指定します。

● オプション(記載するかは自由)
オプションは種類が多いので、使いそうなものをピップアップして説明します。

“author”:
作成者です。

“automation”:
自動更新するか、でしょうか。

“background”:
backgroundページ、またはeventページを使用する場合に指定します。
子要素のオプションとして”persistent”にtrueを指定するとbackgroundページ、
falseを指定するとeventページになります。

“content_scripts”:
アクセスしたWebページに対して実行するJavaScriptや、
実行する条件を指定します。

“minimum_chrome_version”:
拡張機能に必要なChromeの最低バージョンです。

“option_page”:
オプションページを使用する場合に指定します。

“permissions”:
ChromeのAPIを使用したり、拡張機能からアクセスしたいURLがある場合に指定します。

アーキテクチャ

● backgroundページ
backgroundで動作するページやスクリプトです。
manifestファイルで、backgroundに”persistent”:falseを設定したものがeventページです。

backgroundページは永続的で、Chromeを終了しない限りバックグラウンドに常駐します。
Chromeのタスクマネージャを見ると、いくつか拡張機能の名前が表示されていると思います。
ここに表示されている拡張機能は、永続的なbackgroundページを持っています。

eventページは特定のタイミングで呼び出され、処理が終わると閉じられます。常駐はしません。

拡張機能を開発するときは、できるだけeventページにすることが推奨されています。
常駐するということは常に裏でメモリを確保している状態なので、ユーザにとっていい状態とは言えません。
もちろん拡張機能によってはeventページでは難しいものもあるので、
絶対にeventページにしなければいけないということはないです。

● Content scripts
Webページと何らかの対話を行う場合に利用します。
コンテンツスクリプトは、ブラウザにロードされたページのコンテキスト内で実行されるJavaScriptの一部です。
コンテンツスクリプトはロードされたページの一部としてではなく、
パッケージとして同梱された拡張機能の一部と判断されます。

アクセスしたページの内容の読み取り、変更ができますが、
親ページのDOMを変更することはできません。

chrome.* API

拡張機能はChrome専用API(chrome.* API)を使用することができます。
Chromeへの干渉はこのAPIを使用します。

● 同期メソッドと非同期メソッド
chrome.* APIには同期メソッドと非同期メソッドがあります。
ほとんどのAPIは非同期です。

非同期メソッドは実行結果を待たずにreturnします。
もし、非同期メソッドの実行結果を受けて何か処理したい場合は、
パラメータにコールバックメソッドを渡します。
コールバックメソッドは、呼び出し元メソッドの完了後のかなり後の方で実行されます。

例えば、新しいタブを作成するメソッドは以下です。

chrome.tabs.create(object createProperties, function callback);

作成したタブに対して何らかの処理を行いたい場合は、コールバックメソッドを使用します。

chrome.tabs.create(object createProperties, function(tab) {
  // 処理
});

同期メソッドは全ての作業を完了するまでreturnしません。
また、同期メソッドは戻り値を返します。

以上が概要です。
次の記事で実践編を書きます。