Chrome外掛開發之新增B站搜尋以及萌娘百科選單
阿新 • • 發佈:2021-01-18
目錄
效果:選中一段文字後右鍵選單出現提示
建立目錄
acg_chrome_plugin_beta_v0.0.1 這個是我建立的目錄名稱,在目錄中建立manifest.json 並寫入以下資料 , 其中permissions這個屬性非常關鍵,表明了外掛中是否開啟右鍵選單的許可權。
{ "manifest_version": 2, "name":"AcgTools", "version":"0.0.1", "description":"一款整合二次元網站、資源搜尋、CosPlay美圖嗅探的工具 - エル・プサイ・コングルゥ(シュタインズ・ゲート) Author:termite.fun", "icons": { "16": "imgs/icon.png", "48": "imgs/icon.png", "128": "imgs/icon.png" }, "chrome_url_overrides": { "newtab": "html/newtab1.html" }, "permissions": ["contextMenus"], "background": { "scripts": ["js/background.js"] } }
編寫選單新增功能
在 根目錄/js 目錄下建立background.js 並加入以下程式碼
這個程式碼是從git上clone下來的,然後加以閱讀後修改終於得知如果要設定多級選單需要加入 id 以及 parentid這兩個屬性並對應
chrome.contextMenus.create({ title: "BiliBili 搜尋 ‘%s’", contexts: ['selection'], onclick: function(params) { // 注意不能使用location.href,因為location是屬於background的window物件 chrome.tabs.create({url: 'https://search.bilibili.com/all?keyword=' + encodeURI(params.selectionText)}); } }) chrome.contextMenus.create({"title": "萌娘百科 搜尋 ‘%s’",contexts:['selection'], "id": "parent", onclick: function(params) { chrome.tabs.create({url: 'https://mzh.moegirl.org.cn/' + encodeURI(params.selectionText)}); }},); chrome.contextMenus.create( {"title": "α世界線", "parentId": "parent", "id": "child1"}); chrome.contextMenus.create( {"title": "β世界線", "parentId": "parent", "id": "child2"}); chrome.contextMenus.create( {"title": "β世界線", "parentId": "child2", "id": "child3"}); chrome.contextMenus.create({"title": "Radio 1", "type": "radio", "id": "radio1"}); chrome.contextMenus.create({"title": "Radio 2", "type": "radio", "id": "radio2"}); ;
好了,大功告成~ 以後可以在任意頁面進行b站搜尋以及萌娘百科啦~~