Chrome 插件開(kāi)發(fā) - 菜單選項(xiàng)

• 瀏覽器頁(yè)面右鍵菜單選項(xiàng)設(shè)置
• ① 核心代碼演示
• ② 效果展示
• ③ 詳細(xì)參數(shù)文檔
• 插件右鍵菜單點(diǎn)擊插件名跳轉(zhuǎn)主頁(yè)設(shè)置
• ① 核心代碼演示
• ② 演示效果圖

瀏覽器頁(yè)面右鍵菜單選項(xiàng)設(shè)置

右鍵菜單指的是我們?cè)跒g覽器頁(yè)面里鼠標(biāo)彈出來(lái)的菜單，我們可以在這個(gè)菜單里加入我們插件的功能選項(xiàng)，高端大氣上檔次，主要是方便我們進(jìn)行設(shè)置哈哈。

① 核心代碼演示

manifest.json 文件需要聲明下權(quán)限。

"permissions": ["contextMenus"],

我在 background.js 里添加了兩個(gè)菜單。

// 右鍵菜單管理 chrome.contextMenus.create({"type" : "radio","title" : "切換絕對(duì)路徑抓取","checked" : false,"onclick" : switch_absolute_xpath // 點(diǎn)擊時(shí)調(diào)用方法 }); chrome.contextMenus.create({"type" : "radio","title" : "切換NCC路徑抓取","checked" : true,"onclick" : switch_ncc_xpath }); // 參數(shù)會(huì)傳遞 tab 信息，通過(guò) tab.id 可以獲取用戶(hù)是在到那個(gè)頁(yè)面里點(diǎn)擊我們菜單選項(xiàng)的 function switch_absolute_xpath(info, tab){...// 然后我通過(guò) tab.id 給對(duì)應(yīng)頁(yè)面?zhèn)鬟f消息chrome.tabs.sendMessage(tab.id, {type: 'switch_absolute_xpath'}); } function switch_ncc_xpath(info, tab){...chrome.tabs.sendMessage(tab.id, {type: 'switch_ncc_xpath'}); }

② 效果展示

演示視頻：

鼠標(biāo)右鍵效果圖：

③ 詳細(xì)參數(shù)文檔

幫助文檔：

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

插件右鍵菜單點(diǎn)擊插件名跳轉(zhuǎn)主頁(yè)設(shè)置

① 核心代碼演示

manifest.json 文件加上 homepage_url，當(dāng)點(diǎn)擊 name 時(shí)就會(huì)跳轉(zhuǎn)到我們指定的地址了。

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

② 演示效果圖

喜歡的點(diǎn)個(gè)贊?吧！

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。