本文主要內容
- contextMenus的設置
- 打開權限
- 創建菜單
- 點擊菜單
- background script向content script發送消息
1. contextMenus的設置
1.1 打開權限
contextMenus同其它功能一樣，都需要在permissions里指定開啟，所以非常簡單，在項目的manifest.json文件的permissions中加上contextMenus
"permissions": [
"contextMenus"
]
這樣就可以在background script里使用contextMenus了
1.2 創建右鍵菜單
首先需要明確，創建菜單以及菜單的事件都是由background script操作的，不是content script，不要被菜單在頁面上的現象蒙蔽了。所以，在manifest.json里，一定要配置background scripts(這是重點，勾上，要考)
在background script里，創建菜單代碼：
chrome.contextMenus.create({
type: 'normal',
title: 'Menu Demo',
id: 'menuDemo',
contexts: ['all'],
onclick: genericOnClick
}, function () {
console.log('contextMenus are create.');
});
create方法第一個參數是菜單信息對象，具體可以查看：https://developer.chrome.com/extensions/contextMenus
這里主要提的是title，id，onclick
title 很顯示就是menu的名字
id 當然就是它的ID，點擊后要判斷點的是誰，就得靠它了，所以名字好好取
onclick 點擊事件，跟的就是處理的方法名，如genericOnClick，就是對應的一個function
1.3 點擊菜單
使用create參數的onclick或是監聽事件方法都可以對菜單的點擊事件進行監聽，它們的回調函數都會帶兩個參數，info和tabs
function genericOnClick(info, tab) {
// do something.
}
info 是一個字典數據，包含頁面及菜單的一些信息，以及在頁面上選中的內容文本
{
editable: false
frameId: 0
menuItemId: "menuDemo"
pageUrl: "https://www.colorgamer.com/"
selectionText: "colorgamer"
}
信息一目了然
tab 同樣是一個字典，包含頁面比較具體的一些信息，如tab id等信息，頁面寬度等，具體可以自行查看，這里我們將用到tab的id。
那么菜單有了，事件也有了，接下來的問題就是，通過contextMenus拿到的信息，執行的操作都是在background script里的，那如果傳回content script里呢？因為很多事情還是要在頁面上處理，而不是后台處理。
在前面一篇一起來做chrome擴展《AJAX請求》，我們說過content script如果向background script發送消息，其實倒過來也是成立的，只是有一點（重點，要考）
每個extension的后台都只有一個，而tabs有無數個，所以，每個tabs向background script發送消息不需要指定什么就能送達，而倒過來后，background script要向哪個tab發送消息呢？
很明顯，我們要告訴它，它才會知道，所以這里分兩步
- 獲取當前活動中的tab，因為活動中的就是你看的
- 向這個tab發送消息
代碼如下：
// 向該tab發送消息
chrome.tabs.sendMessage(tab.id, {'contextMenuId': info.menuItemId, 'info': info}, function(response) {});
發送消息，之前我們使用的是chrome.extension.sendMessage，這里使用chrome.tabs.sendMessage，很明顯，是向指定的tab發送，sendMessage方法有三個參數
- 第一個參數是tab的ID
- 第二個參數是發送的數據對象
- 第三個就是回調函數了，有什么要傳回來的，都是通過它進行
content script接收消息和之前一樣
chrome.extension.onMessage.addListener(function(request, _, response) {
console.log(request);
});
request即是sendMessage的第二個參數的數據對象，response當然就是回調函數了。
好了，關於Chrome Extension的contextMenus的使用就這些內容，關於contextMenus更多的信息可以參考官方文檔。
謝謝您的閱讀，本文同時發布於我的個人網站：http://www.colorgamer.com/index.php/archives/39/，有任何問題都可以聯系我。