Web Clipper on Shortcut

Web Clipper on Shortcut 是一个网页剪藏快捷指令，可以在 Safari 等浏览器上帮你快速剪藏网页正文内容到一些 App。

效果展示

Web Clipper on Shortcut 目前支持剪藏网页内容到 Obsidian、Bear 和 Craft 三款 App：

剪藏到 Obsidian
剪藏到 Bear
剪藏到 Craft

Web Clipper on Shortcut 不仅可以在 iOS 上使用，还能在 macOS 上使用。

剪藏到 Bear mac 端

快速上手

安装

Web Clipper on Shortcut icon

首先，在 Safari 浏览器中点击上面的图标将 Web Clipper on Shortcut 下载并导入你的快捷指令 App。紧接着在 快捷指令 App 中直接点击运行 Web Clipper on Shortcut，如果你是第一次进行这个操作，Web Clipper on Shortcut 会立刻开始执行初始化流程，会首先询问你希望用 Web Clipper on Shortcut 剪藏到哪款 App，以及是否启用自动更新，建议启用。

下载并导入到 快捷指令 App
初始化

配置

紧接着，Web Clipper on Shortcut 会根据你选择的 App 开始针对性的设置引导。这里先以 Obsidian 为例，Web Clipper on Shortcut 会询问你希望将剪藏内容保存到哪个 Vault 和 Vault 下的具体路径。这里假设 Vault 是「Personal」而路径是「SimpleRead」，那么当我剪藏一篇标题叫做「hello clipper」的文章时，Web Clipper on Shortcut 会在「Personal」这个 Vault 的「SimpleRead」目录下创建一个标题是「hello clipper」文件。

初始化 Obsidian 相关配置

权限

最后，Web Clipper on Shortcut 会尝试通过本网站下载一个用于剪藏的 JavaScript 脚本，并申请将数据写入剪贴板的权限，这里全部允许即可。关于 JavaScript 脚本以及剪贴板权限的详细信息可以参考后面的章节。

初始化 Obsidian 相关配置

使用

到这里，Web Clipper on Shortcut 就已经初始化完成了，让我们赶紧看看如果剪藏一个网页。

还是以剪藏到 Obsidian 为例，我们首先需要在 Safari 浏览器中打开需要剪藏的网页并点击底部的「分享」按钮，再在分享面板中点击 Web Clipper on Shortcut。由于我们是初次使用 Web Clipper on Shortcut，系统还会弹出一些权限相关提醒，选择「始终允许」即可。紧接着系统就会自动拉起 Obsidian App 并在我们配置的指定位置创建好文件。然后我们在 Obsidian 的编辑区长按呼出上下文菜单并选择粘贴就可以了。

你会发现，这里粘贴的内容并不是全部网页内容，而是经过「清洗」的网页正文内容，并且已经转换成了 Obsidian 所支持的 Markdown 格式。

开始剪藏到 Obsidian
粘贴剪藏内容到 Obsidian

优化

Web Clipper on Shortcut 刚安装好的时候默认是在 Safari 浏览器分享面板的最下面的，为了让我们使用 Web Clipper on Shortcut 更方便，我们还可以调整它在分享面板中的位置。

调整 Web Clipper on Shortcut 在分享面板中的位置

更多用法

Bear

如果你希望将网页内容剪藏到 Bear，配置更为简单。你只需要跟着初始化引导完成 Web Clipper on Shortcut 的基本配置即可，因为 Bear 不需要像 Obsidian 一样提供类似 Vault 的自定义配置。剪藏操作时也不需要手动执行粘贴操作。

初始化 Bear 相关配置

Craft

如果你希望将网页内容剪藏到 Craft，那么首先需要确定希望将剪藏内容保存到哪个 Space，以及该 Space 的 SpaceId。如果你还希望能将剪藏内容保存到指定的文件夹中，那么你还需要提前获取该文件夹的 FolderId。一个简单的办法是在网页中打开你的 Space 或文件夹，这时浏览器地址栏中的 URL 中就包含了对应的 SpaceId 和 FolderId。URL 一般是下面这种形式：

https://docs.craft.do/s/UserName's-Space--xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx/f/FolderName--xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx

其中第一段 xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx 就是 SpaceId，第二段 xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx 就是 FolderId。

如果你在 Web Clipper on Shortcut 的配置引导中选择了剪藏到 Craft，那么引导程序会在后续的步骤中让你输入 SpaceId 和 FolderId，这里 SpaceId 是必须的，而 FolderId 则可以根据你的个人需要留空。

初始化 Craft 相关配置

配置完成后进行剪藏操作时，也和 Obsidian 一样需要你手动粘贴内容到自动创建的剪藏文件中，同样，因为粘贴内容是由 Web Clipper on Shortcut 提前准备好的，所以这个粘贴过程应该花不了你两秒钟时间。

重置

Web Clipper on Shortcut 的所有配置信息都存储在你的 iCloud 云盘下的 Shortcuts 目录中，打开 Shortcuts 目录你会发现里面有一个 wcos 文件夹，其中存放了 Web Clipper on Shortcut 的所有 JavaScript 脚本和配置信息。如果你在之前的配置过程中失误进行了错误的配置，或者比如你之前选择的剪藏目标是 Obsidian，但现在你希望修改为 Bear，那么你可以简单的删除整个 wcos 文件夹，然后进入快捷指令 App 中重新运行 Web Clipper on Shortcut，你会发现 Web Clipper on Shortcut 会重新运行配置引导，你只用像之前那样进行新的配置就可以了。

重置配置

更新

如果你在配置引导中选择了「启用自动更新」，那么 Web Clipper on Shortcut 会在每个自然月的第一次运行时自动检查是否存在新的版本。如果存在它会提醒你，并引导你到本网站。你只需在快捷指令 App 中删除现在的 Web Clipper on Shortcut，然后在本网页中重新下载安装即可。

如果你没有启用自动更新，你也可以在任何时候进入快捷指令 App，点击运行 Web Clipper on Shortcut 来进行更新检查。Web Clipper on Shortcut 在发现自己不是通过 Safari 浏览器启动时就会自动进入更新检查程序。如果有新版本，你可以按照和上述相同的步骤进行更新。

自动更新
手动更新

原理

Web Clipper on Shortcut 的工作过程大致分为 5 个步骤：

  1. 获取网页正文内容，排除网页框架、广告等不必要的内容。
  2. 过滤掉正文内容中不安全的部分，比如注入脚本等。
  3. 将正文内容由 html 格式转换为 Markdown 格式。
  4. 将文件内容以 Markdown 格式复制到剪贴板，同时通过 URL Scheme 打开指定 App 并创建文件。
  5. 用户手动粘贴剪藏内容到新创建的文件里。

上述步骤的具体逻辑大多是通过 JavaScript 实现的，Web Clipper on Shortcut 快捷指令在运行时会将这些 JavaScript 代码从磁盘读取出来，并注入到网页中运行。

其中前三步分别用 mozilla/readability、cure53/DOMPurify 和 mixmark-io/turndown 这三个开源 JavaScript 库来实现。

另外，你可能已经发现，Web Clipper on Shortcut 在剪藏网页内容到 Obsidian 和 Craft 时，需要你手动粘贴内容到新创建的文件里。这是因为这两款 App 不支持根据 URL Scheme 配置自动读取剪贴板内容，虽然可以通过 URL Scheme 直接传递内容到 App 中，但因为 URL Scheme 的长度有限制，会导致部分剪藏内容丢失，所以 Web Clipper on Shortcut 在设计时就选择了让用户使用时手动粘贴的方案。不过，如前所示，这里剪贴板中的内容是经过 Web Clipper on Shortcut 清洗并进行过格式转换的，所以粘贴之后用户不需要再进一步处理。

如果你用 Web Clipper on Shortcut 剪藏一个包含较多图片的网页到 Bear App，你可能会发现剪藏过程会在 Bear App 的界面卡顿一段时间，这是因为 Bear App 会自动下载网页中的图片资源需要一些时间，具体时间长短取决于你的网络情况。

安全与隐私

如前所述，Web Clipper on Shortcut 在运行时会将一段 JavaScript 脚本注入网页中执行，这意味着网页的内容可以被这段 JavaScript 脚本完整访问。所以每当你在一个新的网站上首次运行 Web Clipper on Shortcut 时，系统都会提醒你。如果你剪藏的网页中正好存在某些敏感信息，而被注入的 JavaScript 脚本中又包含了某些恶意代码，那么这些敏感信息就会有被泄露的风险。事实上，大部分剪藏工具都会存在类似的风险。

为了避免出现这种问题，打消大家使用 Web Clipper on Shortcut 时对数据安全的疑虑，Web Clipper on Shortcut 的源代码是完全公开透明的，你可以在 SilentTiger/web-clipper-on-shortcut 查看 Web Clipper on Shortcut 的所有源码，你也完全可以下载源码然后自行编译使用。

同时，Web Clipper on Shortcut 在将 JavaScript 脚本注入网页前会先通过 MD5 算法检查这段 JavaScript 脚本是否被篡改过，以避免数据安全风险。验证的判据就保存在快捷指令的源文件中，所以不要轻易相信他人发给你的 Web Clipper on Shortcut 快捷指令文件，因为他可能会修改其中的 MD5 判据，从而引入存在安全风险的 JavaScript 脚本。

Web Clipper on Shortcut 在运行过程本身是不依赖网络的，也不会发送任何数据到第三方服务器。

反馈与建议

如果你在使用 Web Clipper on Shortcut 时遇到任何问题，你可以在 SilentTiger/web-clipper-on-shortcut 上提出反馈。

Web Clipper on Shortcut 目前支持的 App 还比较少，如果你希望 Web Clipper on Shortcut 能支持其他 App，并且你希望支持的 App 可以通过 URL Scheme 唤起，那么你也可以在前面那个链接处提一个 issue，我有空了会尽快处理。

当然，如果你恰好还懂一点点 JavaScript，那你完全可以给你希望支持的 App 写一个 launcher，然后给 Web Clipper on Shortcut 提交 Pull Request。launcher 的具体实现可以参考项目中 src/launcher 目录下的写法。

另外，Web Clipper on Shortcut 目前也只针对个别网站做了优化，如果你发现它在剪藏某些网站时效果不理想，比如广告没有去除干净，你也可以提 issue，当然如果你能针对性的实现一个 plugin 然后提 pull request 就更好啦，plugin 的实现可以参考项目中 src/plugin 目录下的写法。

致谢

感谢下面这些项目为 Web Clipper on Shortcut 提供的各种支持。

mozilla/readability
mozilla/readability 被用于抽取网页正文内容，它也是 Firefox Reader View 的基础库。
cure53/DOMPurify
cure53/DOMPurify 被用于过滤掉正文内容中不安全的部分。
mixmark-io/turndown
mixmark-io/turndown 被用于将正文内容由 html 格式转换为 Markdown 格式。
sofish/typo.css
sofish/typo.css 被用于本网页的内容排版和美化。