由于网页的特点,我们可以进行很多定制化,比如利用油猴脚本就能做很多事情,但它们却缺乏整体性与体验一致性,于是我开发了 Steward Helper 这个扩展,内置一些常用操作,并实现操作的自动化。


在 Chrome 应用商店下载安装,代码开源

在官网 http://ihelpers.app/ 可以发布和共享操作配置


Steward Helper 能做什么?

非侵入式的阅读模式

不改变页面的结构与样式,只对阅读区以外的内容进行暂时隐藏,按 ESC 可以退出

掘金文章阅读模式


B 站 / 腾讯视频页自动宽屏

个人看视频的时候喜欢直接宽屏,但每次都要找到宽屏按钮再点击一下,挺麻烦。

通过类似下图的配置,则可以免去此麻烦。

腾讯视频自动宽屏


图片类资源下载

主要是针对那些有特殊限制的网站,比如微信读书 PC 版。

通过设置的快捷键(chrome://extensions/shortcuts)唤起下载资源(Download Element)的动作,将虚线框中指定图片,点击即可下载,配合通用图片下载这个 Automation,体验更佳。

图片下载

给博客类文章自动添加锚点

某些文章页面虽然用了各级别的标题排版,但却无法利用标题在进行页面内的定位,

以 https://cloud.tencent.com/developer/article/1482342 为例

而 Steward Helper 的添加锚点功能可以弥补这个缺失。


说明:此功能只对部分网站有效。

其它内置操作

还有代码拷贝删除页面元素让视频链接包含播放进度全屏页面某块区域等等,这里就不一一说明。

发布/共享配置平台

虽然操作已经大幅简化,但为了更方便大家使用,我基于 LeanCloud + Github Action 搭建了 Automation(自动化配置)的共享平台 http://ihelpers.app/

http://ihelpers.app/

一些基本概念

动作

就是 Steward Helper 内置的一些功能,通过右键菜单快捷键可以执行,快捷键请访问 chrome://extensions/shortcuts 找到 Steward Helper 设置即可。

右键菜单

记录

大部分动作执行后都会产出一条记录(record),可以在 popup 的 Records 面板查看到。

操作记录

自动化

如果你想让某个动作在某些网站的页面自动执行,就需要用到自动化(Automation)。

自动化(Automation)可以单独添加,也可以从 Records 里转成。

它有两个参数,即指令(Instructions)与模式(Pattern):

指令(Instructions):用来描述动作与它的参数。以下图为例,readMode 是动作名,@.article-area 表示动作将应用于 .article-area 这个 css selector 代表的页面元素。

模式(Pattern):表明指令将在哪些页面会自动执行,如 https://juejin.im/post/* 就对应着掘金的所有 post 页面。

自动化配置

使用

Steward Helper 的使用可能需要一些基本的 css selector 知识。如果你不了解这块,建议了解下,也可以去 http://ihelpers.app/ 查找,或者在这里、QQ 群里、Steward 论坛或 Github Issue 中提问。


其它

目前内置的这些动作,只是个人在使用浏览器过程中收集的一些需求,如果大家有一些较为通用的动作设想,我将在后续迭代中实现,当然也欢迎 Pull requests。