1. 程式人生 > 其它 >Chrome外掛開發之新增B站搜尋以及萌娘百科選單

Chrome外掛開發之新增B站搜尋以及萌娘百科選單

技術標籤:chromechrome

目錄

建立目錄

編寫選單新增功能


效果:選中一段文字後右鍵選單出現提示

建立目錄

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站搜尋以及萌娘百科啦~~