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插件开发

相关推荐
tang游戏王1232 分钟前
AJAX进阶-day4
前端·javascript·ajax
如影随从7 分钟前
04-ArcGIS For JavaScript的可视域分析功能
开发语言·javascript·arcgis·可视域分析
web前端神器1 小时前
forever启动后端服务,自带日志如何查看与设置
前端·javascript·vue.js
才艺のblog1 小时前
127还是localhost....?
javascript·https·浏览器特性
今天是 几 号1 小时前
WEB攻防-XSS跨站&反射型&存储型&DOM型&标签闭合&输入输出&JS代码解析
前端·javascript·xss
进击的阿三姐2 小时前
vue2项目迁移vue3与gogocode的使用
前端·javascript·vue.js
风火一回2 小时前
webpack+webpack server入门
javascript·webpack
nbsaas-boot3 小时前
为什么面向对象的设计方法逐渐减少
前端·javascript·vue.js
binnnngo3 小时前
网页计算器的实现
javascript·css3·html5
是只蓝胖子呀~3 小时前
笛卡尔乘积算法js实现
开发语言·前端·javascript