2010年5月7日金曜日

Google Chromeの背景色の変更とアイコンの文字情報変更サンプル

本日は、下記のページでも読みながら

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

下記のサンプルを動作させてみた。

http://src.chromium.org/viewvc/chrome/trunk/src/chrome/common/extensions/docs/examples/api/browserAction/make_page_red/

どうやらこのサンプルでは、下記のような感じで、
・拡張機能の部分のアイコンに文字列情報を出せる
(ここには、4文字までしか出力できないようだ)
・ページの背景色を変えられるというサンプルのようです。


ソースは、background.html内の下記の部分でクリックイベントを書いていて
クリックすると背景を赤にすると書いてある。

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(null, {code:"document.body.bgColor='red'"});
  });
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

アイコンの文字列情報表示部分は「Badge」と呼ばれるらしく

chrome.browserAction.setBadgeBackgroundColor({color: [255, 0, 0, 255]});

で文字情報部分の背景色を表示していて(上記の場合には、赤が背景色)

chrome.browserAction.setBadgeText({text:String(3)});

という部分で文字情報を入れているようです。

0 件のコメント: