Tutorial: Getting Started (Hello, World!) - Google Chrome Extensions - Google Code
を参考にExtensionを作成しました。
一番分かりやすいチュートリアルなんじゃないかと思います。
チュートリアルでは、manifest.jsonとpopup.htmlのみを作成するシンプルなものになっています。
自分はこれに加えて、「Page Action」「Background Page」「Options Page」のAPIを使用して、簡単なExtensionを作成しました。
その作業の流れのメモです。
最初のmanifest.jsonの設定とポップアップページの作成
Extensionでは、どういったAPIを使い、どのスクリプトをどのタイミングで実行するのか、といった事を設定するファイルがあります。
それがmanifest.jsonです。
内容は下記のようなものになっています。
{
"name": "Insert Hello",
"version": "1.0",
"description": "Insert Hello message.",
"browser_action": {
"default_icon": "icon.png",
"popup": "popup.html"
}
}
上記の設定では、アプリの名前やバージョンなどを記述しています。
また、「browser_action」というAPIについても設定を記述しています。
設定は、下記の二項目です。
- ブラウザの左上に表示するアイコンの画像(default_icon) (DLはこちら)
- クリックした時のpopupページ(popup.html)
ここで設定しているpopup.htmlを作成しました。
<!DOCTYPE html> <html> <meta charset="utf-8"> <style> body { min-width:357px; overflow-x:hidden; } </style> <div id="hello"> Popup Area </div> </html>
これらのファイルを一つのディレクトリに入れます。
テスト動作
chromeブラウザを起動して下記の手順で、作成したファイルを読み込ませて実行します。
- ツールアイコンか「ウィンドウ」メニューから「拡張機能」を選択
- 「ディベロッパーモード」をクリック
- 「パッケージ化されていない拡張機能を読み込みます」をクリックし、設定ファイルなどが入っているディレクトリを選択
以上の手順を行なうと、メニューに追加されます。
アドレスバーの横にアイコン画像が表示されるはずです。
このアイコンをクリックすると、「Popup Area」という文字が表示されるポップアップメニューが表示されると思います。
全ページに「Hello, ○○」を挿入するExtension
ブラウザで開いたページの一番上に「Hello, ○○」という文言を挿入するExtensionを作成します。
挿入されたページ
設定ページ
機能として、Extensionの設定画面で、○○になにを入れるのかを設定できるようにします。
これらを実現するために、下記のものを作成します。
- 設定画面(options_page.html)
- 設定画面で設定された値を参照するためのページ(background.html)
- ページを開いた時に、「Hello,○○」を挿入するためのスクリプト(insert_hello.js)
設定画面(options_page.html)
○○に入れる値を設定する画面を作成します。作成には、普通のWebページと同様にHTML+javascriptで作成します。
http://github.com/memememomo/insert_hello/blob/master/options_page.html
入力フォームは普通にinputタグで作成しました。
ボタンが押されたらjavascriptでイベントを処理します。
<table class="account"> <tr> <td class="name"> Username: <input id="name" type="text" name="name" onkeypress="onChange();"/> </td> <td class="submit"> <input id="submit" type="submit" name="" value="save" disabled onclick="setName();"/> </td> <td class="cancel"> <input id="clear" type="submit" name="" value="clear" disabled onclick="clearName();"/> </td> </tr> </table>
設定された値は「window.localStorage」というところに保存します。
この領域への保存／参照／削除などの操作は下記のように行ないます。
function getStorage() { return window.localStrage; } // 参照 function getItem(key) { return getStorage().getItem(key); } // 保存 function setItem(key, value) { return getStorage().setItem(key, value); } // 削除 function removeItem(key) { return getStorage().removeItem(key); }
ご覧の通り、key-valueの形になっています。
設定画面で設定された値のやりとり
ページ毎に実行するスクリプトをContent Scriptと呼びます。
Content Scriptから、設定画面で設定された値を参照するためには、Background Pageを介す必要があります。
つまり、Content ScriptとBackground Pageがやりとりを行ないます。
やりとりは、「chrome.extension.onRequest」と「chrome.extension.sendRequest」で行ないます。
Background Page(background.html)では、下記のように記述します。
<html> <script> chrome.extension.onRequest.addListener( function(request, sender, sendResponse) { switch(request.action) { case 'getName': sendResponse(getNameFromStorage()); break; } } ); function getNameFromStorage() { return getItem('name'); } function getItem(key) { return getStorage().getItem(key); } function setItem(key, map) { return getStorage().setItem(key, map); } function removeItem(key) { return getStorage().removeItem(key); } function getStorage() { return window.localStorage; } </script> </html>
「chrome.extension.onRequest.addListener」の部分で、Content Scriptからのリクエストに対応する処理を記述をしています。
Content Script(insert_hello.js)では、下記のように記述します。
chrome.extension.sendRequest({"action": "getName"}, function(response) {
var name = response;
if (name == '' || name == null) {
name = 'guest';
}
var hello = document.createElement('div');
hello.innerText = "Hello, " + name;
var d = document.getElementsByTagName('body')[0];
var dp = d.parentNode;
dp.insertBefore(hello, d);
});
「chrome.extension.sendRequest」で、Background Pageにリクエストを送っています。コールバック関数で、設定画面で設定された値を受け取り、DOM操作でメッセージを挿入しています。
Content Script内のwindow.localStorage
Content Script(insert_hello.js)内でもwindow.localStorageにアクセスできます。しかし、設定画面で設定した値は、そこにはありません。
window.localStorageは、各ページ毎に持たれるものだからです。
extension全体で共通のwindow.localStrageは、Background Pageにあるものになります。
manifest.jsonの設定
新しいページを作成したので、manifest.jsonにもその旨を記述します。
今回、作成した分については、下記のように記述しました。
"options_page" : "options_page.html", "background_page": "background.html", "content_scripts": [ { "js" :[ "insert_hello.js" // スクリプトファイル名 ], "matches": [ "http://*/*", "https://*/*" ], "run_at": "document_end" // スクリプト実行タイミング } ],
以上で、作成したファイルを一つのディレクトリに置き、Chromeに読み込ませれば動作が確認できます。
