こんにちは，ALBERTの太田です。今回からChrome4のリリースまでの間，Google Chrome Extensionsの詳細を追っていきたいと思います。なおタイトルの通り，この連載は先取り！ Google Chrome Extensionsの続編となっています。

まず，重要なお知らせがあります。前回の特集で何度か使用していたToolstripsとMoleがベータリリースまでに削除されることが決まりました。その代わりとして，今回解説するBrowser Actionsが利用できるようになります（Important: Toolstrips being removed in favor of browser actions）⁠。また，Browser Actionsに合わせて，第3回で解説したPage Actions APIの新バージョンが提案されています。こちらも詳細は追って解説します。

そして，Chromeの今後の開発スケジュールが公開されました。こちらによると（2009年10月15日時点で）⁠，2009年10月末にBeta版の1回目のリリースがあり，12月10日に再度beta版の更新が行われ，最終的に2010年1月12日にChrome 4の正式リリースとなる予定が立っています。

それでは，今回はChrome ExtensionsのAPIの中から，Browser Actions APIとTabs APIの使い方を見ていきます。

Browser Actions API

Browser Actions APIはツールバーにボタンを追加するAPIです。（⁠2009年10月12日時点では）まだドキュメントはなく，提案段階のドキュメントのみですが，実装はかなり進んでおりWindowsのdev版でその機能を試すことができます。

最初に，実装案のモックを見てみます。

このようにOmniBox（アドレスバー）の隣に任意のボタンを追加できます。FirefoxのAdd-onでもよく使用される機能です。ツールバーの領域には限りがあるので，解決策として図1のように数が多い場合は隠れるようになる予定です（Windowsのクイック起動とよく似ています）⁠。このBrowser Actionsの使い方と詳細を解説します。

Browser Actionsの使い方

では，サンプルを見ていきます。Browser Actionsを使用するには，例によってまずmanifest.jsonにその定義を記述します。

なお，今回はChromiumのリポジトリにある，Browser Actionsの印刷ボタンをサンプルとして使用します。

{
  "name": "Print this page browser action extension",
  "description": "This extension adds a print button to the toolstrip",
  "version": "1.0",
  "background_page": "background.html",
  "permissions": [
    "tabs", "http://*/*", "https://*/*"
  ],
  "browser_action": {
      "default_icon": "images/icon19.png",
      "default_title": "Browser Action"
  }
}

browser_actionというプロパティに，default_title（マウスオーバー時に表示されるテキスト）とdefault_icon（ボタンとして使用される画像）を指定しています。default_iconは必須です。この記述だけでボタンの設定は完了です。続いて，ボタンをクリックした際のアクションをBackground Pagesで定義します。

chrome.browserAction.onClicked.addListener(function(tab) {
  var action_url = "javascript:window.print();";
  chrome.tabs.update(tab.id, {url: action_url});
});

このように，chrome.browserAction.onClickedでボタンがクリックされた際のアクションを定義できます。これでボタンをクリックしたら現在選択しているタブを印刷するシンプルな機能を実現できます（印刷ではなく印刷プレビューであればもっと実用的なのですが，今のところ印刷プレビューを呼び出すAPIは用意されていないようです）⁠。

Badgeの使い方

Browser ActionsにはBadgeと呼ばれるボタン上にテキストを表示する機能があります。このBadgeの使い方を見てみます。

chrome.browserAction.setBadgeText({text:"111", tabId:tab.id});
chrome.browserAction.setBadgeBackgroundColor({color:[190, 190, 190, 230], tabId:tab.id});
chrome.browserAction.setIcon({path:'icon.png', tabId:tab.id});
chrome.browserAction.setTitle({title:'MyButton', tabId:tab.id});

このように，Background PagesやToolstripsなどの拡張コンテキストからchrome.browserActionのメソッドとして，setBadgeText，setBadgeBackgroundColor，setIcon，setTitleが使用できます。それぞれtabIdを指定することでタブごとに値を設定することが可能です。

setBadgeTextは4文字以内のテキストを指定します（2009年10月12日時点では，数値を渡すとエラーになるので注意が必要です）⁠。setBadgeBackgroundColorはBadgeの背景色を配列で指定します。赤，緑，青，透明度の順となっており，CSSなどで使われるRGBAです。

ssetIconはアイコン画像のパス，もしくはImageDataを渡すことができます。ImageDataを渡すことができるので，canvasを使って動的に作ったイメージをボタンにすることが可能です。

Popupの使い方

Popupは図2のモックのように，Browser Actionのボタンをクリックした際に任意のHTMLを表示するAPIです。

こちらもmanifest.jsonでHTMLのパスを指定します。

  "browser_action": {
      "default_icon": "icon.png",
      "default_title": "Popup Sample",
      "popup": "popup.html"
  }