① ファイル配置
以下のファイルをsanyaフォルダ以下に配置する。
sanyaフォルダ
├ manifest.json ……拡張の核になるマニュフェストファイル
├ sanya_BG.html ……拡張の動作を司るJavascriptを埋め込んだhtmlファイル
├ sanya_open.png ……サーニャボタン（目が開いてるもの）
├ sanya_close.png ……サーニャボタン（目が閉じてるもの）
└ sanya_icon.png ……サーニャアイコン（拡張のインストールや管理画面に出るアイコン）
② manifest.json
{ "name": "sanya_is_looking", ……拡張の名前（拡張配布ページにおける英字名）必須詳しい中身はChrome Extensions API リファレンスの当該ページ参照。 iconの項目は正確には
"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" ] }
"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>
使ったイベント類
１．browserAction.setIcon ブラウザアクション（右上のボタン類）のアイコンに画像を設定する。
chrome.browserAction.setIcon({path:'sanya_close.png', tabId:tabid})２．tabs.onUpdated タブが更新されたときに発生するイベント、更新されたタブのidとその状態を示す文字列（“loading” もしくは “complete”）が渡される。
chrome.tabs.onUpdated.addListener(function(tabid, info){……３．browserAction.onClicked ブラウザアクション（右上のボタン類）のアイコンをクリックしたときに発生するイベント。その時選択状態にあるtabオブジェクトが渡される。
chrome.browserAction.onClicked.addListener(function(tab){……個人的にはアイコン切り替えの関数は引数いらないような気もするんだけどなぜか動かなかったので念のため。
0 件のコメント:
コメントを投稿