えふすくBlog 2ndSeason: Chromeの拡張とか改造するのに必要な手順メモ③「サーニャが見てる」おぼえがき

2010年3月31日水曜日

Chromeの拡張とか改造するのに必要な手順メモ③「サーニャが見てる」おぼえがき

時刻: 16:35

ラベル: chrome, 日々

※【前提】Chromeの拡張とか改造するのに必要な手順メモ①　とりあえず開いてまた閉じて

①　ファイル配置

以下のファイルをsanyaフォルダ以下に配置する。

sanyaフォルダ
├ manifest.json　……拡張の核になるマニュフェストファイル
├ sanya_BG.html　……拡張の動作を司るJavascriptを埋め込んだhtmlファイル
├ sanya_open.png　……サーニャボタン（目が開いてるもの）
├ sanya_close.png　……サーニャボタン（目が閉じてるもの）
└ sanya_icon.png　……サーニャアイコン（拡張のインストールや管理画面に出るアイコン）

②　manifest.json

{ "name": "sanya_is_looking",　……拡張の名前（拡張配布ページにおける英字名）必須
"version": "1.0",　……バージョン数値必須 "description": "エイラ「サーニャをそんな目で見んなーっ！」",　……拡張の説明（拡張配布ページにおける注釈）推奨
"background_page": "sanya_BG.html",　……拡張機能のプロセスで実行されるJavascriptを埋め込んだHTMLファイル）
"browser_action": { "default_icon": "sanya_close.png",　……ブラウザアクションにおける最初のアイコン（眼を閉じた状態）
"default_title": "サーニャが見てる"　……ブラウザアクションにおける最初のマウスオーバーテキスト
},
"icons": { "16": "sanya_icon.png", "32": "sanya_icon.png", "64": "sanya_icon.png", "128": "sanya_icon.png" },……アイコン（拡張配布時）推奨
"permissions": [ "tabs" ] }

詳しい中身はChrome Extensions API リファレンスの当該ページ参照。　iconの項目は正確には

"icons": { "48": "sanya_icon.png",……48×48のアイコン（拡張機能の管理ページで使用）
"128": "sanya_icon.png" ……128×128のアイコン（拡張機能のインストール時に使用）
},

ということらしい。記述がおかしいのはコピペ元がおかしかったから。
　permissionsは拡張機能がブラウザのどこの部分に作用、または連動するかを記述する。
　今回の場合はタブの更新イベントを読みとる必要があるので"tabs"は必須になる。

③　sanya_BG.html

HTMLファイルだけれども、実際にはJavascriptを配置している部分

<html>
 <head>

//Javascriptの領域//
<script type="text/javascript">



//目の開閉フラグ（0……閉じてる,1……開いてる）//
eyes=0;

//目の開閉を関数化//
function closing_eye(tabid){
 chrome.browserAction.setIcon({path:'sanya_close.png', tabId:tabid})
}
function openning_eye(tabid){
 chrome.browserAction.setIcon({path:'sanya_open.png', tabId:tabid})
}

//更新中に目を開く・更新していないときは閉じる//
chrome.tabs.onUpdated.addListener(function(tabid, info){
 if (info.status === 'loading') {
  openning_eye(tabid);
  }
  else
  {
  closing_eye(tabid);
 }
}
);

//ボタンをクリックすると目を開く・閉じる//
chrome.browserAction.onClicked.addListener(function(tab){
 if (eyes == 0) {
  openning_eye(tab.id);
  eyes = 1;
  }
  else
  {
  closing_eye(tab.id);
  eyes = 0;
 }
}
);
</script>
</head>
<body>Test</body>
</html>