V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
catfan
V2EX  ›  分享创造

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

  •  1
     
  •   catfan · 2020-08-06 11:46:29 +08:00 · 7832 次点击
    这是一个创建于 1331 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Gear Browser Promotion

    自从 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 代码,第二个是注入的时间,可选 atDocumentStartatDocumentEnd,第三个是是否只针对主 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

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

    Gear Bilibili

    当然,由于 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

    第 1 条附言  ·  2020-08-11 19:55:56 +08:00
    PS:虽然 Apple 禁止视频地址嗅探,但是你可以透过使用油猴脚本来获取视频地址,然后在 Gear 直接下载的咯。(在 Gear 的下载里面里面,可以直接下载指定地址的资源)
    26 条回复    2020-08-17 15:17:40 +08:00
    M3ng
        1
    M3ng  
       2020-08-06 11:48:28 +08:00 via iPhone
    EMREJNE4KPFY 已用,谢谢
    CEEC
        2
    CEEC  
       2020-08-06 11:52:31 +08:00 via iPhone
    A6TTJNMX3RKE 已用,感谢
    zhujinliang
        3
    zhujinliang  
       2020-08-06 11:56:48 +08:00 via iPhone
    AX6LKMNHHHYP 已用,感谢
    wofave
        4
    wofave  
       2020-08-06 12:11:11 +08:00 via iPhone
    ANTHJEK9HYX6 (倒四)已用,感谢
    0A0
        5
    0A0  
       2020-08-06 12:12:30 +08:00 via Android
    兑换码是在哪里用呀,没找到入口
    0A0
        6
    0A0  
       2020-08-06 12:56:00 +08:00 via Android
    支持油猴试了下。挺符合为极客打造这句口号的。
    普通用户来说体验可能有点摸不到头脑和反逻辑。有时网页后退一下就彻底关闭且找不到历史记录在哪,操作逻辑更适合开发者的思维。那个显示模式太混乱了。自带的桌面模式油管等不显示缩略图,站直播放不了等。自动判断下又全是移动模式。ua 里估计是 safari 的通病大都有问题,测试下来目前 bot 算是兼容性最好的。
    增强播放器暂时不支持手势控制。从 alook 过来它的悬浮窗挺好用的。
    对开发者来说控制台和编辑等很多功能是刚需。可能普通用户而言当作需要用脚本时的备用浏览器挺好的。
    开发不易,加油。
    charlie21
        7
    charlie21  
       2020-08-06 13:05:06 +08:00
    喵大合影
    journey0ad
        8
    journey0ad  
       2020-08-06 13:18:37 +08:00 via iPhone
    支持油猴真不错,之前用 android 也只是火狐支持
    catfan
        9
    catfan  
    OP
       2020-08-06 13:26:44 +08:00
    @0A0

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

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

    播放器目前是支持点击左右边缘前进和快退,屏幕中央播放和暂停的手势。其它的其实可以通过下拉系统的 Control Center 来调。未来会考虑加入更多。
    catfan
        10
    catfan  
    OP
       2020-08-06 13:30:32 +08:00
    @charlie21 ( ̄ w  ̄)人( ̄ w  ̄)
    imdong
        11
    imdong  
       2020-08-06 14:00:32 +08:00
    尴尬的就是我的脚本作者名不是邮箱,是我这个账号名。不知可否兑换。

    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
        12
    catfan  
    OP
       2020-08-06 14:21:23 +08:00
    @imdong 可以的,发到联系邮箱申请吧。

    另外,本帖不要留邮箱了,都直接发信息到联系邮箱申请便可。
    nl101531
        13
    nl101531  
       2020-08-08 08:07:43 +08:00 via iPhone   ❤️ 1
    求搜索引擎自定义
    christin
        14
    christin  
       2020-08-08 13:18:55 +08:00
    所有的兑换码已经被用了。
    下次用过能不能留个言?后面的人还得挨着试
    binux
        15
    binux  
       2020-08-09 02:36:58 +08:00
    油猴的 API 就那么几个,实现一遍不就完了。
    Actrace
        16
    Actrace  
       2020-08-09 11:06:02 +08:00
    “直到目前为止,Gear 依然是 iOS 首个支持油猴脚本的浏览器。”
    这句话感觉很奇怪,是不是有点逻辑不连贯。
    catfan
        17
    catfan  
    OP
       2020-08-09 12:47:39 +08:00   ❤️ 1
    @nl101531 大部分用户都不知如何正确填写搜索引擎的 URL 参数,并且各网站的图标不一。还是浏览器统一定义和管理好会比较协调。另外,内置了这么多搜索引擎还不够用吗?算是目前市面上支持最多的了。
    catfan
        18
    catfan  
    OP
       2020-08-09 12:52:48 +08:00
    @binux 关键是要用全新的方式来实现一样的效果...还有一些核心的差异,要单独阅读调试各个脚本的代码才能找到问题...(/ □ \)
    catfan
        19
    catfan  
    OP
       2020-08-09 12:54:57 +08:00
    @Actrace 嗯嗯,确实用词不太准确。抱歉。
    nl101531
        20
    nl101531  
       2020-08-09 20:50:09 +08:00 via iPhone
    @catfan 那希望增加 多吉,手机版中文搜索引擎目前比较干净的就这个了。google 需要一直 fq,不方便
    IceFinn
        21
    IceFinn  
       2020-08-10 10:32:41 +08:00 via iPhone
    感谢喵大(⁎⁍̴̛ᴗ⁍̴̛⁎)
    dullwit
        22
    dullwit  
       2020-08-15 21:26:32 +08:00
    反馈下问题
    1. 在 iPad 小屏模式下,选择菜单键只显示了蒙层
    2. 在 iPad 小屏模式下,网页内容不能识别为移动模式
    3. 在手动选择内容模式后,输入新的网页后网页内容又会切换成自动模式
    catfan
        23
    catfan  
    OP
       2020-08-16 09:26:47 +08:00
    @dullwit 感谢你的反馈。你所说的应该是 Split View 分屏浏览吧。确实还没有做此模式的适配,之后会对此进行优化。

    内容模式是对当前网站(域名)进行设定的,并且下次打开还会使用此设定,毕竟每个网站最佳浏览模式都不一样。
    dengxufan
        24
    dengxufan  
       2020-08-16 12:29:25 +08:00
    感觉很棒
    fengshuo211
        25
    fengshuo211  
       2020-08-17 09:12:53 +08:00
    可以多讲一下脚本引擎嘛,ios 上不是只能用 webkit ?
    justin2018
        26
    justin2018  
       2020-08-17 15:17:40 +08:00
    我好找就买了 哈哈哈 一直没用 昨天才在历史记录看到的 😁
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2826 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 13:28 · PVG 21:28 · LAX 06:28 · JFK 09:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.