こんにちは、キャスレーコンサルティングSI部の秦（はた）です。

今回はGoogle Chromeの拡張機能「Google Chrome Extensions」（以下、拡張機能）の作り方をご紹介します。

はじめに

Web上に公開されている様々な拡張機能はChrome ウェブストアの「拡張機能」からプラグインすることができます。

この拡張機能では、JavaScriptと「Chrome Extension API」を駆使して便利な機能を作成することができます。
「ここが不便…」「こんな機能があれば」など、ちょっとした不便さの解消にも役立つことでしょう。

作成した拡張機能はChrome上で実行することが可能です。

一般公開で配布するには、Chrome ウェブストアのデペロッパー登録($5.00)が必要です。

詳細は以下の公式ヘルプを参照ください。

https://support.google.com/chrome_webstore/answer/187591?hl=ja

Chromeへの取り込みは非常に簡単です。作成後、すぐにChrome上にて動作確認をすることができます。

それでは早速、拡張機能を作ってみましょう。

拡張機能の構成

まず拡張機能に必要なものです。

・マニフェストファイル

ファイル名は「manifest.json」です。このファイルはタイトル、バージョン、アイコン、
実行URLマッチングパターンなど拡張機能の情報や実行するスクリプトなどを定義します。

・アイコンファイル

拡張子は「.png」です。拡張機能のアイコンです。好きなアイコンを登録することができます。

・JavaScriptファイル

拡張子は「.js」です。拡張機能の処理を記述します。

HTML同様、好きなJavaScriptファイルをインポートできるため、
独自に作成するスクリプトの他に、jQueryなども使用することが可能です。

基本的に必要なのはこれだけです。

今回のサンプルではディレクトリ構成を以下のように作成します。

ChromeExtention_00

ファイル構成は以下の通りです。

ChromeExtention_01

ディレクトリ構成は自由に作成して構いませんが、
マニフェストファイルはルートディレクトリ（この場合は「sample」）の直下に配置しましょう。

・「sample」ディレクトリ

プロジェクトのルートディレクトリです。

・「icons」ディレクトリ

アイコンファイルの格納場所です。

拡張機能の作成

それでは、まず始めにマニフェストファイルを作成しましょう。

manifest.json

{
	// 拡張機能の定義
	"manifest_version": 2,	// マニフェストのバージョン ※"2"を指定
	"name": "Sample",		// 拡張機能の名称
	"version": "1.0",		// 拡張機能のバージョン

	"description": "サンプル拡張機能",	// 拡張機能の概要

	// アイコンの設定
	"icons": {
		"16": "icons/icon.png",			// 16×16[px]アイコンファイルのパス
		"48": "icons/icon.png",			// 48×48[px]アイコンファイルのパス
		"128": "icons/icon.png"			// 128×128[px]アイコンファイルのパス
	},

	// スクリプトの設定
	"content_scripts": [
		{
			"matches": ["https://www.casleyconsulting.co.jp/*sample*"],	// 拡張機能を適用するURLパターン
			"js": ["main.js"]						// JavaScriptのパス
		}
	]
}

[content_scripts]-[matches]には正規表現が使えます。その他のパスはHTMLなどの相対パス指定と同じです。

サンプルの場合、「https://www.casleyconsulting.co.jp/menu/sample/01.html」などのURLパターンにマッチングします。

複数のJavaScriptファイルをインポートしたい場合は、カンマ区切りでパスを記述します。

次に、拡張機能の肝となるJavaScriptファイルを作成しましょう。

main.js

///////////////////////////////////////////////////////////
// (c)2013 casley consulting inc, all right reserved.
// サンプル
// author y.Hata 2013/09/20
///////////////////////////////////////////////////////////

document.OnLoad = start();

//////////////////////////////
// ページ読込時の処理
//////////////////////////////
function start() {
	window.alert('Hello World !!')
}

サンプルとして、ページ読込時に「Hello World !!」と

メッセージボックスを表示するだけの簡単なスクリプトを作成しました。

これで準備は完了しました。後はChromeに作成した拡張機能をプラグインしましょう。

拡張機能のプラグイン

Chromeの画面右上にあるメニューの[設定]を選択すると、設定画面が開きます。
そこから「拡張機能」を選択してください。

ChromeExtention_02

「デベロッパーモード」のチェックをONにします。

ChromeExtention_03

「パッケージ化されていない拡張機能を読み込む…」ボタンを押下します。

すると、「フォルダの参照」ダイアログが開きますので、
拡張機能のルートディレクトリを選択し、「OK」ボタンを押下します。

マニフェストファイルに定義ミスがなければ、拡張機能がプラグインされます。

ChromeExtention_04

プラグインされたら、最後に動作確認をしてみましょう。

拡張機能の実行

マニフェストファイルで指定したURLパターンにマッチングしたページを開くと、
「Hello World !!」とメッセージが表示されます。

拡張機能の更新

拡張機能を更新した場合は、拡張機能管理画面で「リロード」を押下すれば更新が反映されます。

拡張機能の無効化

拡張機能を無効にしたい場合は、「有効」のチェックをOFFにします。以下は無効にした状態です。

ChromeExtention_05

おわりに

以上が拡張機能の至極簡単な作成方法です。
もっと細かい設定などもありますので、Googleのリファレンスなどを参考にしてください。

今回はこの辺で。是非チャレンジしてみてくださいね！