こんにちは、キャスレーコンサルティング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なども使用することが可能です。
基本的に必要なのはこれだけです。
今回のサンプルではディレクトリ構成を以下のように作成します。
ファイル構成は以下の通りです。
ディレクトリ構成は自由に作成して構いませんが、
マニフェストファイルはルートディレクトリ(この場合は「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の画面右上にあるメニューの[設定]を選択すると、設定画面が開きます。
そこから「拡張機能」を選択してください。
「デベロッパーモード」のチェックをONにします。
「パッケージ化されていない拡張機能を読み込む…」ボタンを押下します。
すると、「フォルダの参照」ダイアログが開きますので、
拡張機能のルートディレクトリを選択し、「OK」ボタンを押下します。
マニフェストファイルに定義ミスがなければ、拡張機能がプラグインされます。
プラグインされたら、最後に動作確認をしてみましょう。
拡張機能の実行
マニフェストファイルで指定したURLパターンにマッチングしたページを開くと、
「Hello World !!」とメッセージが表示されます。
拡張機能の更新
拡張機能を更新した場合は、拡張機能管理画面で「リロード」を押下すれば更新が反映されます。
拡張機能の無効化
拡張機能を無効にしたい場合は、「有効」のチェックをOFFにします。以下は無効にした状態です。
おわりに
以上が拡張機能の至極簡単な作成方法です。
もっと細かい設定などもありますので、Googleのリファレンスなどを参考にしてください。
今回はこの辺で。是非チャレンジしてみてくださいね!