17/07/09

Google Chromeの拡張機能を作ってみる5~タイマーが終了したら通知する~


chromeで拡張機能を作成するの最終パートになります。
今回は通知機能を実装していきます。
簡単なタイマーを作っていますが、通知があるのと利便性がぐっと増します。

 

chrome拡張機能を作成の記事一覧
基礎知識
ポップアップの表示とjsのデバック方法
タイマーの情報を管理とバッジに表示する
コンテキストメニューを表示する
タイマーが終了したら通知する

 
とりあえず、今回のソースコード

権限の付与

まずは権限を付与する必要があるので、manifest.jsonを変更します

//manifest.json

    //13行目
    "permissions":[
        "storage",
        "contextMenus",
+       "notifications"
    ]

これで拡張機能に通知機能を利用できるようになりました。

通知を発行する

次にbackground.jsに通知を発行する処理を書いていきます。
タイマーが0になったら通知を発行する処理が以下になります。

//background.js

    //5行目あたり
+   var timer_timeout_id;
====
====
    //行末に追加
+   // 残り時間が0だったら通知を発行する
+   function set_up_notification(_date){
+       var date = new Date(_date);
+       var delay;
+
+       // setTimeoutを設定   
+       var now = new Date();
+       delay = date.getTime() - now.getTime();
+
+       // 通知をセット
+       if(delay > 0){
+       timer_timeout_id = setTimeout(post_notification, delay);
+       }
+   }
+
+   // 通知を発行するためのchrome api
+   function post_notification(){
+       var _id = "timer-id";
+       chrome.notifications.create(
+           _id,
+           {
+               type: "basic",
+               title: "TIME IS UP",
+               message: "countdown finished",
+               iconUrl: "images/timer.png",
+               requireInteraction: true
+           }
+       );
+   }

chrome.notifications.createについてはこちらの公式ドキュメントをみてください。

 

そしてこのset_up_notification関数を実行するタイミングは、
ポップアップを閉じた時と、background.jsが読み込まれる時になります。
また、ポップアップが開からた時、通知発行を中止します。

//background.js

    //12行目あたり
    //storageにデータをセット
    chrome.storage.local.set({"timer":json}, function(){
        console.log("saved")
    });

    // タイマーの情報
    // これを元に、バッジの残り時間や通知の時間をセットする
    timer_store = _data;

+   // 通知をセットする
+   set_up_notification(parse_data)

====
====
    //80行目あたり
    function clear_timeout(){
        // ループ処理を停止
+       window.clearTimeout(badge_timeout);
        window.clearTimeout(timer_timeout_id);
        init_text();
    }
====
====
    //119行目あたり
    // backgroundが読み込まれた時にタイマーがあれば起動する
    chrome.storage.local.get("timer",function(res){
        if(res.hasOwnProperty("timer")){
            var parse_data = JSON.parse(res.timer);
            if(parse_data){
+               //通知をセットする
+               set_up_notification(parse_data)
                    update_badge();
            }
        }
    })

確認

実際に以下のような画面が出てくれば完成です。
 

 
以上でchromeの拡張機能作成編を終わります。
基礎的な事でしたが、参考になれば幸いです。
最後までありがとうございました。

 

スポンサーリンク

メールアドレスが公開されることはありません。

youya66

だらけとびびり、それとちょっぴりのてきとーさ。

コアラになってだらだらしながら愛されたい。