想要在移动端浏览器使用用户脚本,我们一般而言有两类选择:一是使用支持扩展插件的浏览器,通过安装扩展插件(如Tampermonkey)来支持用户脚本;而如果浏览器不支持扩展插件,则可以直接支持用户脚本。
下面我也按照这两大类别简单介绍一下。
▍支持扩展插件的移动端浏览器
这里本来想展开写一下,但是发现jijiali和克莱德珠玉在先。我这里就只详细聊聊刚刚加入支持的Edge。下面是目前支持扩展插件的主要Android浏览器列表。
Firefox:使用Firefox应用商店,使用自己的Gecko浏览器核心
Yandex:来自俄罗斯的应用,使用Chrome应用商店
KiwiBrowser:基于Chromium核心,使用Chrome应用商店
神马浏览器(SleipnirMobile):使用自己的应用商店
关联阅读:在Android手机上使用扩展插件,你可以选择这些浏览器
此外,最近还有这个浏览器值得一看——Iceraven:基于火狐同款的Gecko内核开发,支持扩展程序(Firefox应用商店),如果你下载Iceraven会发现这两个界面几乎都一样,甚至Iceraven还支持火狐账户同步。
题外话:你可能会纳闷,Iceraven和Firefox有什么区别呢?
根据Iceraven自己的介绍,它有两个核心的区别:
Iceraven可以访问about:config页面来做一些修改和调整
Firefox只限制了部分附加组件在Android端使用,Iceraven支持更多的附加组件。
▍Edge适配用户脚本管理器Tampermonkey
早在三四年前,就已经有浏览器开始以支持插件、用户脚本作为卖点了。Edge今年才开始姗姗来迟,确实是赶了个晚集。但作为微软开发的浏览器,Edge可以共享微软的生态能力(账号管理、Drop、密码、书签),如果你在PC环境下也使用Edge,在Android环境下使用是个不错的选择。
而且晚来总好过不来。Chrome作为浏览器行业的老大哥,这么多年了移动版的扩展能力一直不上线,让多少用户望眼欲穿。Edge作为基于同一个内核的二哥,推出这个功能颇有种「东厂不敢管的事我管」的气魄。
EdgeforAndroid扩展使用体验
在安装完毕后,触发扩展的方式也有所区别,Edge的做法是从底部升起一个弹层,加载插件的popup面板,比如Tampermonkey就可以在弹出层直接开关脚本。Kiwi则是单独加载了一个新的标签页。相对来说Edge做法体验更好一些,毕竟这样可以更方便的找到脚本的对应关系。
不过直接修改Tampermonkey的启用状态反而会拉起一个新的标签页,希望Edge能改进一下这点。
尝试了几个常用的用户脚本,它们都可以正常工作,只是对比桌面版本的浏览器而言,看不到具体的加载状态,以及有些脚本对移动版网页显示适配不是很好,运行问题不大。
值得一提的是,目前Tampermonkey版本已经更新至了5.3.2。该版本已经支持了ManifestV3。
V3带来的核心变化包括但不限于:
取消后台常驻服务,而改为非常驻的ServiceWorker。目的是降低资源使用。
不允许支持远程代码,即失去了插件热更新能力。
用户脚本的API仅在开发者模式下才生效。
其中第四点对用户脚本的生态影响很大,原先安装、配置插件的流程只需要在商店中操作即可,现在还要额外打开这个开关,给引导普通用户带去麻烦,何况不少移动版浏览器中压根就没有安排「开发者模式」的开关。
EdgeforAndroid目前的做法是在安装Tampermonkey后跳出提示要求勾选开发者模式,成功安装后,在扩展页的右上角会多出一个齿轮图标放置模式开关,对一般用户比较友好。
▍支持用户脚本的移动端浏览器
相对来说,支持用户脚本的移动端浏览器更多,对于浏览器开发者来说,只要适配一下用Javascript写的用户脚本就可以了。这些脚本经过很多年的沉淀,已经有了一套比较好的规范,加上也有比较完善的脚本分发渠道,因此开发者也完全不需要考虑上述应用商店上架、发布、审核的问题。
我在几个官方的应用商店找了找,有不少这样的浏览器:
Via浏览器:支持用户脚本
X浏览器:支持用户脚本
M浏览器:支持用户脚本
油猴浏览器:对,名字就是这么直白。
以Via浏览器为例,其主打功能是轻量,安装包体积非常小。Via浏览器刚上线的时候,不到200kb的体积确实非常惊艳。能做到这一点的原因是Via没有在安装包内放进浏览器内核,而是使用了你手机上Android系统的WebView。
我找到了Via官方的插件商店,不知道为何里面只有一个插件,叫做Clickabletextlink,其作用就是让网页中看起来能点的url真的变成能点击的状态。
具体这个插件的代码是以base64的格式渲染在html标签中,可以看出来以这个插件大概是这样的:
没有按照Userscript的普遍格式来写头部,因为这个网页用了一个Via浏览器自己的安装方法“window.via.addon()”,传入一个加密过之后的js就可以安装了。
用正则表达式判断网页中的文本是否有各种url的头部。
如果判断通过了,给原位置插入一个超链接的html替换。
同时Via还支持自定义设置和插件,甚至还有人开发了第三方的插件商店。
这个插件同时还支持iOS平台的alook浏览器等,这里我尝试安装一下这个「网页复制限制解除」的插件给大家看一下,点击安装之后自动弹出一个安装器来:
可以看出,这个插件唯一的作用,就是给页面中插入了一段Javascript代码,这段代码其实就是网页限制解除这个Userscript,可以说是很直白了……
其他的几个脚本也都符合Userscript规范,是可以直接运行的那种。
题外话:在试用这一堆浏览器的过程中,我发现了个问题,不少浏览器的界面设计惊人的相似,而且对于用户脚本的添加和导入流程也是一样的,不知道大家是不是在互相借鉴?
综上所述,上面的所有浏览器可以整理为下面这个表格。移动端浏览器毕竟涉及到你的个人隐私安全等等,如果你对其他浏览器都不太熟,我还是建议你用Firefox或Edge。
▍iOS平台
看到这里,告诉大家一个揪心的事实:上述的所有浏览器都是Android平台的。
如果你想在iOS或者iPadOS平台使用浏览器,哪怕是上面讲过的Firefox或者Yandex,都不支持扩展插件或者用户脚本。原因可能是因为在iOS平台依赖WebKit的内核,而不能使用Firefox自己的浏览器内核,因此比较难进行适配。
经过一些搜索,我在商店中找到了几款能支持用户脚本的浏览器:
Alook浏览器:自定义设置中有一个「JavaScript扩展」的功能。买断制。
除此之外确实没有什么比较好的选择,商店里可以搜出来几个奇怪的浏览器,没敢下载。所以这里还是以Gear为例,展示一下使用方法:
找到你想要安装的脚本,这里还是以「少数派作者激励器」为例,为了更好的演示移动端的效果,我偷偷加了点代码,升到了0.2版本。
点击「安装脚本」,由于Gear没有一个单独管理脚本的入口,可以点击网页中间的「安装此脚本」进入下一步。Gear会自动判断脚本,弹出一个安装的确认界面。
脚本推荐
▍Userscript+
安装并启用Userscript+之后,我们唯一需要做的事就是照常浏览网页。Userscript+会在网页浏览过程中自动检测可用于当前页面的用户脚本,如果有可用脚本,浏览器右下角则会在加载完成时弹出提示,展开面板后便能看到所有可用的浏览器脚本。
▍网页限制解除(改)
不少网站会限制网页自带的复制功能,或者不让大家使用右键等,对说的就是你xx文库。如果经常需要找一些资料,这个脚本应该对你很有用。
其实这样的限制在技术上其实只是用Javascript阻塞了大家的复制操作,破解起来也并不算复杂,网页限制解除这个脚本就是为此而生的。其中核心的部分是如下的几行代码:
//复制到剪贴板functionsetClipboard(){vartext_obj=window.getSelection();vartext=text_obj.toString();GM_setClipboard(text);}
一共有三步:
从网页中获取你选择的文本。
将这部分文本转化为一整个字符串。
将这部分字符串填充到剪贴板中。
除了这部分代码外,这个其他大部分的代码都是做网站匹配,以及对抗一些奇奇怪怪的网站的防复制逻辑的。
这里要注意的是部分网站会写一些定制化的干扰代码,导致无法运行,甚至会影响你的正常浏览,你可以在脚本管理器中暂时关掉这些脚本。
▍HTML5视频播放器增强脚本
大家经常上网课的时候,使用学校做的网页,这些网页中视频播放器的功能一般都比较简单,甚至连倍速播放这个功能可能都没有。
对于这样的场景,使用播放器增强脚本,就可以提升你的使用体验了,按照作者的说法,这个脚本主要有以下的功能:
支持视频画面缩放、画中画、网页全屏
支持视频画面截图、调整亮度
支持快捷键(快捷键操作见上面的链接)
以网易公开课的页面作为实例,大家可以看到我缩放并且位移了视频播放器的位置:
需要提醒大家的是,这个脚本对于一些高度定制化的视频网站不起作用,如Bilibili、爱奇艺等等。
以上的三个脚本都是给界面中增加内容的,接下来介绍的三个脚本则是给网页「减负」的。
▍AC-baidu
但AC-baidu这个脚本在加载过程中会闪动一下,往往会先加载原格式的界面(零点几秒内),然后再展示成右侧的界面,对这一点比较介意的同学可以考虑别的过滤脚本方案。
▍药方(YAWF)
药方的配置项目也比较多,安装之后点击顶部的漏斗状图标就能看到:
这里有非常多的选项,可以过滤不想看的微博或作者,也可以屏蔽界面中指定的模块。这里我为了找一个极致清爽的界面,勾选了全部,界面中果然干净了不少。
对了,如果你已经切换到了新版微博,药方的支持效果可能会差一些。
▍知乎增强
下图左侧是优化前的界面,右侧是优化后的,可以看到精简了不少内容。
过去几年上知乎比较多,这几年知乎算是用的越来越少了
▍结语
如果你找不到合适的脚本,可以考虑学习一些简单的Javascript小知识,动手写几行代码就能定制一个最符合你的需求的用户脚本。