Gear 浏览器对于「油猴」脚本的技术实现原理

[catfan]

自从 5 月发布了里程碑 2.0 版本后，直到差不多三个月的现在已经发布了大大小小共 14 个版本。进行了大量的改进和修复，同时也有不少新的功能。由于 Gear 的几大核心功能一直都没有详细介绍，在此公开一些内部实现的原理，以方便大家了解。

油猴脚本

直到目前为止，Gear 依然是 iOS 首个支持油猴脚本的浏览器。有部分人认为一些浏览器支持执行 JavaScript 脚本代码就是所谓支持插件。事实上支持油猴脚本和支持 JavaScript 脚本其实是两回事。

在 iOS 上实现在页面加载前注入 JavaScript 脚本其实就是两行代码的问题。只需要调用：

let userScript = WKUserScript(source: String, injectionTime: WKUserScriptInjectionTime, forMainFrameOnly: Bool)
    
webView.configuration.userContentController.addUserScript(userScript)

文档：Apple Developer Documentation

核心就是第一行代码，第一个参数就是要注入的 JavaScript 代码，第二个是注入的时间，可选 atDocumentStart或atDocumentEnd，第三个是是否只针对主 frame 执行。

就这，其实只需要几分钟的时间就能让 Web 浏览器实现执行 JavaScript 脚本（插件）的能力了。

但是，支持油猴脚本却是更加复杂的问题了。绝大部分油猴脚本都是无法通过此方式直接执行的。

---

首先，油猴脚本的头部注释配置定义了该脚本的执行环境、引入外部文件（如各种框架、数据、图片等）、权限授予、接口授予、以及各种相关信息。必须对此信息进行解析和保存，并在执行的时候配置好对应的代码执行环境。

还要给每个脚本配备独立的数据存储方式，不能和页面的共享。同时还要解决资源跨域访问等问题。

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://example.com
// @require      https://cdn.staticfile.org/jquery/3.3.1/jquery.js
// @resource     count  https://greasyfork.org/scripts/by-site.json
// @connect      translate.google.com
// @run-at       document-idle
// @grant        unsafeWindow
// @grant        GM_addStyle
// @grant        GM_getValue
// @grant        GM_setValue
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    console.log("Hello World");
})();

以上是一个简单的油猴脚本代码。

---

其次，事实上目前桌面浏览器主要是这三大扩展支持执行用户脚本。而「油猴」只是其中一个的名字。

GitHub - greasemonkey/greasemonkey: Greasemonkey is a user script manager for Firefox.

GitHub - violentmonkey/violentmonkey: Violentmonkey provides userscripts support for browsers.

GitHub - Tampermonkey/tampermonkey: Tampermonkey is the most popular userscript manager.

Greasemonkey 主要对应 Firefox，而 Tampermonkey （目前最新已经不公开源代码，非开源）主要对应 Chrome 或基于 Chromium 的浏览器。它们内部都有不少地方调用了浏览器的内部接口来实现一些特殊功能。所以 Tampermonkey 也比较好移植到 Android 上。

有兴趣的，可以阅读其源代码，看看是如何实现的。

而在 iOS 上，是无法直接使用以上任何一个项目的代码来实现油猴脚本的支持。在思考了各种方案后，最终 Gear 则是选择了完全重新写一个脚本引擎来进行支持。

目前 Gear 选择的是通过 messageHandlers 来实现页面 JavaScript 与 Swift 原生代码进行数据的处理和通讯。例如跨域请求、数据存储等。并使用了缓存的方案，来加速脚本的加载和执行。原理上执行的效率会比单纯的移植高。而且还为此设计了一套 UI 交互来实现脚本的管理与安装等。于是你现在在 Gear 上可以在安装 Bilibili Evolved 这类的脚本来看 B 站，并使用各种特殊功能了……

当然，由于 Gear 的脚本引擎是完全自己开发的，并且还要同时兼顾 Greasemonkey 和 Tampermonkey 脚本的情况，所以目前还有一些接口还没有完全支持。

而且各个脚本代码的质量不一，各种奇怪的代码写法、各种代码重写、错误的引用、动不动就加载十几 MB 框架文件的情况等等，只能逐行代码来调试脚本。

目前 Gear 依然会不断对引擎进行升级来增强其兼容性。现在依然保持每隔一到两周进行一次更新，每次都会带来新的功能和实质性的改进。

如果在使用脚本过程中发现有问题，也可以直接反馈到 [email protected] 。我这边会逐个进行测试和修复，尽量让其能在 Gear 运作正常。

下面送出一堆免费使用一个月 Gear Pro 的兑换码：

A6TTJNMX3RKE
PK6TXEH36P6W
6MA339K3FERP
MF6H9FPJXXEA
R3TWK6X3MA63
EPXKNHTF7F4W
TPJLW9XFYT4H
TPWXPLKALJT4
4YNA9YRYN97M
EMREJNE4KPFY
JAJFWMFAAEW7
LKMFRHN7WPEL
WRM49X6F3YEE
AX6LKMNHHHYP
N6ERJATNK7NM
36XX9F7WMWJR
ANTHJEK9HYX6
LHKPXXJ9RPAM
WWY3JTNAEYXJ
RHF4FEJYY9WH

