Chrome Extensions 筆記 – C02 – Budget Manager Part 4 ContextMenu

繼續增加功能

Chrome Extension 分成兩種執行模式

• Backgound Page 永遠執行
• Event Page 則只在請求時執行

ContextMenu 需要在 manifest.json 設定 background ，並設定為 persistent 為 false ，並在 permissions 裡面增加 contextMenus

    "background" :{
        "scripts" :["eventPage.js"],
        "persistent" : false
    },

    "permissions" : [
        "storage",
        "notifications",
        "contentMenus"
    ]

在 eventPage.js 創建 contextMenu

var contextMenuItem = {
    "id" : "spendMoney",
    "title" : "spendMoney",
    "contexts" : ["selection"]
};
chrome.contextMenus.create(contextMenuItem);

執行時，只要選取文字，就會看到該 Chrome Extension 的 contextMenu

contextMenus 需要更進一步使用 Click.AddListener 來處理事件 :

chrome.contextMenus.onClicked.addListener(function(clickData){
    if(clickData.selectionText){
        //....
    }
}

var contextMenuItem = {
    "id" : "spendMoney",
    "title" : "spendMoney",
    "contexts" : ["selection"]
};

chrome.contextMenus.create(contextMenuItem);

chrome.contextMenus.onClicked.addListener(function(clickData){
    if(clickData.menuItemId=="spendMoney" && clickData.selectionText){
        if(isInt(clickData.selectionText)){
            chrome.storage.sync.get(['total','limit'],function(budget){
                var newtotal = 0;
                if(budget.total){
                    newtotal += parseInt(budget.total);
                }
                newtotal += parseInt(clickData.selectionText);
                chrome.storage.sync.set({'total' : newtotal},function(){
                    if(newtotal >= budget.limit){
                        var notifOptions = {
                            type : 'basic',
                            iconUrl : 'icon48.png',
                            title : 'Limit reached',
                            message : "you're reached your limit!"
                        }
                        chrome.notifications.create('limitNotif',notifOptions);
                    }
                })
            })
        }
    }
})


function isInt(value) {
    return !isNaN(value) && 
           parseInt(Number(value)) == value && 
           !isNaN(parseInt(value, 10));
}

結果，已經可以根據事件觸發計算功能