先取り! Google Chrome Extensions

第2回 Chrome Extensionsの作り方#1

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

tabs APIの使い方

今回のケースはタブの更新時とタブの切り替え時に,現在選択しているタブのURLを使ってToolstripを更新するという処理になります。

tabs APIにはタブ選択の変更(onSelectionChanged⁠⁠,タブの更新(onUpdated)といったAPIがあります。これらのAPIはaddListenerというメソッドが定義されており,リスナー関数を設定することができます。また,タブのURLの取得はTabオブジェクトから行えます。このTabオブジェクトの取得は chrome.tabs.get で行うことができます。

まずは,Tabオブジェクトから各serviceを実行する処理を定義します。このとき,httpで始まらないURLや長いURL(ここでは短めに255としました)を弾くようにしておきます。

run_on_tabの定義

var run_on_tab = function(tab, force_request, only_request){
  var url = tab.url;
  if (!/^http/.test(url)) return;
  if (url.length > 255) return;
  services.forEach(function(service){
    service.set(tab.url, force_request, only_request);
  });
};

続いて,onSelectionChangedを登録します。onSelectionChangedのリスナーはtabidを返すので,そのIDを元にTabオブジェクトを取得します。

onSelectionChangedの使い方

chrome.tabs.onSelectionChanged.addListener(function(tabid){
  chrome.tabs.get(tabid, function(tab){
    run_on_tab(tab);
  });
});

最後に,onUpdatedを登録します。onUpdatedのリスナーもtabidを返しますが,updateの場合は,そのタブが選択状態であるとは限りません。そこで,chrome.tabs.getSelectedで現在選択しているタブを取得します。ただし,getSelectedには現在の(Toolstripが存在する)windowのidが必要となります。そのため,予めchrome.windows.getCurrentでwindowidを取得しておく必要があります。

current_windowの取得とonUpdated,getSelectedの使い方

var current_window;
chrome.windows.getCurrent(function(window){
  current_window = window;
});
chrome.tabs.onUpdated.addListener(function(tabid){
  chrome.tabs.getSelected(current_window.id, function(tab){
    if (tab.id === tabid) {
      run_on_tab(tab, true);
    } else {
      run_on_tab(tab, true, true);
    }
  });
});

onUpdatedが発生したタブと現在選択されているタブが同じ場合,フォアグラウンドで更新されたとして,force_requestを有効にしています。またその逆であれば,バックグラウンドでタブが開かれたとして,only_requestを有効にしています。

以上でExtensionの実装は完了しました。仕上げとしてmanifest.jsonを作成します。

SBM Counterのmanifest.json(Chrome 3仕様)

{
   "name": "SBM Counter",
   "description": "SBM Counter",
   "toolstrips": [ "toolstrip.html" ],
   "version": "1.0"
}

toolstripsしか使用していないため,非常にシンプルです。しかし,先述のとおり,Chrome 4ではtabs API,クロスドメイン通信を使用するにはpermissionsの記述が必要になります。

SBM Counterのmanifest.json(Chrome 4仕様)

{
   "name": "SBM Counter",
   "description": "SBM Counter",
   "permissions": [ "http://*/" ,"tabs" ],
   "toolstrips": [ "toolstrip.html" ],
   "version": "1.0"
}

本来であれば,ドメインの記述は全体を許可する "http://*/" ではなく,"http://b.hatena.ne.jp/" のように個別に設定するべきですが,今回テストに使用したChromeのバージョン(4.0.207.0)では個別指定が機能していなかったため,"http://*/" を使用しています。

また,Chrome 4用にpermissionsに "tabs" を記述すると,Chrome 3ではExtensionのインストール時に不正なpermissionsとして弾かれてしまいます。そのため,tabs APIなどを使用するExtensionはChrome 3用と4用でパッケージを分ける必要がある点に注意が必要です。

以上をパッケージしたファイルは下記にあります。

SBM Counter for Chrome 3
SBM Counter for Chrome 4

まとめ

今回はExtensionsの作成からAPI仕様の概略とデバッグツール,そしてより実用的なExtensionについて説明しました。次回はExtensionsの各種APIを実際に試しながら解説をしていきたいと思います。

著者プロフィール

太田昌吾(おおたしょうご,ハンドルネーム:os0x)

1983年生まれ。JavaScriptをメインに,HTML/CSSにFlashなどのクライアントサイドを得意とするウェブエンジニア。2009年12月より、Google Chrome ExtensionsのAPI Expertとして活動を開始。

URLhttp://d.hatena.ne.jp/os0x/