上下文選單項
此使用者介面選項向瀏覽器的右鍵選單新增一個或多個項。右鍵選單是使用者在網頁上右鍵單擊時出現的選單。標籤頁和書籤也可以有右鍵選單，可以透過 menus API 訪問。
您可以使用此選項來公開與特定瀏覽器或網頁上下文相關的特性。例如，您可以顯示當用戶單擊影像時開啟圖形編輯器的特性，或者當頁面部分內容被選中時提供儲存頁面內容的特性。您可以向選單新增純文字選單項、複選框項、單選按鈕組和分隔符。一旦使用 menus.create 添加了右鍵選單項，它就會顯示在所有瀏覽器標籤頁中，但您可以透過使用 menus.remove 刪除它來隱藏它。
支援的上下文的完整列表可在 menus.ContextType 中找到，其中包含網頁以外的上下文，例如瀏覽器 UI 中的書籤項。例如，“在容器標籤頁中開啟書籤”擴充套件程式添加了一個選單項，允許使用者在新容器標籤頁中開啟書籤 URL。
您還可以使用 menus.overrideContext 來覆蓋擴充套件程式頁面（如自定義側邊欄和彈出視窗）中顯示的右鍵選單，以便使用標籤頁或書籤右鍵選單代替預設的右鍵選單。當您的擴充套件程式提供自定義的標籤頁或書籤表示時，這是一個有用的方法。選單會自動包含已定義標籤頁或書籤右鍵選單項的任何其他擴充套件程式的選單項。您可以選擇是否包含預設的右鍵選單項。隱藏預設項可以讓擴充套件程式完全控制渲染的原生右鍵選單中顯示的項，如下圖所示的 Tree Style Tab 擴充套件程式。
指定右鍵選單項
您可以使用 contextMenus API 以程式設計方式管理右鍵選單項。但是，您需要在 manifest.json 中請求 contextMenus 許可權才能利用該 API。
"permissions": ["contextMenus"]
然後，您可以在擴充套件程式的後臺指令碼中新增（以及更新或刪除）右鍵選單項。要建立選單項，您需要指定其 ID、標題以及它應該出現在哪些上下文中。
browser.contextMenus.create(
{
id: "log-selection",
title: browser.i18n.getMessage("contextMenuItemSelectionLogger"),
contexts: ["selection"],
},
onCreated,
);
然後，您的擴充套件程式會監聽選單項的點選事件。關於點選項、發生點選的上下文以及發生點選的標籤頁的詳細資訊可以用來呼叫相應的擴充套件程式功能。
browser.contextMenus.onClicked.addListener((info, tab) => {
switch (info.menuItemId) {
case "log-selection":
console.log(info.selectionText);
break;
// …
}
});
圖示
有關如何建立用於右鍵選單的圖示的詳細資訊，請參閱 Acorn Design System 文件中的 圖示設計。
示例
GitHub 上的 webextensions-examples 儲存庫包含兩個實現右鍵選單項的擴充套件示例：
- menu-demo 向瀏覽器右鍵選單添加了多個項。
- context-menu-copy-link-with-types 向連結添加了一個右鍵選單項，該項將連結 URL 以純文字和富 HTML 格式複製到剪貼簿。