2010年9月15日水曜日

Google Chrome Extension タブの情報を取得

Google Chrome Extension で、extension をクリックされたときなどに
今開いているタブの情報(ページのURL, タイトルなど)を取得するには

chrome.tags.* API

を使います

http://code.google.com/chrome/extensions/tabs.html

1. manifest.json で permission に tabs を追加します

{
"name": "My extension",
...
"permissions": [
"tabs"
],
...
}

 Samples
 Filter by API に chrome.tabs を選択する


2. JavaScript で API を使う


2.2 getSelected

 全面に出ている(=選択されている)タブの Tab Object を取得するには
 
  chrome.tabs.getSelected(integer windowId, function callback)

 を使います。

 function callback は function(Tab tab){ ... } のように引数で
 Tab Object を受け取ることができます。 

 例えば、選択されているタブが Amazon のページのときだけ
 タイトルを表示する場合は、こんな感じ



chrome.tabs.getSelected(null, function(tab) {
if (tab.url.indexOf('http://www.amazon.co.jp') == 0 ||
tab.url.indexOf('https://www.amazon.co.jp') == 0) {
// Amazon のページのときの処理
document.getElementById('msg').innerHTML = tab.title;
}
else {
// Amazon 以外のページ
document.getElementById('msg').innerHTML = "";
}
}


 引数で受け取った Tab Object は次の Types を保持しています

  ・id (integer)
    タブのID, ブラウザセション内で一意

  ・index (integer)
    window内のゼロから始まるタブindex

  ・windowId (integer)
    タブが含まれているwindowのID

  ・selected (boolean)
    タブが選択されているかどうか

  ・url (string)
    タブのURL

  ・title (optional string)
    タブのタイトル、タブがロード中の場合使えないことがある

  ・favIconUrl (optional string)
    タブのfavIconのURL、タブがロード中の場合使えないことがある

  ・status (optional string)
    ステータス、loading or complete

  ・incognito (boolean)
    タブが incognito window かどうか


2.3 create

 タブを生成するには

  chrome.tabs.create(object createProperties, function callback)

 を使います

 createProperties には windowId (optional integer) /
 index (optional integer) / url (optional string) /
 selected (optional boolean) が指定できます。

 function callback ( function(Tab tab){ ... } )で
 生成された Tab Object を受け取ることができます。 
 

2.4 remove

 タブを削除するには

  chrome.tabs.remove(integer tabId, function callback)
 
 を使います。

 削除するタブの Tab ID を引数で指定します。

 function callback は function(){ ... } のように引数なしです


2.5 get

 特定のタブの Tab Object を取得するには

  chrome.tabs.get(integer tabId, function callback)

 を使います

 function callback は function(Tab tab){ ... } のように引数で
 Tab Object を受け取ることができます。 


2.6 executeScript

 script を実行するには

  chrome.tabs.executeScript(integer tabId, object details, function callback)

 を使います

 JavaScript コードをページに inject します。
 詳しくは programmatic injection

 tabId で script を実行するタブを指定します。
 デフォルトは現在の window の selected tab。
 特定のタブで実行しない場合は null を指定。

 details には code (optional string) / file (optional string)
 / allFrames (optional boolean) が指定できます。

 こんな感じ

chrome.tabs.executeScript(null, {file: "content_script.js"});

1 件のコメント: