Build a plugin

Official Guide

when working on a plugin run npm run dev in a command line to keep the file up-to-date

Process

Downloaded Git
Downloaded Nodedotjs
Downloaded Visual Studio Code

Use a test vault - created "PlugTestVault"

STEPS 1-2

In Windows Command Prompt, typed the following

cd C:\Users\toy4t\Documents\PlugTestVault
mkdir .obsidian\plugins
cd .obsidian\plugins
git clone https://github.com/obsidianmd/obsidian-sample-plugin.git
cd obsidian-sample-plugin
npm install
npm run dev

Windows Command Prompt now says "[watch] esbuild.config.mjs"

STEP 3

Close Obsidian Test Vault and re-open
Open Settings -> Community plugins -> turn on community plugins -> enable Sample Plugin

STEP 4

Open "manifest.json" with Visual Studio Code

Changed id from "sample-plugin" to "my-first-sample-plugin"
Changed name from "Sample Plugin" to "My First Test Plugin"
Save file
Restart Obsidian Test Vault
Notice plugin name was changed and is no longer enabled
Re-enable the plugin

STEP 5

Open "main.ts" with Visual Studio Code
Changed plugin class from "MyPlugin" to "HelloWorldPlugin" in line 13 Pasted image 20231004154811.png

Added following code in after line 78

this.addRibbonIcon('dice', 'Greet', () => { new Notice('Hello, world!'); });

Save File
Use Command Palette in Obsidian to "Reload app without saving"
Notice another dice symbol on left, click it and see message pop-up on right

Could later: Install the Hot-Reload plugin to automatically reload your plugin while developing.

After

Changed line 117 and 119 from "MyPlugin" to "HelloWorldPlugin" (were showing errors)

Added Python plug-in and downloaded Python 3.11
Added JavaScript Plugin "JavaScript (ES6) code snippets"

See Also

JSON
Python 3.11
Scripting Languages

Helpful Info

Descriptions/Basic Walkthrough