Obsidan插件开发

1 Obidian 开发

Obsidian 基于 Electron 框架开发,其前端主要使用了 HTML、CSS 和 JavaScript,而后端使用了 Node.js。Node.js 是基于 Chrome V8 引擎的 JavaScript 运行环境,使 JavaScript 能在服务器端运行。

在开发 Obsidian 插件时,将涉及 JavaScript 和 Node.js 的相关知识。如:使用 Node.js 提供的模块和 API 来进行文件操作、访问系统资源、处理网络请求等。

2 开发环境

我的开发环境为:VSCode + Node Docker+ Copilot。这样既不影响我的宿主机环境,开发也比较舒服,还可以利用辅助编码工具。

如果想开发 Obsidian 插件,就需要安装 Node.js 环境。Node.js 提供了 JavaScript 运行环境和许多内置模块;同时,安装 Node.js 也会安装 npm,用来管理插件项目的依赖项。

因为之前安装过 node 镜像,这次就直接使用了:

$ docker run --name obdev --rm -v /exports:/exports -it node:16-alpine sh
$ npm -v # 8.19.4

3 最简单示例

3.1 创建插件

三方插件至少需要:main.jsmanifest.jsonstyles.css 三个文件。

官方推荐从最简单的示例代码开始,略做修改即可实现自己的插件:

# git clone https://github.com/obsidianmd/obsidian-sample-plugin
# cd obsidian-sample-plugin
# npm install
# npm run dev # 开启热编译模式,修改时自动编译

此时编译出 main.js
将上述三个文件复制到plugins目录

# cd obroot/.obsidian/plugins/
# mkdir obsidian-sample-plugin
# cp x/main.js x/manifest.json x/styles.css obsidian-sample-plugin/

也可选择把代码放在 .obsidian/plugins下,则不需要复制,调试更方便

此后重启 Obsidian,在已安装的第三方插件列表中,将看到"Sample Plugin"。只需启用它即可。

在示例代码中,可以看到一些 TypeScript 脚本。Node.js 不直接运行 TypeScript 文件。通过编译器将 TypeScript 文件编译为 JavaScript 文件后运行。可以在 package.json 文件中看到 tsc 的编译过程。

TypeScript 是 JavaScript 的一个超集(一个集合包含另一个集合的所有元素,还包含额外的元素),TypeScript 包含了 JavaScript 的所有特性和语法,同时还添加了静态类型系统等新功能。另外,还可以使用 React,VUE,或者 Svelte 来实现插件。****

3.2 主要文件说明

  • main.js # 编译后的程序
  • styles.css # 样式
  • manifest.json # 插件信息
  • main.ts # 程序入口 typescript
  • package.json # 配置管理文件

3.3 修改插件

3.3.1 manifest.json

  • 修改唯一标识 id
  • 修改插件名 name

3.4 重新加载插件

由于已在编译环境中设置了 npm run dev 来进行热编译,所以一旦程序修改保存,就会立即编译成 js。

在 Obsidian 的设置中,你可以通过禁用再启用该插件来重新加载它,以使用修改的功能;需要注意的是:每次禁用再启用设置都会丢失原有设置。

4 常用功能

以下是我们经常使用的一些插件功能:

  • 使用 Ctrl+P 命令快速调用功能
  • 弹出对话框界面
  • 定时执行特定任务,如同步,上传和下载
  • 在特定位置显示更多信息或界面,如图标、提示、选项卡和侧边栏
  • 修改文档内容
  • 读写和显示设置信息

5 使用体会

我使用了 VSCode+Copilot,这样就不再需要搜索各种代码用法,只需提供简单文本描述来自动生成代码,真的是只要会一点 JavaScript 语法就行。

可能你觉得我说得有点夸张,但一旦环境搭建好,编程就和写作文差不多。目前看来,陌生的技术已经不再是难题,90% 的时间都会用于业务逻辑的处理。

6 参考资源

6.1 api 详解

https://github.com/obsidianmd/obsidian-api

该项目详细阐述了如何编写各特定文件。

6.2 中文文档

https://luhaifeng666.github.io/obsidian-plugin-docs-zh/

强烈推荐这个中文文档,它包含了 Obsidian 插件常用的控件方法,并配有示例,只需复制即可使用。此外,这个帮助文档本身也是一个开源项目,之前大家可以参与编辑和提交。

6.3 官方文档

Obsidan插件开发

相关推荐
Ciito8 分钟前
vue项目使用eslint+prettier管理项目格式化
前端·javascript·vue.js
fighting ~44 分钟前
react17安装html-react-parser运行报错记录
javascript·react.js·html
老码沉思录1 小时前
React Native 全栈开发实战班 - 列表与滚动视图
javascript·react native·react.js
abments1 小时前
JavaScript逆向爬虫教程-------基础篇之常用的编码与加密介绍(python和js实现)
javascript·爬虫·python
老码沉思录1 小时前
React Native 全栈开发实战班 - 状态管理入门(Context API)
javascript·react native·react.js
文军的烹饪实验室2 小时前
ValueError: Circular reference detected
开发语言·前端·javascript
老码沉思录4 小时前
写给初学者的React Native 全栈开发实战班
javascript·react native·react.js
我不当帕鲁谁当帕鲁4 小时前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段
前端·javascript·arcgis
那一抹阳光多灿烂4 小时前
工程化实战内功修炼测试题
前端·javascript
红中马喽7 小时前
JS学习日记(webAPI—DOM)
开发语言·前端·javascript·笔记·vscode·学习