建構內容選單

針對滑鼠替代點擊 (通常稱為右鍵) 的方式，會顯示內容選單。如要建立內容選單，請先將 "contextMenus" 權限新增至 manifest.json 檔案。

manifest.json:

  "permissions": [
    "contextMenus"
  ],

如果想在選單項目旁顯示圖示，也可以選用 "icons" 鍵。在本例中，「全域 Google 搜尋」的選單項目擴充功能會使用 16x16 圖示。

包含 16x16 圖示的內容選單項目。

本例的其餘部分擷取自全球 Google 搜尋內容選單範例，這個範例提供了多個內容選單選項。如果擴充功能包含多個內容選單，Chrome 會自動將這些擴充功能收合為單一上層選單，如下所示：

圖 4：內容選單和巢狀子選單。

這個範例顯示如何在 擴充功能 Service Worker 中呼叫 contextMenus.create()。系統從 locales.js 檔案匯入子選單項目。然後 runtime.onInstalled 對其進行疊代。

service-worker.js：

const tldLocales = {
  'com.au': 'Australia',
  'com.br': 'Brazil',
  ...
}

chrome.runtime.onInstalled.addListener(async () => {
  for (let [tld, locale] of Object.entries(tldLocales)) {
    chrome.contextMenus.create({
      id: tld,
      title: locale,
      type: 'normal',
      contexts: ['selection'],
    });
  }
});