Obsidian 個人外掛開發紀實——0x01

語言: CN / TW / HK

時間 2022-06-18 22:40:41 Shadow Walker 松煙閣

背景

年初給自己做年度規劃的時候有想過做一些副業（side-projects），同時在使用 Obsidian 的時候發現缺少一些自己期望的 feature，例如可以快捷鍵或者 slash command 的方式快速開啟或者關閉外掛，於是就想以開發 Obsidian 外掛來嘗試自己的副業。

副業紀實會是一個系列的文章，主要是記錄我真正從0開始開發一個副業專案的過程：

反思痛點 --> 前期調研 --> 提煉需求 --> 專案設計 --> 架構設計 --> 程式碼開發 --> 測試釋出 --> 回饋社群 。主要會記錄下這期間我碰到什麼問題，怎麼解決的，經驗總結和積累等等。目前的副業專案主要還是學習和練手，在競品調研、產品設計、產品力等方面會有不足，這些都還不是目前關注的重點，種一棵樹最好的時間是十年前和現在。

Obsidian 外掛開發準備

最初我是很猶豫將 Obsidian 外掛開發作為副業，主要是技術棧的問題——我熟悉的領域的 infra，像 Obsidian plugin 涉及到的 nodejs、css、React 這些前後端開發對我來講是完全陌生的，投入的成本會比較高。這件事情就這麼擱置了，後來某次午休的時候簡單的翻看了一下 Typescript 語法手冊，發現比較簡單，很多概念跟我已有的技術儲備是相通的，這也就大大降低了我的心理負擔。

痛點和 idea

痛點

我的 Obsidian vault 除了在 iCloud 上做同步之外，還採用了 obsidian git 外掛作為工具備份到 github private repo。由於外掛（或者也可能是 Obsidian 本身同步機制的問題），obsidian git 外掛開啟的時候，我在編輯器裡面做文字點選的時候會有經常出現卡頓，主要原因是 simple git freeze Obsidian 類似某些帶 gc 的語言（golang、Java）有 stop the world 的效能問題，目前這個問題社群還沒有很好的解決辦法。

為了 workaround，obsidian git 外掛我預設是關閉的，在需要備份的時候我再開啟外掛進行備份，這個過程每次都需要進入 community plugins 找到 obsidian-git 點選 enable 按鈕，然後在通過 backup 命令進行 obsidian vault 的備份問題，這個期間 obsidian 基本上沒法做編輯的工作。

idea

每次 enable/disable 某個外掛通過快捷鍵或者 slash command 或者 quickadd macro 進行操作：

step1，通過 quickadd macro 定製 enable obsidian-git 外掛的 macro
step2，通過 quickadd macro 定製 backup vault 的 macro
step3，通過 quickadd macro 定製 disable obsidian-git 外掛的 macro
step4，將上述幾個 macro 歸一併繫結到快捷鍵
step5，需要備份的時候直接鍵盤按下快捷鍵即可

這個 idea 中 step2 中的 backup vault 目前 obsidian-git 外掛已經提供介面（命令）：

step1、step3 目前 obsidian 官方和外掛頭沒有提供相關的能力，URI 也沒有相關的介面，目前看來只能通過外掛來做了。

PoC 驗證

在 Obsidian 除錯環境中測試了一下是否有相關的介面來做我想做的事情，如下測試程式碼：

for (var key in app.plugins.manifests) {
    var id = plugins[key].id
    console.log(id, " enabled status: ", app.plugins.enabledPlugins.has(id))
}
app.plugins.enablePluginAndSave('obsidian-git')
app.plugins.enabledPlugins.has('obsidian-git')

Obsidian 外掛開發周邊

官方文件

關於 Obsidian 外掛開發官方給出了一個 Community plugins Obsidian Help ，這裡提供了外掛開發需要一些東西：

sample repo: http://github.com/obsidianmd/obsidian-sample-plugin
API repo: http://github.com/obsidianmd/obsidian-api
API docs(unofficial): http://marcus.se.net/obsidian-plugin-docs

Obsidian 社群 FAQ

obsidian 運營了一個非常不錯的社群，裡面有比較多的幫助外掛開發的 thread：

下一步

在正式投入外掛的開發設計之前，還有幾件事情需要做一下：

補齊自己還不掌握的技術棧；
Obsidian plugin UI/UX 調研；

技術棧

下面是外掛開發我還需要補全的技術棧：

javascript
typescript
nodejs
React？

Obsidian 外掛 UI/UX 調研

Obsidian 外掛涉及到 UI 元件的操作，所以需要調研和確認 Obsidian plugin UI/UX 相關的內容和文件，同時進行必要的 PoC 程式碼驗證。

References

「其他文章」