Web Clipping into Obsidian with MarkDownload and Automator

Obsidian is almost perfect for me, but I need a web clipper. With a little scripting, this shouldn't be an issue.

Web Clipping into Obsidian with MarkDownload and Automator
Photo by Patrick Tomasso / Unsplash

After a month of test driving different note-taking apps, Obsidian has come away as my favorite. And honestly, it wasn't even close. It checked almost every box for me:

✅ Local storage
✅ Markdown (or easily, reliably, and scriptably convertible to Markdown)
✅ Backlink support
✅ Good interface
❌ Solid web clipper

The only place it fell short for me was the web clipping options with no official browser plugins (at least as of writing this). There are several 'Clip to Markdown' extensions that give you markdown to copy, but nothing that would dump the page directly into my Obsidian vault. I want something that's one click.

There is an unofficial Obsidian plugin for Chrome and Firefox in the works. It's in beta, but it looks promising. I had some consistency issues when I tried it, but I'll be keeping an eye on it.

MarkDownload does a solid job at converting web pages to Markdown, and it's pretty customizable with export options. By default it converts and downloads a markdown file, and has options for downloading images too. The sticking point with this for me is that downloads are restricted to the browser's download folder (I'm guessing this is a browser limitation), so I can't save directly to my vault.

I could write a script to automatically move the files, but I'd need a way to watch the folder they download to. Having been a Mac user for a whole week as of this writing, I hadn't yet discovered Automator, the built-in automation utility for Mac. I haven't played with it enough yet to know what it's capable of, but one thing it does let you do is watch a specific folder and execute a script when new files hit that folder. Neat.

The works

After tinkering for about an hour, here's what I came up with:

Folder Setup

I've got two folders I'm working with: z_webclips in my downloads folder, and clipped in my Obsidian vault. There's a resources folder in each of those for images.

Downloads folder:

  • Downloads
    • z_webclips
      • resources

Obsidian Vault:

  • main (vault root)
    • clipped
      • resources

MarkDownload config

Set z_webclips as the destination for MarkDownloaded clips:

Select "Download images alongside markdown files" and save them in the resources directory. You can choose to have the markdown file reference the online source images, but I like to keep my own copy.

Automator

  • Create a new Folder Action, and select the folder where MarkDownload is dropping the markdown files (z_webclips for me)
  • From the 'Utilities' panel on the left, select 'Run Shell Script'
  • Put the command to run in the box like so:

Python is a shell option here, but I wanted to run in a python environment I control (otherwise you use the system python), so I'm running a zsh command to execute a Python script.

Note: Automator has the option to filter out files that are dropped in and pass them along to the next step of the automation, which can be copying/moving files. I tried this, but results were inconsistent for me - sometimes files just wouldn't get picked up.

Clip fetcher script

I wrote this in Python, but a shell script would work just as well.

Result

When I clip an article with MarkDownload, the resulting markdown file and linked images are downloaded, the article is moved into the clipped folder in Obsidian, and all of it's image dependencies are tucked away neatly in a folder under the clipped/resources folder. Not too shabby.