Web Clipper on Shortcut

Web Clipper on Shortcut is a web clipping shortcut that helps you quickly clip the main content of a webpage from browsers like Safari to various apps.

Demo

Web Clipper on Shortcut currently supports clipping webpage content to three apps: Obsidian, Craft, and Bear:

Clip to Obsidian

Clip to Craft

Clip to Bear

Web Clipper on Shortcut can be used not only on iOS but also on macOS.

Clip to Bear mac client

Quick start

Install

First, click the icon above in the Safari browser to download and import Web Clipper on Shortcut into your Shortcuts app. Then, simply run Web Clipper on Shortcut directly from the Shortcuts app. If this is your first time using it, Web Clipper on Shortcut will immediately initiate the setup process, asking which app you want to clip content to and whether to enable automatic updates (enabling updates is recommended).

Download and import to Shortcut App

Initialize

Configuration

Next, Web Clipper on Shortcut will guide you through an app-specific setup process based on your selected app. For example, if you choose Obsidian, Web Clipper on Shortcut will ask you to specify which Vault to save the clipped content in and the specific path within that Vault. Let’s assume the Vault is “Personal” and the path is “SimpleRead.” When you clip an article titled “hello clipper,” Web Clipper on Shortcut will create a file titled “hello clipper” in the “SimpleRead” directory of the “Personal” Vault.

Init config for Obsidian

Authorization

Finally, Web Clipper on Shortcut will attempt to download a JavaScript script for clipping from this website and request permission to write data to the clipboard. Simply allow all these permissions. For more details about the JavaScript script and clipboard permissions, refer to the subsequent sections.

Init config for Obsidian

Usage

Now the Web Clipper on Shortcut is ready to use. Let's try to clip a webpage.

Still taking clipping to Obsidian as an example, start by opening the webpage you want to clip in the Safari browser. Tap the “Share” button at the bottom, then select Web Clipper on Shortcut from the share menu. Since this is your first time using Web Clipper on Shortcut, the system will display several permission prompts—simply choose “Always Allow.” Next, the system will automatically launch the Obsidian app and create a file at the configured location. Then, in Obsidian’s editor, long-press to bring up the context menu and select “Paste” to complete the process.

You’ll notice that the pasted content isn’t the entire webpage but the “cleaned” main content of the webpage, which has already been converted into Markdown format supported by Obsidian.

Start clip to Obsidian

Paste into Obsidian

Optimization

When Web Clipper on Shortcut is first installed, it is located at the bottom of the Safari browser's share sheet by default. To make it more convenient for us to use Web Clipper on Shortcut, we can also adjust its position in the share sheet.

Change the position of Web Clipper on Shortcut in share panel

Additional Usage

Bear

If you wish to clip web content to Bear, the configuration is simpler. You only need to follow the initialization guide to complete the basic configuration of Web Clipper on Shortcut, as Bear does not require custom configurations like Vault in Obsidian. During the clipping operation, there is no need to manually perform the paste operation.

Init config for Bear

Craft

If you wish to clip web content to Craft, you first need to determine which Space you want to save the clipped content to, as well as the SpaceId of that Space. If you also want to save the clipped content to a specific folder, you need to obtain the FolderId of that folder in advance. A simple way to do this is to open your Space or folder in the web browser, where the URL in the address bar will contain the corresponding SpaceId and FolderId. The URL is generally in the following format:

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

The first segment xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx is SpaceId，and the second xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx is FolderId。

If you choose to clip to Craft during the configuration guide of Web Clipper on Shortcut, the guide will prompt you to enter the SpaceId and FolderId in subsequent steps. The SpaceId is mandatory, while the FolderId can be left blank according to your personal needs.

Init config for Craft

After completing the configuration, when performing the clipping operation, it is also necessary to manually paste the content into the automatically created clipping file, just like with Obsidian. However, since the content to be pasted is prepared in advance by Web Clipper on Shortcut, this pasting process should take no more than two seconds.

Reset

All configuration information for Web Clipper on Shortcut is stored in the Shortcuts directory under your iCloud Drive. Opening the Shortcuts directory, you will find a folder named wcos, which contains all the JavaScript scripts and configuration information for Web Clipper on Shortcut. If you made a mistake during the previous configuration process or, for example, if you previously chose Obsidian as the clipping target but now wish to change it to Bear, you can simply delete the entire wcos folder and then rerun Web Clipper on Shortcut in the Shortcuts app. You will find that Web Clipper on Shortcut will rerun the configuration guide, and you can simply follow the new configuration process as before.

Reset config

Update

