Context Menu API

前一篇文章探討了 Action API , 這篇來講一下 Context Menu , 我把它視為主選單, 說穿了其實就是滑鼠右鍵點擊後, 你想呈現哪一些選單給使用者使用, 用法上也不會太難~

範例程式碼. , 簡單幾行就可以建立一個表單了.

  chrome.contextMenus.create({  
        id: 'parent',
        type: 'normal',
        title: '你選擇了',
        contexts: ['all']
    });  

建立一個 obj 屬性有

id : 需要唯一

type: normal 預設為 normal

title: 要顯示的文字

contexts : 要設定的權限. all 為全部都要

chrome.runtime.onInstalled.addListener(async () => {
  chrome.contextMenus.create({  
        id: 'parent',
        type: 'normal',
        title: '你選擇了',
        contexts: ['all']
    });  
}

這樣就可以在 extension 安裝時. 把 主選單給載入進去

如果要做一個母子選單的話

chrome.runtime.onInstalled.addListener(async () => {
  chrome.contextMenus.create({  
        id: 'parent',
        type: 'normal',
        title: '你選擇了',
        contexts: ['all']
    });  

    chrome.contextMenus.create({  
        id: 'child1',
        title: "I am child1",
        contexts: ['all'],
        parentId: 'parent',
        type: 'normal'
    });  
     
}

在選項中再多一個 parentId , 看要再接再哪一個選單 下面. 填入 id即可.

chrome.runtime.onInstalled.addListener(async () => {
  chrome.contextMenus.create({  
        id: 'parent',
        type: 'normal',
        title: '你選擇了',
        contexts: ['all']
    });  

    chrome.contextMenus.create({  
        id: 'child1',
        title: "I am child1",
        contexts: ['all'],
        parentId: 'parent',
        type: 'normal'
    }); 
 
   chrome.contextMenus.create({  
        id: 'child4',
        title: "I am child4",
        contexts: ['all'],
        parentId: 'parent',
        type: 'separator'
    }); 
         chrome.contextMenus.create({  
        id: 'child5',
        title: "I am child5",
        contexts: ['all'],
        parentId: 'parent',
        type: 'radio'
    });  
    chrome.contextMenus.create({  
        id: 'child6',
        title: "I am child6",
        contexts: ['all'],
        parentId: 'parent',
        type: 'radio'
    });  
}

如果要做分隔線的效果. 把 type: ‘separator’ 改為這個即可, 最後效果如圖

Reference :

https://developer.chrome.com/docs/extensions/reference/contextMenus/