【作者主頁】：小魚神1024
【擅長領域】：JS逆向、小程序逆向、AST還原、驗證碼突防、Python開發、瀏覽器插件開發、React前端開發、NestJS后端開發等等
chrome.contextMenus 允許開發者向瀏覽器的右鍵菜單添加自定義項。
在使用 chrome.contextMenus 之前，必須在 manifest.json 中聲明權限：
{"manifest_version": 3,"name": "chrome.contextMenus","description": "chrome.contextMenus API 基礎用法","version": "1.0","action": {"default_popup": "popup.html","default_icon": "icons/icon128.png"},"background": {"service_worker": "background.js"},"permissions": ["contextMenus"],"icons": {"16": "icons/icon16.png","48": "icons/icon48.png","128": "icons/icon128.png"}
}
在 manifest.json 聲明 contextMenus 權限。
1、chrome.contextMenus.create
可以通過 chrome.contextMenus.create 進行創建右鍵菜單，如下：
chrome.runtime.onInstalled.addListener(function () {chrome.contextMenus.create({id: "1",title: "右鍵菜單選擇一",});
});
看看效果吧。
chrome.contextMenus.create 有哪些參數可配置呢？
- id：菜單項的唯一標識符
- title：菜單名稱
- type：菜單類型，包括：“normal”（默認） | “checkbox”（多選） | “radio”（單選） | “separator” （分隔符）
- contexts：菜單項出現的上下文，包括：
"all": 上下文菜單項將在所有可用的上下文中顯示。
"page": 表示上下文菜單項只在常規網頁的空白處（非鏈接、非媒體等）上點擊時顯示。
"frame": 表示上下文菜單項只在網頁中的 iframe 上點擊時顯示。
"selection": 表示上下文菜單項只在用戶選中文本時顯示。
"link": 表示上下文菜單項只在鏈接上點擊時顯示。
"editable": 表示上下文菜單項只在可編輯區域（如文本框）點擊時顯示。
"image": 表示上下文菜單項只在圖像上點擊時顯示。
"video": 表示上下文菜單項只在視頻上點擊時顯示。
"audio": 表示上下文菜單項只在音頻元素上點擊時顯示。
"launcher": （已棄用）原先用于Chrome應用的啟動器上的菜單。
"action": 表示上下文菜單項只在擴展的操作按鈕（地址欄旁的圖標）上點擊時顯示。
- parentId：父級菜單唯一標識
- checked：當 type 為多選或單選時，菜單是否被選中
- enabled：菜單是否被禁用
- documentUrlPatterns：指定上下文菜單項應該在哪些文檔頁面的 URL 中顯示
- targetUrlPatterns：匹配觸發上下文菜單項顯示的鏈接的 URL
其中：id、title、parentId、checked、enabled 都是比較容易理解的。就不一一舉例了。
假設我們希望當選中文字右鍵時，菜單按分類展示，比如：一級菜單：水果類；二級菜單：蘋果、梨子、西瓜
可以如下創建菜單：
chrome.runtime.onInstalled.addListener(function () {// 定義菜單const menuList = [{id: "1",title: "水果類",children: [{ id: "1-1", title: "蘋果", parentId: "1" },{ id: "1-2", title: "梨子", parentId: "1" },{ id: "1-3", title: "西瓜", parentId: "1" },],},];// 創建菜單function createMenu(menu) {chrome.contextMenus.create({id: menu.id,title: menu.title,contexts: ["selection"],parentId: menu.parentId,},function () {if (Array.isArray(menu.children)) {menu.children.forEach(createMenu);}});}menuList.forEach(createMenu);
});定義了一個菜單列表 menuList ，通過遞歸 createMenu 創建菜單。同時，我們將 contexts 設置了 selection ，即在選中文本時才顯示菜單。
效果如下：
documentUrlPatterns：表示哪些網址下可以看到右鍵菜單。
假如：我們只想讓百度界面才能看到菜單，可以將 documentUrlPatterns 設置如下：
documentUrlPatterns 支持通配符，*： 匹配任何字符數量的任何字符序列。
targetUrlPatterns：它的作用和 documentUrlPatterns 類似，都是限制哪些內容可以看到菜單的，區別是：
- documentUrlPatterns 是針對網頁的
- targetUrlPatterns 是針對頁面上的某些元素（如鏈接、圖片）的 URL 匹配
2、chrome.contextMenus.update
更新菜單，除了 id 不能更新外，其他創建選項均可以更新，比如：更新菜單標題 title
chrome.contextMenus.create({id: "1",title: "更新菜單",});// 更新菜單function updateMenu(id, title) {chrome.contextMenus.update(id, {title,});}updateMenu("1", "更新菜單2");
3、chrome.contextMenus.remove
移除指定菜單項
chrome.contextMenus.remove("id");
這個 API 比較簡單，就不單獨舉例了。
4、chrome.contextMenus.removeAll
移除所有菜單項
chrome.contextMenus.removeAll()
代碼地址：傳送門
總結
- 使用右鍵菜單要開啟權限：contextMenus
- chrome.contextMenus.create：創建菜單
- chrome.contextMenus.update：更新菜單
- chrome.contextMenus.remove：移除菜單
- chrome.contextMenus.removeAll：移除全部菜單
創作不易，動動您發財的小手，點贊關注一波，支持我創作更多對您有幫助的文章！
？)
)
)
)
