由于网页的特点,我们可以进行很多定制化,比如利用油猴脚本就能做很多事情,但它们却缺乏整体性与体验一致性,于是我开发了 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/。
一些基本概念
动作
就是 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。