一塊兒來作chrome擴展《頁面右鍵菜單》

本文主要內容

• 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發送消息呢？

很明顯，咱們要告訴它，它纔會知道，因此這裏分兩步

1. 獲取當前活動中的tab，由於活動中的就是你看的
2. 向這個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/，有任何問題均可以聯繫我。