If you selected “Enable Automatic Updates” during the setup, Web Clipper on Shortcut will automatically check for new versions the first time it runs each calendar month. If an update is available, it will notify you and guide you to this website. To update, simply delete the current Web Clipper on Shortcut from the Shortcuts app and download and install the latest version from this webpage.

If you didn’t enable automatic updates, you can manually check for updates at any time by opening the Shortcuts app and running Web Clipper on Shortcut. When Web Clipper on Shortcut detects that it wasn’t launched through the Safari browser, it will automatically enter the update check process. If a new version is available, you can update it by following the same steps mentioned above.

Auto update

Manual update

Principle

The workflow of Web Clipper on Shortcut generally consists of 5 steps:

Obtain the main content of the web page, excluding unnecessary elements such as web frameworks and advertisements.
Filter out unsafe parts of the main content, such as injected scripts.
Convert the main content from HTML to Markdown.
Copy the content to the clipboard, and simultaneously open the specified app and create a file via URL Scheme.
The user manually pastes the clipped content into the newly created file.

The logic of the above steps is mostly implemented through JavaScript. The Web Clipper on Shortcut shortcut instruction reads these JavaScript codes from the disk and injects them into the web page to execute.

The first three steps are implemented using these three open-source JavaScript libraries: mozilla/readability, cure53/DOMPurify and mixmark-io/turndown.

Additionally, you may have noticed that Web Clipper on Shortcut requires you to manually paste the content into the newly created file when clipping web content to Obsidian and Craft. This is because these two apps do not support automatically reading clipboard content based on URL Scheme configuration. Although content can be directly passed to the app via URL Scheme, the length of the URL Scheme is limited, which can result in the loss of some clipped content. Therefore, Web Clipper on Shortcut was designed to require manual pasting by the user. However, as previously shown, the content in the clipboard has been cleaned and formatted by Web Clipper on Shortcut, so users do not need to further process it after pasting.

If you use Web Clipper on Shortcut to clip a web page containing a large number of images to Bear App, you may notice that the clipping process causes the Bear App interface to freeze for a while. This is because Bear App automatically downloads the image resources from the web page, which takes some time, depending on your network conditions.

Security and Privacy

As mentioned earlier, Web Clipper on Shortcut injects a JavaScript script into the webpage for execution during its runtime. This means that the JavaScript script has full access to the content of the webpage. Therefore, the system will notify you the first time you run Web Clipper on Shortcut on a new website. If the webpage you’re clipping contains sensitive information and the injected JavaScript script includes malicious code, there is a potential risk of this sensitive information being exposed. In fact, similar risks exist with most web clipping tools.

To avoid such issues and to alleviate concerns about data security when using Web Clipper on Shortcut, the Web Clipper on Shortcut is completely an open-source project. You can have the source code at SilentTiger/web-clipper-on-shortcut.

At the same time, Web Clipper on Shortcut performs an MD5 checksum on the JavaScript script before injecting it into a webpage to ensure that the script has not been tampered with, reducing data security risks. The verification criteria are stored in the shortcut’s source file, so you should not easily trust Web Clipper on Shortcut shortcut files sent by others. They might modify the MD5 criteria to introduce potentially unsafe JavaScript scripts.

Web Clipper on Shortcut does not rely on the network during its operation and does not send any data to third-party servers.

Feedback

If you have any problem when using Web Clipper on Shortcut, you can fire an issue at SilentTiger/web-clipper-on-shortcut.

Web Clipper on Shortcut currently supports only a limited number of apps. If you’d like it to support additional apps and the app you want can be launched via URL Scheme, you can submit an issue through the earlier link. I’ll address it as soon as I have time.

Of course, if you happen to have a basic understanding of JavaScript, you can write a launcher for the app you wish to support and submit a Pull Request to Web Clipper on Shortcut. The specific implementation of the launcher can be referred to in the src/launcher directory of the project.

Additionally, Web Clipper on Shortcut has only been optimized for a few specific websites. If you find that it does not perform well when clipping certain websites, such as not removing ads completely, you can raise an issue. Of course, it would be even better if you could implement a specific plugin and submit a pull request. The implementation of the plugin can be referred to in the src/plugin directory of the project.

Thanks and Acknowledgments

Thanks to the following projects for providing various supports to Web Clipper on Shortcut.

mozilla/readability: mozilla/readability is used to extract the main content of web pages and is also the foundational library for Firefox Reader View.

cure53/DOMPurify: cure53/DOMPurify is used to filter out unsafe parts of the main content.

mixmark-io/turndown: mixmark-io/turndown is used to convert the main content from HTML to Markdown.

sofish/typo.css: sofish/typo.css is used for the content layout and beautification of this webpage.