Chrome Extension開発を勉強してみる (18) - chrome.experimental.infobar -

chrome.experimental.infobarなAPIを使ってみる

manifest.json

{
  "name": "test",
  "version": "0.1",
  "manifest_version": 2,
  "browser_action": {
    "default_icon": "icon.png",
    "default_title": "test"
  },
  "background": {
    "scripts": ["background.js"]
  },
  "permissions": ["experimental", "tabs"]
}

permissionsにexperimentalを指定する。但し、このパーミッションをつけるとChrome WebStoreにうｐする事は出来ないらしいので注意。又、パーミッションだけ付けてもChrome自体の試験用APIを有効になってないと使えないはず

background.js

(function(undefined) {
  chrome.browserAction.onClicked.addListener(function() {
    chrome.tabs.getSelected(null, function(tab) {
      chrome.experimental.infobars.show(
        {
          "path": "infobar.html",
          "tabId": tab.id
        },
        function(w) {
          console.log(w);
        }
      );
    });
  });
})();

infobar.html

<html>
  <body style="margin: 8px">
    <h2>Hello World</h2>
  </body>
</html>

で結果的なところだと

な感じで画面上部に表示される(ブラウザアクションをクリックしたら)

リファンレス: http://developer.chrome.com/dev/extensions/experimental.infobars.html