[好讀版]

Google 右鍵搜尋功能可以顯示選取的文字，如圖 1 所示。

圖1. Google 右鍵搜尋

這是怎麼做到的呢？ 來試著做一遍吧！

建立右鍵選單

首先，在右鍵選單中加上一個選項為『Hello, World!』。
Step 1. 在 manifest.json 設定檔中加入 context menu 功能。如下所示。

manifest.json

{
...
"background": {
"scripts": [
"src/bg/event_page.js"
],
"persistent": false
},
"permissions": [
"contextMenus"
],
...
}

**說明：**這邊是使用事件頁面為範例，可參考官方提供的 『事件頁面版本』 及 『後台頁面版本』。

Step 2. 在事件頁面建立 context menu item。如下所示。

event_page.js

function onClickHandler(info, tab) {
// to do something
}
chrome.contextMenus.onClicked.addListener(onClickHandler);

chrome.runtime.onInstalled.addListener(function (details) {
chrome.contextMenus.create({
type: 'normal',
title: 'Hello, World!',
id: 'myContextMenuItem',
contexts: ['all']
}, function () {
console.log('contextMenus are create.');
});
});

**溫馨小提醒：**如果是使用事件頁面，在建立右鍵選單時一定要給個 id。

Step 3. 建立完成後，右鍵選單就多出一個選項為 『Hello, World!』。如圖 2 所示。

圖2. 右鍵選單

顯示選取文字

建立好後，要在右鍵選單上顯示選取的文字，其實很簡單，只要在 title 裡加入 %s，就會顯示選取文字。如下所示。

event_page.js

...
chrome.runtime.onInstalled.addListener(function (details) {
chrome.contextMenus.create({
...
title: 'Hello, %s!',
...
}, function () {
// callback
});
});

來看一下結果，如圖 3 所示。

圖3. 顯示選取文字