2010年3月31日水曜日

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>

使ったイベント類  


1.browserAction.setIcon  ブラウザアクション(右上のボタン類)のアイコンに画像を設定する。

chrome.browserAction.setIcon({path:'sanya_close.png', tabId:tabid})
2.tabs.onUpdated  タブが更新されたときに発生するイベント、更新されたタブのidとその状態を示す文字列(“loading” もしくは “complete”)が渡される。

chrome.tabs.onUpdated.addListener(function(tabid, info){……
3.browserAction.onClicked  ブラウザアクション(右上のボタン類)のアイコンをクリックしたときに発生するイベント。その時選択状態にあるtabオブジェクトが渡される。

chrome.browserAction.onClicked.addListener(function(tab){……
 個人的にはアイコン切り替えの関数は引数いらないような気もするんだけどなぜか動かなかったので念のため。


このエントリーをはてなブックマークに追加

2010年3月28日日曜日

あの「中止ボタンがサーニャに見えて困る」をようやくChromeに移植しました


  昨日の勢いで作ってしまいました。わかってしまえば結構簡単なもので。

 ただ中止ボタンはChromeにはありませんしそっちを弄る方法までは手が届かないので、サーニャボタンを設置してFirefox版同様に、ページ読み込み時に目が開くようにしました。ということで名称も「中止ボタンが~」が抜けています。
 実際に実装してわかったことなんですが、書き込みを要するような処理を除いてほとんどのページでは読み込みが一瞬で終わってしまうため、瞬き程度にしか目が開かないことが多いです。
 なのでボタンとして余っていたクリックで目の開閉が選べるようにしました(読み込むと閉じます)

 ダウンロードはこちらからどうぞ。

このエントリーをはてなブックマークに追加