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');
}

 

 

 

 

 效果图：

样式可以根据自己的需求进行调整。

 

 

 

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

 

 

原创文章，转载需注明原出处！！