如何在浏览器中使用UserScripts

什么是UserScripts

UserScripts,用户自定义脚本。就是用户自己定制的脚本,用来修改浏览器中特定的网页的,既可以修改网页的外观也可以修改(添加)内部的一些行为。一般以javascript的形式存在,它通过自身在脚本文件中配置的匹配规则匹配特定的一个或者一些网页。

如何在浏览器中使用

那么问题来了,如果我写好了一个UserScripts,如何在浏览器中使用呢?回答是:装插件。即安装对应浏览器的插件。下面给出链接:

据我所知,刚开始最火的应该是Firefox的附加组件Greasemonkey,后期其它浏览器相继产生其对应(兼容)功能的插件。这里不一一讲解安装。


下面,我将以接上一篇在海外使用网易云音乐,讲解如何在Chrome中安装Tampermonkey后,添加支持海外使用网页版网易云音乐的过程。

1. 安装Tampermonkey

点击上面列表中的第二项,前往谷歌应用商店。我知道你也许没有我这么幸福有‘免费’的公司海外专用网络,也极有可能没花钱买VPN,当然,你如果真有「在海外使用网易云音乐」的需求,这似乎又是矛盾的。Anyway,如果你因为某些「诡异」的原因访问不了应用商店的话,给你一个workaround的方法:到这里去下载最新的Tampermonkey的crx文件,然后在chrome菜单中找到‘更多工具’->‘扩展程序’,打开该页面后,把前面下载的crx文件拖进去即安装成功。

2. 添加脚本

安装成功后,Chrome地址栏的右边的插件区自然会多出来Tampermonkey的图标(黑底加两上白点),点开就是它的菜单了,如图:

Tampermonkey Menu

脚本内容我已经放在了我的Git上:NetEaseMusicHelper

对于国内的用户而言,装上这个插件肯定是一点效果没有的。怎么样能看看插件的效果呢?宝哥我不辞劳苦,专门因此写了另一个UserScript来让你体验。这个脚本叫Make Baidu Googleable,代码地址在这里:makebaidugoogleable.user.js,国内的朋友将下面步骤中提到的netease_music_helper.user.js,替换成这个make_baidu_googleable.user.js即可。插件和该脚本安装成功后的效果就是:每次访问百度,都会在「百度一下」按钮的后面添加一个样式一样的叫「谷歌一下」的按钮。当然,点击该按钮真的是可以「谷歌一下」的。

你有两种方式来添加我这个脚本:

a. 手动添加脚本内容

直接在上图所示的菜单中,选择添加新脚本,进入一个脚本编辑器页面。复制上面的Git项目中netease_music_helper.user.js的内容,粘贴进去,点击左上角的保存图标保存即可。

b. 浏览器直接访问.user.js结尾的文件

通过这种方式访问带.user.js结尾的网址(或地址),Tamper插件会自动识别,跳转到安装脚本文件的配置页面,默认已经 将文件内容填到脚本区域了。需要注意的是,如果访问的.user.js的网址(或地址)返回的不是一个标准的纯UserScript脚本文件,而是一个网页或者别的什么东东的话,那Tamper的跳出来的就不是一个安装配置,而是文件格式不正确的报错页面了。

所以如果你在安装好Tampermonkey插件后,在Git中访问neteasemusichelper.user.js页面时可能就会遇到上面所说的报错页面了,因为这个文件的地址也正好是neteasemusichelper.user.js结尾,只不过后面带参数罢了。所以,你如果要通过网址来安装我这个脚本的话,这个网址是你最好的选择:http://git.oschina.net/bobshi/NetEaseMusicHelper/raw/master/netease_music_helper.user.js,原因是:1.它返回的是纯user.js的内容;2.即使git更新,它返回的内容也是最新的。 因为它永远拿是master分支的内容。

3.测试效果

访问music.163.com(或刷新),这时候,你会发现右上角Tampermonkey图标已经从灰色变成亮色了。随便放几首歌,那烦人的由于版权保护,您所在的地区暂时无法使用便再也不出现了,下面的播放器像弃置已久的机器又恢复运转一样,让人顿时心旷神怡~


Ok,一个在浏览器使用UserScript的基本流程就讲解完了,其它浏览器类似,大家可以自行研究摸索。当然,对于本文的主题来讲,我这个网易云音乐脚本的例子,只不过是‘抛砖引玉’而已。因为它是如此的简单以至于只有一行代码。事实上UserScripts的内容和功能远不止本文提及的那点皮毛。你可以想办法去访问本文底下那些网址去查看文档以及或使用或膜拜或模仿现成的一些UserScripts。当然,以后有空我也会写更多的脚本或者相关的文章,敬请期待。

http://tampermonkey.net/documentation.php
http://userscripts-mirror.org/
https://openuserjs.org/
https://greasyfork.org/
https://gist.github.com/search?l=javascript&q=%22user.js%22