トップ > chrome > Google Chrome Extensionのチュートリアル

Google Chrome Extensionのチュートリアル

chrome

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ブラウザを起動して下記の手順で、作成したファイルを読み込ませて実行します。

  1. ツールアイコンか「ウィンドウ」メニューから「拡張機能」を選択
  2. 「ディベロッパーモード」をクリック
  3. 「パッケージ化されていない拡張機能を読み込みます」をクリックし、設定ファイルなどが入っているディレクトリを選択


以上の手順を行なうと、メニューに追加されます。
アドレスバーの横にアイコン画像が表示されるはずです。
このアイコンをクリックすると、「Popup Area」という文字が表示されるポップアップメニューが表示されると思います。

全ページに「Hello, ○○」を挿入するExtension

ブラウザで開いたページの一番上に「Hello, ○○」という文言を挿入するExtensionを作成します。

挿入されたページ

f:id:memememomo:20100517194736p:image

設定ページ

f:id:memememomo:20100517194735p:image



機能として、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に読み込ませれば動作が確認できます。

今回作成したスクリプト

http://github.com/memememomo/insert_hello

参考