Developing a Plugin for Obsidian: Useful Resources and Tips

In this article, we'll look at how I came to develop a plugin for Obsidian, and I'll share some useful resources I came across while developing this plugin.

First of all, what is Obsidian? It's a tool that lets you take notes (a bit like Notion or OneNote), but with a system of connections between notes. For example, if you're talking about a car, you can link to a sheet explaining what wheels are.

Obsidian is often used as a second brain (GTD principles, Zettelkasten, etc.). In short, a great personal development tool!

Personally, I use it daily. Now, I write my articles, I keep interesting tools, I explore new technos; in short, it's my Wikipedia and my personal sandbox!

Okay, now that we know what we're talking about, why make a plugin on Obsidian and how? For my part, I write my articles on this tool, and I needed to be able to export my articles from my Obsidian notes directly as articles on my blog, which is managed on Strapi for that matter.

So, how does an Obsidian plugin work? Simple:

The technology, JavaScript, and the Obsidian library, which contains the various basic Obsidian functions for interacting with their software's internal API.

So the initial requirement was to go through the note, upload all the images to my S3 where I store my images, replace the image links with external links (links to my image API), then upload the article to Strapi.

After that, several improvements were necessary. When uploading, the image and context had to be passed to ChatGPT and GPT Vision, to analyze the image and context, and output an alternative text.

Then, using the same context, I had to fill in the various fields required to upload my article (description for Google, title, tags, etc.), following a JSON template provided in our plugin's settings, and the description of the same plugin.

I've also added the ability to add a custom prompt, its OpenAPI key, to add additional images, another alternative call (which I use for uploading a realization and not a blog post).

So, here's my project roadmap at the beginning.

Little tip: ctrl + shift + i to access the debugging console in Obsidian (it's an embedded browser, in Chromium, so it's the same debugging tool as Chrome!).

Obsidian hot-reload plugin:(GitHub - pjeby/hot-reload: Automatically reload Obsidian plugins in development when their files are changed) to make it more pleasant to develop on Obsidian.

Base template: GitHub - obsidianmd/obsidian-sample-plugin, a default plugin so you can have an example.

Obsidian developer documentation: Home - Developer Documentation

The plugin I developed and published on NPM:

Frankly, it's a bit scary at first, but it's really easy to develop in the Obsidian environment and add plugins for just about anything and everything. In short, I now have my own plugin to automatically add my articles to my website!