user js 用戶自定義js 油猴腳本 百度搜索旁邊添加谷歌搜索按鈕 方便搜索切換

用戶自定js（運行在客戶端的javaScript）  谷歌瀏覽器的話需要在有油猴插件的環境中運行！

油猴可以百度搜索下載。

以下是一個示例代碼 ：主要是實現了在 百度搜索 后面加上 其他搜索引擎的搜索功能！

（谷歌搜索同樣原理，由於代理限制無無法訪問谷歌  就用雅虎作為示例）

 

// ==UserScript==
// @name 002UserScript
// @namespace http://tampermonkey.net/
// @version 1.1
// @description 百度搜索上追加其它搜索引擎按鈕
// @author Zhangzhh
// @include https://www.baidu.com/*
// @connect baidu.com
// @match http://*/*
// @grant none
// ==/UserScript==

(function() {
//alert("11");
var txt1=$("<button></button>").text("jpYahoo"); // 使用 jQuery 創建元素 雅虎
txt1.attr('id','jpYahoo');
txt1.attr('type','button');
cssStyle(txt1); //對按鈕進行樣式設定

var txt2=$("<button></button>").text("jp → cn"); // 使用 jQuery 創建元素 滬江
txt2.attr('id','hj');
txt2.attr('type','button');
cssStyle(txt2); //對按鈕進行樣式設定

$(".fm").append(txt1,txt2);

//雅虎
$('#jpYahoo').bind("click",yhSearch); //綁定點擊事件
$('#jpYahoo').mouseover(function(){ //綁定鼠標進入事件
hoverIn(txt1);
});$('#jpYahoo').mouseout(function(){ //綁定鼠標划出事件
hoverOut(txt1);
});

//滬江
$('#hj').bind("click",hjSearch); //綁定點擊事件
$('#hj').mouseover(function(){ //綁定鼠標進入事件
hoverIn(txt2);
});$('#hj').mouseout(function(){ //綁定鼠標划出事件
hoverOut(txt2);
});
})();

//跳轉到雅虎進行網頁搜索
function yhSearch() {
var url = 'https://search.yahoo.co.jp/search?ei=UTF-8&fr=crmas&p=';
var val = $("#kw").val();
// window.location.href = url + val; //當前頁面跳轉
window.open(url + val); //新標簽頁
}

//跳轉到滬江進行日語到中文搜索
function hjSearch() {
var url = 'https://dict.hjenglish.com/jp/jc/';
var val = $("#kw").val();
if(val == ''){
val = '中國人'
}
// window;.location.href = url + val; //當前頁面跳轉
window.open(url + val);//新標簽頁
}

//CSS樣式設置
function cssStyle(Para){
Para.css('width','75px');
Para.css('height','30px');
//Para.css('line-height','45px');
Para.css('border-style','none');
Para.css('background-color','#4e6ef2');
Para.css('font-size','17'); //invalid
Para.css('border-radius','10px 10px 10px 10px');
Para.css('color','#fff');
Para.css('margin','5px 0px 0px 2px');
Para.css('cursor','pointer');
//Para.css('','');
//Para.css('','');
//Para.css('','');
}

//鼠標進入、划出樣式設置
function hoverIn(Para) {
Para.css('background-color','#4662d9');
}
function hoverOut(Para) {
Para.css('background-color','#4e6ef2');
}

 

 

 

 

 效果圖：

樣式可以根據自己的需求進行調整。

 

 

 

 --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

 

原創文章，轉載需注明原出處！！