17/06/27

Google Chromeの拡張機能を作ってみる4~コンテキストメニューに残り時間を表示する~


今回はchrome拡張機能でcontext menu(右クリックで表示されるメニュー)を
実装していきます。
工夫次第では拡張機能の利便性が向上します

 

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

コンテキストメニューを作成

とりあえず、この章のソースコード
 
コンテキストメニューを利用するには権限が必要なので、manifest.jsonに権限を付与します

//manifest.json
"permissions":[
    "storage",
+   "contextMenus"
]

次にコンテキストメニューを実装していきます。
コンテキストメニューはバックグラウンドで作成します。

//background.js
// 0行目
var timer_store;
var badge_timeout;
+ var menu_id;
+ var menu_child_id;
+ set_up();

—
—

//行末に追記
+ function set_up(){
+   // コンテキストメニューを作成する
+   // 親メニューを作成する
+   menu_id = chrome.contextMenus.create({
+       "title": "a_timer",
+       "type" : "normal",
+       "contexts" : ["all"]
+   })
+   // 子メニューを作成する
+   menu_child_id = chrome.contextMenus.create({
+       "title": "0:0:0",
+       "type" : "normal",
+       "contexts" : ["all"],
+       "parentId": menu_id
+   })
+ }

コンテキストメニューを作るにはchrome.contextMenusを利用します。
titleプロパティでメニューに表示される文字を指定します。
typeプロパティでコンテキストメニューのタイプを指定します。
注意点としてコンテキストメニューのタイプとして使えるものが”normal”, “checkbox”, “radio”, “separator” と限られています。
contextsプロパティでどの要素の上でコンテキストメニューを表示するのかを指定します。
parentIdで必要であれば親を指定することでメニューを入れ子にできます。

 

 

参考記事
chrome.contextMenus – Google Chrome

コンテキストメニューにタイマーを残り時間を表示する

とりあえず、この章のソースコード
 

コンテキストメニューをもう少し利便性のあるものにしたいので、
タイマーの残り時間を表示できるようにしましょう。

    // 62行目あたり
    // バッジ部分をホバーした時に出てくるテキストにも残り時間を表示する
    chrome.browserAction.setTitle({title: h + ":" + m + ":" + s});

        // コンテキストメニューをアップデート
+       chrome.contextMenus.update(menu_child_id,{
+           "title": h + ":" + m + ":" + s
+       });

—
—
    //86行目あたり
    // バッジ部分をホバーした時にでてくるテキスト
    chrome.browserAction.setTitle({title: "sample_timer"});
    // バッジのタイトルを初期化
    chrome.browserAction.setBadgeText({text:""});
    // コンテキストメニューを初期化
+   chrome.contextMenus.update(menu_child_id,{
+       "title": "0:0:0"
+   });

バックグラウンドのバグを修正する

今の状態だと、拡張機能を有効無効を切り替えた時や、リロードした時など
正しくうごかないので、バックグラウンドを読み込まれた時に、
タイマーの情報がlocalstorageにあればタイマーを起動するようにします。

//background.js
//108行目あたり
//子メニューを作成する
    menu_child_id = chrome.contextMenus.create({
        "title": "0:0:0",
        "type" : "normal",
        "contexts" : ["all"],
        "parentId": menu_id
    });

    // 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();
+           }
+       }
+   })

今回はここまで。
次回はこちら

 

スポンサーリンク

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

youya66

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

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