今回勉強するに当たり、HTML5の機能であるデスクトップ通知や、以前のChromeデスクトップ通知の方法によるサンプルプログラムなどネット上にあるいろいろな情報を参考にしたが、殆どの方法がエラーやバージョンの問題でそのままは使えなかった。ここではそういう情報もまとめつつ紹介していきたい。
まずは機能云々は置いておいて、Chromeに拡張機能、もしくはアプリと認識してもらうための雛形を作る。 認識してもらうためのファイルとして必要なのは”manifest.json”
{
"name": "Extension Sample", //拡張の名前
"version": "0.0.1", //拡張のバージョン
"manifest_version": 2, //マニフェストのバージョン．現在はVer.2
"background":{"page":"background.html"}, //バックグラウンドで動作させるページ、スクリプト呼び出し
"permissions": [ "tabs" ], //拡張の機能に対するアクセス権限の設定
"browser_action": { //動作設定
"default_icon": "icon_128.png", //拡張機能の表示に使うアイコン
"name": "This is chrome extension sample" //ホバー時の表示名
}
}
これ以外にも色々あるが、たとえばこんな感じ。
ソースコードがそのまま動きそうか動きそうでないかを判断するには、 manifest_version：2 表記があるかどうか。以前はmanifest_versionそのものがなくても動作していたため、記述がない。manifest_version：1の場合も現在のChromeでは警告が出て動かない。 他にも、background項が
"background_page":"background.html"
という表記かどうかも判別のしどころ。現在のchromeではエラーが出て動作させることが出来ない。このあたりを修正することで以前のバージョン用のソースを動かすことが可能だが、他にもアクセス権限やスクリプトの直打ち禁止などほかにも修正箇所は多いので、拡張の動作を一通り理解してから試すほうがいいと思う。
chrome拡張の挙動としては、chromeの起動時にmanifest内にあるbackgroudに記述されたスクリプトが動作するようになっている。このスクリプト内での動作に必要な権限や許可をpermission項で与える必要があるということだ。
まぁいろいろ言っても先に進まないので、まずは簡単なものから作ってみることにする
1. クリックするたびにバッジがカウントアップしていく拡張（カウント保存機能あり）
ー機能としては単純に数字が増えていくだけのもの。メールの受信数や通知のカウンタ表示に使えそう。今回は簡単化のためにアイコンのクリックでカウンタが増えるように実装する。さらに右クリックでプロパティが開くようにする（中身は実装しない）
一番左、バッジが127になってるgoogleアイコンが今回のサンプル。
まずは例のmanifest.jsonから
{
{
"name": "Badge and option Sample", //拡張の名前
"version": "0.0.1", //拡張のバージョン
"manifest_version": 2, //マニフェストのバージョン．現在はVer.2
"background":{ //バックグラウンドで動作させるページ、スクリプト呼び出し
"scripts": ["eventpage.js"], //プログラムしか動作させないのでjavascriptを呼び出す
"persistent": false //Event pagesとして動作させて省リソース化
},
"permissions": [ //拡張の機能に対するアクセス権限の設定
"tabs" //chrome.tabsへのアクセス許可
],
"browser_action": { //基本動作設定
"default_icon": "icon_128.png", //faviconに使うアイコン
"default_title": "This is Badge Sample" //faviconホバー時の表示名
},
"options_page": "options.html" //favicon右クリック時のオプションクリックで開くファイル
}
オプションページというのは下の画像のようにfaviconを右クリックして出てくるプロパティにあるもの。設定関係をまとめることが出来るが、manifestで設定しておかないと無効化されてクリックすることができない。
このmanifest.jsonで呼び出す拡張機能そのものを”eventpage.js”, オプションページを”options.html”として作成するが、今回はプログラム簡単化のためにoptions.htmlに機能は持たせない。以下代わりに置くサンプル。
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>オプションページ</title>
</head>
<body>
テスト
</body>
</html>
テストって表示されるだけ。
で、本題の”eventpage.js”だ。
var counter = localStorage.getItem("count"); //ローカルストレージから"count"という変数を取り出し、
//新しく宣言する"counter"という変数に値をコピー
chrome.browserAction.setBadgeText({text:String(counter)}); //"counter"の数字を文字列に変換し、アイコンのバッジに設定
changebgcolor(); //バッジの数に応じて色を変える関数を呼ぶ
function changebgcolor(){
if(counter<10){
chrome.browserAction.setBadgeBackgroundColor({color:[0,0,255,100]});//バッジが10以下なら青
}
else{
chrome.browserAction.setBadgeBackgroundColor({color:[255,0,0,100]});//バッジが10以上なら赤
}
}
chrome.browserAction.onClicked.addListener( //もし、ブラウザのfaviconがクリックされたら
function(tab){
counter++; //"counter"の数字に1を足して
chrome.browserAction.setBadgeText({text:String(counter)}); //"counter"の数字を文字列に変換し、アイコンのバッジに設定
changebgcolor(); //バッジの数に応じて色を変える関数を呼ぶ
localStorage.setItem("count",counter); //"counter"の数字をローカルストレージの"count"に保存
}
);
とりあえずこんな感じ。変数”counter”にカウント数を保存するのだが、この変数はChromeの終了と同時に数値が0に戻ってしまう。なのでChromeのlocalStorage.setItem()とlocalStorage.getItem()を使って値を保存したり読み込んだりする必要がある。起動時には変数の宣言と同時にlocalStorage.getItem()を使って記憶しておいたクリック数を呼び出し、クリック時にlocalStorage.setItem()を使って最新のクリック数を保存しておく。
クリックされるたびにクリック数をバッジとして表示していくが、初回起動時は表示関数が呼ばれないのでchrome.browserAction.setBadgeText()を使って意図的に表示を実行する。
changebgcolor()関数はクリック数に応じてバッジの色を変えるサンプル。たとえば通知が0のときは青、1以上になると赤にするとか用途は色々。
クリックそのものの検出はchrome.browserAction.onClicked.addListener()を使う。中でやってることはほぼ同じ。
たったこれだけでChrome拡張として動作させることが出来る。
Chrome→設定→拡張機能を開き、右上のデベロッパーボードをチェック。
“パッケージ化されていない拡張機能を読み込む”を選んで作ったファイルが入っているフォルダを選ぶと自動的に読み込まれる。
たったこれだけの作業で拡張機能を作ることが出来るようになる。まだ拡張機能で商売は出来ないようだが、今後も普及していきそうだし、自分が欲しい機能をchromeにインテグレートできるのは便利。ぜひ試してみて欲しい。
コメント