开发一个用户脚本(一)


这个系列总共 6 篇文章,将详细的介绍如何从零开发一个用户脚本。其中前两篇将介绍一下什么是用户脚本,以及开发脚本需要的一些基础知识。后面四篇将通过案例讲解的形式,选择之前我开发完成的 4 个脚本,由简到繁,带着你一起完成脚本的开发,让你看完这个系列文章之后,就可以自己动手开发出自己想要的脚本。

什么是用户脚本

用户脚本是一段代码,它们能够优化您的网页浏览体验。安装之后,有些脚本能为网站添加新的功能,有些能使网站的界面更加易用,有些则能隐藏网站上烦人的部分内容。——来自
GreasyFork 网站

看完这段话,你应该对用户脚本的作用有了大概的了解,但随之而来的,应该是各种疑问:这段代码在什么环境下运行?是用什么编程语言编写的?脚本如何安装?脚本安装后在哪里,如何运行?以及如何开发一个自己的脚本?OK,先别着急,下面我将一一解释。

脚本在什么环境下运行

现在很多浏览器都可以安装插件(官方称为扩展程序),比如 Chrome 浏览器、Firefox 浏览器、Safari 浏览器、Microsoft Edge,以及国内众多使用 webkit 内核的浏览器,比如 360浏览器、QQ 浏览器等。而在众多的浏览器插件中,有一种叫做用户脚本管理器的插件。这种插件相当于一个容器,安装之后,又可以在它里面安装用户脚本。所以你如果想要运行一个用户脚本,就先得安装一个用户脚本管理器。常见的用户脚本管理器有 Tampermonkey、Violentmonkey、Greasemonkey。其中 Tampermonkey 支持大多数浏览器,而 Greasemonkey 只支持 Firefox 浏览器。从开发脚本的角度考虑,Tampermonkey 和 Violentmonkey 的 API 基本一样,同样一份代码不用做什么改动,就可以在这两个里面运行。而 Greasemonkey 的 API 和它们俩不太一样,如果在开发脚本的时候想要兼容支持 Greasemonkey,就需要做挺多改动。综上,当你作为一个普通用户使用的时候,建议使用 Tampermonkey,当你作为一个开发者开发脚本的时候,建议脚本兼容 Tampermonkey 和 Violentmonkey,而 Greasemonkey 就量力而行吧。
在这里插入图片描述

脚本使用何种编程语言

大家都知道网页开发使用的主要是 HTML、CSS、JavaScript,相应的,用户脚本使用的也是这三个,属于前端开发的范畴。所以如果你懂前端开发,那么你将能很快编写一个用户脚本,而如果你对前端开发不是太了解,那么建议你可以先学习一下,常用的网站有 W3school 和 菜鸟教程,上面对相关知识的介绍都比较全面,后面在编写脚本的过程中,如果忘记了一些语法,也可以随时在上面查询。而本系列的第二篇也将对开发脚本过程中会用到的前端知识做一些介绍。

脚本如何安装

最常用的用户脚本网站是 GreasyFork,每天都会有很多开发者在上面发布新的脚本,也会有很多用户下载安装脚本。
在这里插入图片描述
在你已经安装了脚本管理器的前提下,打开 GreasyFork 网站,找到一个脚本,这里以 百度首页和搜索页面添加 Google 搜索框 脚本为例,点击安装此脚本,就会弹出让你安装的界面,然后点击安装,就会将脚本安装到你的脚本管理器里面。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

脚本安装后如何运行

每个脚本都会有其运行的网站,在脚本开头的 UserScript 里面可以看到 @match 或者 @include 开头的语句,后面跟的网址就是匹配的站点,只有当前访问的网站跟脚本运行的网站匹配时,脚本才能生效。
在这里插入图片描述
在安装上面的脚本之前,百度首页是下面这样:
在这里插入图片描述
在这里插入图片描述

如何开发一个自己的脚本

开发一个脚本的流程为:首先确认需求,看你想开发的脚本要在什么网站上运行,要实现什么样的功能,以什么样的形式呈现。确认需求之后,开始编写代码,一般在脚本管理器里面新建脚本来编写,当然你可以用任意编辑器编写代码。
在这里插入图片描述
代码写完后,在脚本管理器选择保存,然后到自己的目标网站上看一下运行效果,如果没有问题,就可以发布脚本了,让更多的人使用你写的脚本。发布脚本仍然选择前面提到的 GreasyFork,首先将脚本保存到电脑本地,是一个以 .user.js 结尾的文件,然后在 GreasyFork 网站上通过本地上传来发布你的脚本(注意不要勾选对编辑器启用语法高亮,好像勾选了会遇到问题)。

在这里插入图片描述

总结

本文对用户脚本的安装、使用、开发过程等进行了一些介绍,如果还有疑问,可以留言,在下一篇文章中,将会对脚本开发过程中会用到的基础知识做一些介绍。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值