本文主要內容

• 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

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"
}

資訊一目瞭然

tabs 同樣是一個字典，包含頁面比較具體的一些資訊，如tab資訊，頁面寬度等，具體可以自行檢視，因為和本文的關係並不大，所以就不展開了。

那麼選單有了，事件也有了，接下來的問題就是，通過contextMenus拿到的資訊，執行的操作都是在background script裡的，那如果傳回content script裡呢？因為很多事情還是要在頁面上處理，而不是後臺處理。

在前面一篇一起來做chrome擴充套件《AJAX請求》，我們說過content script如果向background script傳送訊息，其實倒過來也是成立的，只是有一點（重點，要考）

每個extension的後臺都只有一個，而tabs有無數個，所以，每個tabs向background script傳送訊息不需要指定什麼就能送達，而倒過來後，background script要向哪個tab傳送訊息呢？

很明顯，我們要告訴它，它才會知道，所以這裡分兩步

1. 獲取當前活動中的tab，因為活動中的就是你看的
2. 向這個tab傳送訊息

程式碼如下：

// 獲取活動中的tab
chrome.tabs.query({active: true, currentWindow: true}, function(tabs){
    // 向該tab傳送訊息
    chrome.tabs.sendMessage(tabs[0].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更多的資訊可以參考官方文件。