今天在网上看到了“油猴”这么个东西的介绍,感觉蛮有趣,跟大家分享一下。这个东西本来是火狐的插件,后来一查原来chrome从4.0以后也支持用户脚本了。所谓的“油猴”实际上是一段以*.user.js结尾的js脚本,通过油猴你可以在每个网页上执行你的这段脚本。利用这个js脚本你可以对网站页面做一些个性化的修改,比如像我们今天提到在每个页面上增加“返回顶部”的功能,其效果就是在每个页面自动添加返回顶部的功能:
效果图:
创建“油猴”脚本
下面介绍一下如何在chrome中编写自己的用户脚本(以增加返回顶部功能为例)
1. 去谷歌扩展中心下载
Tampermonkey
,这个东西可以用来管理各种用户脚本。当然,新建一个脚本也会变得比较容易。
2. 安装后进入Tampermonkey的设置界面,然后创建一个新的脚本:
![](https://i-blog.csdnimg.cn/blog_migrate/be028d5fd92a15279bca4ac4d9be2668.png)
在编辑脚本页面输入下面的一段js脚本(用于实现“返回顶部”功能)
// ==UserScript==
// @name GotoTop
// @version 0.1
// @description 给每个网页增加返回顶部按钮
// @match http://*
// @match https://*
// @copyright scott qian
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js
// ==/UserScript==
ImportCss();
ScriptWithJquery();
BindHotKey();
function ImportCss() {
var jqueryScriptBlock = document.createElement( 'style');
jqueryScriptBlock.type = 'text/css';
jqueryScriptBlock.innerHTML = "#gototop{position:fixed;bottom:20%;right:1px;border:1px solid gray;padding:3px;width:12px;font-size:12px;cursor:pointer;border-radius: 3px;text-shadow: 1px 1px 3px #676767;}";
document.getElementsByTagName( 'head')[ 0].appendChild(jqueryScriptBlock);
}
function ScriptWithJquery() {
$(document.body).append( "<div id='gototop' title='快捷键: alt + up alt+鼠标滚轮向上'> 返 回 顶 部 </div>");
$( '#gototop').click( function () { $( 'html,body').animate({ scrollTop : '0px' }, 800); return false; });
}
function BindHotKey(){
document.onkeydown = function(){
var a = window.event.keyCode;
if((a == 38) &&(event.altKey))
{
//alt + up
$( 'html,body').animate({ scrollTop : '0px' }, 800);
}
};
//绑定alt+鼠标向上滚轮事件
window.addEventListener( 'mousewheel', function(event){
if(event.wheelDelta > 0 && event.altKey)
{
$( 'html,body').animate({ scrollTop : '0px' }, 800);
//防止滚动条向上滚动,导致多重效果
window.event.preventDefault();
}
}, false);
}
// @name GotoTop
// @version 0.1
// @description 给每个网页增加返回顶部按钮
// @match http://*
// @match https://*
// @copyright scott qian
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js
// ==/UserScript==
ImportCss();
ScriptWithJquery();
BindHotKey();
function ImportCss() {
var jqueryScriptBlock = document.createElement( 'style');
jqueryScriptBlock.type = 'text/css';
jqueryScriptBlock.innerHTML = "#gototop{position:fixed;bottom:20%;right:1px;border:1px solid gray;padding:3px;width:12px;font-size:12px;cursor:pointer;border-radius: 3px;text-shadow: 1px 1px 3px #676767;}";
document.getElementsByTagName( 'head')[ 0].appendChild(jqueryScriptBlock);
}
function ScriptWithJquery() {
$(document.body).append( "<div id='gototop' title='快捷键: alt + up alt+鼠标滚轮向上'> 返 回 顶 部 </div>");
$( '#gototop').click( function () { $( 'html,body').animate({ scrollTop : '0px' }, 800); return false; });
}
function BindHotKey(){
document.onkeydown = function(){
var a = window.event.keyCode;
if((a == 38) &&(event.altKey))
{
//alt + up
$( 'html,body').animate({ scrollTop : '0px' }, 800);
}
};
//绑定alt+鼠标向上滚轮事件
window.addEventListener( 'mousewheel', function(event){
if(event.wheelDelta > 0 && event.altKey)
{
$( 'html,body').animate({ scrollTop : '0px' }, 800);
//防止滚动条向上滚动,导致多重效果
window.event.preventDefault();
}
}, false);
}
![](https://i-blog.csdnimg.cn/blog_migrate/65d3888c0babc626ced429e9f6883c7a.png)
这里有一个地方需要说明一下。为了方便js的开发,我这里使用了jquery,所以需要在头部声明中声明以下一段话。这样我们就可以在其中使用jquery了。
3. 保存该用户脚本然后随便打开一个网页,效果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/ad0d975d32ca8c663de3a29a0aea648c.png)
调试用户脚本
如果需要调试我们写的脚本,可以在Tempermonkey的设置界面开启Debug Scripts功能。然后在打开页面的时候按F12开启 developer tools,就会自动进入调试模式了。如下图所示:
![](https://i-blog.csdnimg.cn/blog_migrate/b2aa51ab158a7c53331ea10f69558c17.png)
![](https://i-blog.csdnimg.cn/blog_migrate/cb9f21352b8982d7b1e413ffa7948762.png)