Catfan (Catfan)

Gear 浏览器升级到 v3.0，带来全新的自适应黑暗模式算法

Catfan — Wed, 21 Oct 2020 03:42:46 +0800

Dark Mode，黑暗模式

虽然目前很多桌面软件和 app 都对黑暗模式进行了适配，但是浏览器的黑暗模式却是迟迟没有普遍开来。要适配 app 界面比较简单，都是自身可控的。但是要自动适配互联网上各式各样的的网站却是一个很困难的任务，因为每个网站的设计和配色风格都不一样，除非网站自身为此专门设计了一套新的样式（这样效果最好）。

目前市面上部分浏览器的黑暗模式解决方案主要是对页面的所有元素进行反色滤镜处理（filter: invert），虽然此方式简单粗暴，但是效果很差，页面会失去原本的色彩配搭（尤其是图片），并且性能也会受到影响；或者写一套简单的通用 CSS，对元素某些属性进行 override。但此方式的兼容性有很大的限制，无法判断该元素在页面中的作用，以及呈现方式，导致页面会有各种奇怪的颜色配搭问题；还有一些浏览器直接在 app 上覆盖一层灰色透明图层了事，那效果不说也罢…

并且以上的所有方式都无法适配那些自身就是黑色风格或者具备黑暗模式的网站，颜色都是固定转换的。

Next Gen Dark Mode

而 Gear 浏览器终于在研究和迭代多次后，终于研究出全新的自适应黑暗模式算法。它会智能分析页面的所有样式，元素在页面的作用与位置的信息，基于颜色 HSL 值，在保留页面的元素色相饱和度情况下，计算出合理的样式。

如：

普通情况下元素的 background: #FFF 白色 -> background: #000 黑色。

如果此元素是在页面中是悬浮固定位置的。

则：background: #FFF 白色 -> background: #020202 浅黑

如果此元素是一个按钮。

则：background: #FFF 白色 -> background: #5C5C5C 深灰

并且此算法还会分析整个页面的配色方案，适配那些自身是黑色风格和具备黑暗模式的网站。虽然分析的复杂度提升了好几个指数级，但不会有明显的延迟感觉。

简单来说，Gear 的新算法不但改善了性能（不使用滤镜），效果（智能生成）和兼容性（适配所有网站）上都比以往有了质的提升。并且，你也可以直接使用网站自带的黑暗模式或者访问黑色主题的网站，并不会导致样式冲突。能让你在夜间环境下，以更舒适的亮度来阅读和浏览网页，进一步保护眼睛。

Gear v3.0 版本不但带来了新的黑暗模式算法，还大幅度调整和改善了界面风格，强化了控制台和油猴脚本的功能，并适配 iOS 14（可以设置成默认浏览器了），希望大家用得愉快。接下来还会不断有为 iOS 14 设计的新功能提供，敬请期待。

PS：目前新的自适应算法只是第一版，并不够完美，在未来还会不断更新，预计还能把效果再提升几个档次。

官网：https://gear4.app

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

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

Catfan — Thu, 06 Aug 2020 16:57:30 +0800

自从 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 - WKUserScript

核心就是第一行代码，第一个参数就是要注入的 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 依然会不断对引擎进行升级来增强其兼容性。现在依然保持每隔一到两周进行一次更新，每次都会带来新的功能和实质性的改进。

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

Gear 官网：https://gear4.app

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

Gear v1.5 更新 - 首个支持油猴脚本的 iOS 浏览器

Catfan — Thu, 10 Oct 2019 13:50:19 +0800

经过好一段时间开发和审核后，Gear 最重要的 v1.5 版本终于上线了。

除了针对 iOS 13 进行了适配与大量的优化外，这次还带来了 Add-on 扩展系统。你可以通过安装 GreaseMonkey/TamperMonkey 兼容的脚本来为网站增加各种功能。这也是目前首个兼容油猴脚本的 iOS 浏览器。

PS: 由于 iOS 审核标准以及移动端与桌面的区别，部分油猴引擎的接口目前是暂时不支持，并且此功能只能开放给高级 Pro 版本。

这次更新还支持了 iOS 13 的 prefers-color-scheme 特性，可以更加好地适配黑暗模式。

以及：

优化了广告过滤以及黑暗模式
大幅度优化了 console 的信息展示
开放 site setting 功能
各种界面的优化以及大量 bug 的修复等等

免费获取 Pro 高级版本

如果你喜欢本浏览器，并在 App Store 上留下了好评或者在社交媒体上推荐了，可以把截图或链接发送到联系邮箱 contact@gear4.app。我们将给你免费送出一个月甚至一年的的兑换码（数量有限）！

官方网站：https://gear4.app

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

本喵亲手打造的作品： Gear - 为极客打造的 iOS 浏览器

Catfan — Mon, 19 Aug 2019 14:08:49 +0800

Gear 是一款专注于浏览体验并具备开发功能的 iOS 浏览器。具备目前效果最好的黑暗模式、全屏模式、阅读模式、广告过滤，以及元素审查（Element Inspector）、实时 CSS 编辑器、查看源代码、console、取色器、全屏截图等等高级开发功能。兼容 iPhone & iPad。

黑暗模式

Gear 的黑暗模式不是单纯对页面元素进行反色处理或进行屏幕调暗而已。在黑暗模式下整个 app 的配色和界面都通过重新调整和设计，对于网页也做了比较多的调整，甚至特殊适配，以达到更好的浏览效果。现在的黑暗模式还新增了 color shift 与 deep dark 两种额外选项，以加强对夜间眼睛的保护，以及更节约电能。

广告过滤

Gear 同样具备了广告过滤功能，全面使用 EasyList 规则，目前过滤效果最强。还可以过滤第三方 Tracker，进一步保护隐私。

阅读模式

Gear 提供了经过重新排版和设计的阅读模式，进一步提升阅读文章的体验。

真全屏模式

Gear 的全屏模式是无论页面如何滚动，上下导航条都不会出现的，以保证更好的浏览体验。只需在菜单中启用，或者摇动手机便能启用与切换。

开发功能

Gear 还提供了一堆开发功能以方便开发者在手机上进行调试、查看代码、修改移除元素、全屏截图、自定义 JavaScript & CSS 等等。并且具备 Markdown & JSON Viewer，让你方便查看 markdown 和 JSON 的文件。还有实时无代码样式（CSS）编辑器，可以方便在手机上进行样式修改以及调试，并且复制 CSS 代码。

下载

目前 Gear 可以通过官方网站下载，或扫描下方二维码，目前只有英文版，但不妨碍使用：https://gear4.app

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