Webアプリを公開しよう! Chrome Web Store/Apps入門

第8回 Webアプリを作ろう#5――Content Scripts

この記事を読むのに必要な時間:およそ 6 分

odometer.js(目的地設定)

/*
 * 目的地設定
 */
function setDestination(lat, lng, focus){
    var latLng = new google.maps.LatLng(lat, lng);
    if ( destMarker ) {
        destMarker.setMap(null);
    }
    destMarker = new google.maps.Marker({
        title: '目的地',
        position: latLng,
        map: map
    });

    //目的地情報表示
    showDestinationPosition(lat, lng);

    /*
     * Background Pageで目的地を設定
     */
    chrome.extension.sendRequest(
        //リクエストデータ
        {
            action: 'set_destination',
            lat: lat,
            lng: lng
        },
        //レスポンスコールバック
        function(response) {
            if ( response.type && response.type == 'distance' ) {

                //目的地までの距離を表示
                showDistance(response.distance);

            } else {
                alert('目的地の設定に失敗しました');
            }
        }
    );
    
    if ( focus ) {
        map.setCenter(latLng);
    }
}

メイン画面のsetDestinationメソッドでは,地図上のマーカーの作成など表示に関わる部分を更新しています。以降は,従来の操作プロセスと 同様の動きになるので解説は割愛します。

図3 Googleマップに目的地設定ボタンを追加する

図3 Googleマップに目的地設定ボタンを追加する

図4 目的地設定ボタンからOdometerを呼び出す

図4 目的地設定ボタンからOdometerを呼び出す

動的にJavaScriptを挿入する

Content Scriptsのようにあらかじめ対象としたURLに対してJavaScriptファイルを挿入するのではなく,任意のタイミングで動的にJavaScriptやCSSファイルを挿入する方法もあります。chrome.tabs以下のexecuteScriptメソッドとinsertCSSメソッドを利用します。これらのメソッドを利用するには,マニフェストファイルで以下のような指定が必要です。

マニフェストファイルのサンプル

"permissions": [
  "tabs",
  "http://*/*"
]

"permissions" に,"tabs" と対象のURLをあらかじめ指定する必要があります。サンプルではすべてのhttpサイトを指定していますが,Webアプリに合わせて個別に指定してください。

サンプルコード

// JavaScriptの実行
chrome.tabs.executeScript(null,
    { code: "alert(1)" });

// JavaScriptファイルの挿入
chrome.tabs.executeScript(null,
    { file: "js/execute_script.js" });


// スタイルの適用
chrome.tabs.insertCSS(null,
    { code: "body { backround-color: white; }" });

// CSSファイルの挿入
chrome.tabs.insertCSS(null,
    { file: "css/insert.css" });

実際にJavaScriptやCSSを挿入する場合のサンプルコードです。executeScriptメソッドとinserCSSメソッドは,第1引数で対象のタブIDを指定しています。タブIDはnullを指定すると現在表示されているタブを対象とします。第2引数でcode,もしくはfileを指定することができます。

表2 chrome.tabs

メソッド/プロパティ説明
executeScript(tabId, details, callback)指定のタブにJavaScriptを挿入する
insertCSStabId, details, callback指定のタブにCSSを挿入する

表3 details

プロパティ説明
codeJavaScriptコード,もしくはスタイルの文字列を指定
fileJavaScriptファイル,もしくはCSSファイルのURLを指定
allFramesすべてのフレーム要素でスクリプトを実行するかどうかを指定(デフォルト:false)

まとめ

これで,Googleマップのサイトから直接Odometerの目的地を設定できるようになりました。Content Scriptsを使えば,今回紹介したGoogleマップ以外にもほかの地図サイトやいろいろなサイトとも連携することができるようになります。Content Scriptsは自由度が非常に高いので面白いアイディアを実現しやすいと思います。是非活用してみてください。

今回は,Content Scriptsの詳細を解説しました。次回も引き続きさまざまなAPIを解説していきたいと思います。

crxファイルはzipファイルですので,右クリックからのダウンロード後に拡張子をzipに変えていただければ中身を参照できます。

著者プロフィール

吉川徹(よしかわとおる)

普段は,普通のSIer。Webからローカルアプリケーション,データベースからインフラ周りに至るまで,何でも担当する雑食系。主にHTML5開発者コミュニティ「HTML5-developers-jp」で活動中。同コミュニティ主催の「HTML5とか勉強会」のスタッフを務め,HTML5の最新動向を追っている。