Inspired from some recent discussions within the Obsidian community on Discord and Mastodon, I decided to take a deeper look into how I could build my own curated collection of web content within Obsidian (i.e., bookmarks).
Usually, I try not to push Obsidian too hard, meaning I don't particularly enjoy the idea of making it something it doesn't need to be– but at the end of the day, what's on the web is simply content, and content can be organized in a way that is useful to the user. We're talking metadata, commentary, tags, page content, and the like.
In an ideal world, I'd be able to have something nested between my browser and my Obsidian vault that would allow me to quickly capture all of this in a new note that stores it all. Straightforward, right? Sort of. There are a couple of options available out there, and I would imagine that using some sort of Raindrop.io import is what the majority of people use. Personally, I find Raindrop a bit too bulky, and I don't want to have to rely on both an extension and a plugin. Obsidian is just markdown files at its core, so I wanted a solution that simply created files locally without being reliant on any kind of sync.
Enter Raycast (again, I know). Raycast already has an Obsidian Bookmarks extension but for some reason I wasn't able to get it working the way it was intended to work, nor could I adapt it to my particular style (for example, being unable to change the format of the output).
So I decided to build my own extension ✨
From Browser Window to Obsidian
It's available here, on the Raycast Store. I've dubbed the exntension "Obsidian Clippings", and it's a little bit more involved than a simple bookmark manager. At its core, the extension will prompt you to enter a few details about anything on the web you might want to save, namely: URL, Title, Sub-Folder, Tag(s), and Comments.
Notes saved via Obsidian Clippings are organized via sub-folders that serve as top-level categories, such as food or design, and are complemented by tags for further organization. Sub-folders are not mandatory, but I like to use them. Optionally, Raycast AI can be used to summarize content and save page content, but at the minimum the "metadata" you enter is always saved for those without access to Raycast AI.
There's a couple of limitations here:
- If the content is too much to parse for Raycast AI (4096 tokens at of ChatGPT 3), it will only save the content without the summary as a fallback. Once ChatGPT 4 is rolled out, I'll increase this limit.
- If there are no paragraph elements on the page, only the metadata you provide will be saved.
- Using the same title and sub-folder as a previous note will override existing content, but this is unlikely to be a big issue for most.
- There is validation on most fields. If you happen to add a URL into the URL field that can't be fetched by the extension, it will not allow you to continue. The same goes for titles or tags that go against traditional file name conventions.
The extension will provide you with helpful notifications while it parses a URL, and adds different messaging into the note itself if and when something doesn't go as expected.
There are also a few things that you must configure prior to using the extension:
- The root folder of your Clippings. I've stored this in a "Bookmarks" folder at the root level of the vault. All sub-folders are stored here if used.
- The prompt to use for summaries, such as "Summarize the following content in 5 bullets." You can come up with some pretty interesting results by changing this around, but I find the 5 bullets easiest.
You can of course configure both of these things after you've set them, should you change your mind. Let's see a few examples of this in action:
Some Examples
It's worth noting that the solution I came up with is opinionated, but I'm excited to see what readers think. Gathering feedback is a natural process for any open source application (extension or otherwise) so please send me feedback on Github if you take the time to use it. There are some features that I might add in the near future (if feasible) to make it a bit more user friendly:
- Auto-fetch existing sub-folders to populate a drop-down list.
- Auto-populate existing tags.
- Menu bar option to launch for those that don't want/like to use hotkeys.
- Option to toggle content parsing only rather than it being a part of Raycast AI.
- Different note formatting options to select from. This will largely be based on feedback received.
That being said, initially I had no idea how to do any of this. I used a combination of the Raycast API documentation, and Raycast AI itself to help me build it out!
Taking that into consideration, it may take a while to build these additional quality of life features, but I'll try to get around to it if I have the time. Standing on it's own though, I believe it does exactly what I set out to do, with maybe a little extra 💪🏻
