自动化数字生活:收藏网页 - 桌面

在 Windows 和 macOS 中的网址来源比较单一,基本上以浏览器为入口,即使像微信那样自己开个窗口显示文章的,也可以很方便地「通过系统浏览器打开」从而回到浏览器的入口中。

所以针对桌面环境,我先讲讲如何在浏览器中收藏网页,最后补充一个本地的工具。

浏览器扩展和书签小工具

Diigo 官方提供浏览器扩展,直接安装即可。Pinboard 在 Google Chrome 和 Firefox 中都有第三方制作了比较好用的扩展,可以自己选择。

此外,这些书签服务都会有一些官方的 Bookmarklet 给用户使用。我们直接把按钮拖动到书签栏中,以后需要收藏的时候,点击这些按钮就可以了。

Pinboard 的 Bookmarklet 们可以在 howto 页面找到。

也可以自己写一个,来直接调用之前做的预处理程序,使用 javascript 几行代码就可以完成。

油猴脚本

相比于浏览器扩展的编写繁琐,以及书签小工具的功能限制,油猴脚本可以很方便地让我们自己实现定制。

最早的油猴 Greasemonkey 是 Firefox 上的一个扩展,也形成了良好的社区氛围,优秀的脚本非常多。后来大家开始用 Google Chrome,就有了 Tampermonkey,它可以兼容 Greasemonkey 的脚本,横竖都是猴儿,中文名就一直沿用下来了。

以 Google Chrome 中的 Tampermonkey 为例,安装好扩展之后,进入「管理面板」,新建一个脚本。

// ==UserScript==
// @name gm-pinboard
// @version 1.1.0.0
// @author sanko
// @updateURL https://***/pin.user.js
// @downloadURL https://***/pin.user.js
// @match *://*/*
// @grant GM_xmlhttpRequest
// @run-at document-idle
// @require https://unpkg.com/hotkeys-js/dist/hotkeys.min.js
// @connect demo.pin.o2as.com
// ==/UserScript==

开头声明一些脚本参数:

  1. 版本号用来确定是否需要更新,扩展会定期检查所有脚本
  2. 更新和下载的 URL 以 .user.js 结束,扩展会直接识别并安装
  3. match 匹配激活脚本的网页,这里选择「所有网页」
  4. grant 权限管理,这里 GM_xmlhttpRequest 允许联网请求
  5. run-at 脚本触发监听
  6. require 可以引入一些外部库
  7. connect 限定了脚本允许请求的网址范围

代码主体是与我们运行在服务器上的预处理程序通信:

function add_pinboard() {
show_tip('Add this page to Pinboard<br>Processing...');
const u = window.location.href;
GM_xmlhttpRequest({
method: 'POST',
url: 'http://demo.pin.o2as.com/bookmark',
headers: {
'content-Type': 'application/json',
},
data: JSON.stringify({ url: u, auth: 'sanko' }),
timeout: 0,
ontimeout: (response) => {
show_tip('Server Error - Timeout');
},
onerror: (response) => {
show_tip('Server Error: ' + response.error);
console.log(response);
},
onload: (response) => {
if (response.status == 200) {
let json = JSON.parse(response.responseText);
show_tip(json.message + '<br>' + json.title);
} else {
console.log(response);
show_tip('Failed to add the bookmark');
}
},
});
}

这里 show_tip() 是我另外编写的一个显示函数,用于在网页上提示收藏的状态和结果,效果就是下面图中的黄色框。

如何触发收藏呢?我引用了一个快捷键的库:

hotkeys('alt+o', (event, handler) => {
add_pinboard();
});

这样,当我按下「Alt+O」的时候,当前网页就被收藏了

Quicker

近来有个自动化工具宣传做得很足,叫做 Quicker。这个软件很好玩的地方在于,可以像 Macbook 的 Touchbar 一样,根据当前活动窗口,可以给出不同的操作按钮,比较方便去点,也不用记快捷键。

Quicker 跟 iOS 上的 Workflow 一样,都是提供一些模块,然后拼拼配配,「可视化」地做出一个脚本来。不一定要会编程,但是最好有一点程序员的思维,这样设计起来会比较容易。

基本的步骤跟 Workflow 中一致,入口仅限于 Chrome 浏览器——当然,也可以加上剪贴板。

第一步,获取网址,有现成的步骤「获取当前Chrome浏览器网址」可以拿来用。这个网址输出到变量 url 中。

之后给个提示,正在处理。这里 $$正在添加书签 {url} 前面两刀表示这个串会引用变量,后面的变量用大括号括起来就可以了。

主体部分,发送网络请求。

填入网址,方法选择 POST,请求头和 Cookie 置空,请求体类型选择 JSON,请求体填入对应的格式。最后把输出的文本结果传入变量 resp 中。

处理应答消息,使用「提取 JSON 内容」这个步骤,分别提取 messagetitle

拿到的结果放到 messagetitle 这两个变量中。Quicker 处理 JSON 的这个步骤有点奇葩,一次只能取 5 个字段,而且窗口写死了 5 个,如果提取不到 5 个会强迫症不想空着的感觉……

下面判断 message 中是不是成功收藏了。也可以直接用个「提示消息」输出,我这边为了多试试不同的「步骤」,所以稍微处理了一下。

类型我选了正则,你也可以选「包含」,都是一样的。最后结果输出到 done 变量中。

最后用「如果」步骤来判断有没有成功,决定后面「提示消息」提示的内容。

成功了就显示一下标题,失败了把错误信息一起显示出来。

消息类型可以根据不同的情景选择,会有不同的颜色和图标显示。

可以看到,这些自动化工具在设计时的思路都大同小异,虽然有的是代码,有的是拖模块,有的把 JSON 叫做「词典」,但总体的逻辑却几乎一致。尤其在设计好预处理程序后,客户端就是负责跟这个预处理程序交互,然后根据不同的操作系统和使用环境,做些提取网址、显示消息这样的琐事。这也是一定意义上的「不重复造轮子」。