Chrome 插件開發 - 菜單選項

• 瀏覽器頁面右鍵菜單選項設置
• ① 核心代碼演示
• ② 效果展示
• ③ 詳細參數文檔
• 插件右鍵菜單點擊插件名跳轉主頁設置
• ① 核心代碼演示
• ② 演示效果圖

瀏覽器頁面右鍵菜單選項設置

右鍵菜單指的是我們在瀏覽器頁面里鼠標彈出來的菜單，我們可以在這個菜單里加入我們插件的功能選項，高端大氣上檔次，主要是方便我們進行設置哈哈。

① 核心代碼演示

manifest.json 文件需要聲明下權限。

"permissions": ["contextMenus"],

我在 background.js 里添加了兩個菜單。

// 右鍵菜單管理 chrome.contextMenus.create({"type" : "radio","title" : "切換絕對路徑抓取","checked" : false,"onclick" : switch_absolute_xpath // 點擊時調用方法 }); chrome.contextMenus.create({"type" : "radio","title" : "切換NCC路徑抓取","checked" : true,"onclick" : switch_ncc_xpath }); // 參數會傳遞 tab 信息，通過 tab.id 可以獲取用戶是在到那個頁面里點擊我們菜單選項的 function switch_absolute_xpath(info, tab){...// 然后我通過 tab.id 給對應頁面傳遞消息chrome.tabs.sendMessage(tab.id, {type: 'switch_absolute_xpath'}); } function switch_ncc_xpath(info, tab){...chrome.tabs.sendMessage(tab.id, {type: 'switch_ncc_xpath'}); }

② 效果展示

演示視頻：

鼠標右鍵效果圖：

③ 詳細參數文檔

幫助文檔：

create -helpinteger Chrome.contextMenus.create(object createProperties, function callback) 創建一個新的右鍵菜單項。注意：如果在創建的過程中出現錯誤，會在回調函數觸發后才能捕獲到，錯誤詳細信息保存在Chrome.extension.lastError中?！緟怠?createProperties ( object )type ( optional enumerated string ["normal", "checkbox", "radio", "separator"] )右鍵菜單項的類型。默認為“normal”。title ( optional string )右鍵菜單項的顯示文字；除非為“separator”類型，否則此參數是必須的。如果類型為“selection”，您可以在字符串中使用%s顯示選定的文本。例如，如果參數的值為 "Translate '%s' to Pig Latin"，而用戶還選中了文本“cool”，那么顯示在菜單中的將會是 "Translate 'cool' to Pig Latin"。checked ( optional boolean )Checkbox或者radio的初始狀態：true代表選中，false代表未選中。在給定的radio中只能有一個處于選中狀態。contexts ( optional array of string ["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"] )右鍵菜單項將會在這個列表指定的上下文類型中顯示。默認為“page”。onclick ( optional function )當菜單項被點擊時觸發的函數。【參數】info ( OnClickData )右鍵菜單項被點擊時相關的上下文信息。tab ( Tab )右鍵菜單項被點擊時，當前標簽的詳細信息。parentId ( optional integer )右鍵菜單項的父菜單項ID。指定父菜單項將會使此菜單項成為父菜單項的子菜單。documentUrlPatterns ( optional array of string )這使得右鍵菜單只在匹配此模式的url頁面上生效（這個對框架也適用）。詳細的匹配格式見：模式匹配頁面。targetUrlPatterns ( optional array of string )類似于documentUrlPatterns，但是您可以針對img/audio/video標簽的src屬性和anchor標簽的href做過濾。enabled ( optional boolean )啟用或者禁用此菜單項，啟用為true，禁用為false。默認為true。 callback ( optional function )在創建完菜單項后觸發。如果創建過程中有錯誤產生，其詳細信息在Chrome.extension.lastError中。

插件右鍵菜單點擊插件名跳轉主頁設置

① 核心代碼演示

manifest.json 文件加上 homepage_url，當點擊 name 時就會跳轉到我們指定的地址了。

"name": "Xpath Robot", "homepage_url": "https://lanzao.blog.csdn.net/",

② 演示效果圖

喜歡的點個贊?吧！

總結

以上是生活随笔為你收集整理的Chrome 插件开发-右键菜单开发实战演示，浏览器页面右键菜单选项设置，插件右键菜单点击插件名跳转主页设置的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。