PS：如果你是油猴脚本的开发者，可以发邮件到 [email protected] 联系，只要你的邮箱地址和脚本的 author 信息相符，即可直接获赠免费使用一年 Gear Pro 的兑换码。

---

Gear 官网：https://gear4.app

App Store： https://apps.apple.com/cn/app/gear-browser/id1458962238?ls=1

PS：虽然 Apple 禁止视频地址嗅探，但是你可以透过使用油猴脚本来获取视频地址，然后在 Gear 直接下载的咯。（在 Gear 的下载里面里面，可以直接下载指定地址的资源）

[M3ng]

EMREJNE4KPFY 已用，谢谢

[CEEC]

A6TTJNMX3RKE 已用，感谢

[zhujinliang]

AX6LKMNHHHYP 已用，感谢

[wofave]

ANTHJEK9HYX6 （倒四）已用，感谢

[0A0]

兑换码是在哪里用呀，没找到入口

[0A0]

支持油猴试了下。挺符合为极客打造这句口号的。
普通用户来说体验可能有点摸不到头脑和反逻辑。有时网页后退一下就彻底关闭且找不到历史记录在哪，操作逻辑更适合开发者的思维。那个显示模式太混乱了。自带的桌面模式油管等不显示缩略图，站直播放不了等。自动判断下又全是移动模式。ua 里估计是 safari 的通病大都有问题，测试下来目前 bot 算是兼容性最好的。
增强播放器暂时不支持手势控制。从 alook 过来它的悬浮窗挺好用的。
对开发者来说控制台和编辑等很多功能是刚需。可能普通用户而言当作需要用脚本时的备用浏览器挺好的。
开发不易，加油。

[charlie21]

喵大合影

[journey0ad]

支持油猴真不错，之前用 android 也只是火狐支持

[catfan]

@0A0

历史记录在首页左下的按钮上。书签、历史、下载都在那。横屏或 iPad 上，在搜索栏旁边和菜单里也有对应入口。或者直接搜索也行。

Content Mode 基本上都是按照标准的来处理，具体兼容还是要看网站本身了。

播放器目前是支持点击左右边缘前进和快退，屏幕中央播放和暂停的手势。其它的其实可以通过下拉系统的 Control Center 来调。未来会考虑加入更多。

[catfan]

@charlie21 （￣ w ￣）人（￣ w ￣）

[imdong]

尴尬的就是我的脚本作者名不是邮箱，是我这个账号名。不知可否兑换。

https://greasyfork.org/zh-CN/scripts/40463-%E4%BC%98%E8%AF%BE%E5%9C%A8%E7%BA%BF%E8%BE%85%E5%8A%A9%E8%84%9A%E6%9C%AC/code


如可以，我的邮箱 b64: d3d3QHFzNS5vcmc=

看，邮箱域和 namespace 匹配的。

[catfan]

@imdong 可以的，发到联系邮箱申请吧。

另外，本帖不要留邮箱了，都直接发信息到联系邮箱申请便可。

[nl101531]

求搜索引擎自定义

[christin]

所有的兑换码已经被用了。
下次用过能不能留个言？后面的人还得挨着试

[binux]

油猴的 API 就那么几个，实现一遍不就完了。

[Actrace]

“直到目前为止，Gear 依然是 iOS 首个支持油猴脚本的浏览器。”
这句话感觉很奇怪，是不是有点逻辑不连贯。

[catfan]

@nl101531 大部分用户都不知如何正确填写搜索引擎的 URL 参数，并且各网站的图标不一。还是浏览器统一定义和管理好会比较协调。另外，内置了这么多搜索引擎还不够用吗？算是目前市面上支持最多的了。

[catfan]

@binux 关键是要用全新的方式来实现一样的效果...还有一些核心的差异，要单独阅读调试各个脚本的代码才能找到问题...(/ □ \)

[catfan]

@Actrace 嗯嗯，确实用词不太准确。抱歉。

[nl101531]

@catfan 那希望增加 多吉，手机版中文搜索引擎目前比较干净的就这个了。google 需要一直 fq，不方便

[IceFinn]

感谢喵大(⁎⁍̴̛ᴗ⁍̴̛⁎)

[dullwit]

反馈下问题
1. 在 iPad 小屏模式下，选择菜单键只显示了蒙层
2. 在 iPad 小屏模式下，网页内容不能识别为移动模式
3. 在手动选择内容模式后，输入新的网页后网页内容又会切换成自动模式

[catfan]

@dullwit 感谢你的反馈。你所说的应该是 Split View 分屏浏览吧。确实还没有做此模式的适配，之后会对此进行优化。

内容模式是对当前网站（域名）进行设定的，并且下次打开还会使用此设定，毕竟每个网站最佳浏览模式都不一样。

[dengxufan]

感觉很棒

[fengshuo211]

可以多讲一下脚本引擎嘛，ios 上不是只能用 webkit ？

[justin2018]

我好找就买了 哈哈哈 一直没用 昨天才在历史记录看到的 😁