ObsidianCustomFrames：零基础高效嵌入网页应用的实操指南

2026-03-13 03:10:25作者：翟萌耘Ralph

📋 功能概述：让网页应用成为Obsidian的一部分

当你需要在笔记软件中直接使用网页工具时，ObsidianCustomFrames插件能帮你解决多窗口切换的烦恼。这款工具通过iframe（网页嵌入框架）技术，将外部网页应用无缝集成到Obsidian界面，支持自定义样式调整，让第三方工具与笔记环境融为一体。预设包含Google Keep、Todoist等常用应用，开箱即可使用。

图1：插件运行界面，右侧面板显示嵌入的网页应用

核心价值

一体化工作流：无需切换窗口即可在Obsidian内使用网页工具
个性化定制：通过CSS样式调整嵌入内容的显示效果
多场景适配：支持从预设快速添加或自定义任意网页应用

🔧 环境准备：检查兼容性并搭建开发环境

系统兼容性检测

在开始安装前，需确认本地环境是否满足运行要求。打开终端执行以下命令：

点击展开检测命令

# 检查Node.js版本（需v14.0.0以上）
node -v && npm -v
# 检查Git是否安装
git --version

开发环境搭建步骤

操作项	预期结果	注意事项
克隆项目仓库	本地生成ObsidianCustomFrames文件夹	确保网络通畅，克隆时间取决于网络速度
安装依赖包	项目目录下生成node_modules文件夹	如遇权限问题，可在命令前添加sudo
执行构建命令	生成dist文件夹及插件主文件	构建成功无报错信息，出现"build complete"提示

点击展开详细命令

# 克隆项目代码
git clone https://gitcode.com/gh_mirrors/ob/ObsidianCustomFrames
# 进入项目目录
cd ObsidianCustomFrames
# 安装依赖
npm install
# 构建项目
npm run build

⚙️ 核心流程：从安装到使用的完整路径

插件安装到Obsidian

当完成本地构建后，需要将插件安装到Obsidian中：

打开Obsidian软件，进入设置界面
选择"社区插件"选项，点击"浏览"按钮
搜索"Custom Frames"，找到对应插件后点击"安装"
安装完成后启用插件，此时设置界面会出现插件专属配置项

基本使用方法

成功安装后，通过以下步骤使用插件功能：

操作项	预期结果	注意事项
打开命令面板	显示所有可用命令列表	快捷键通常为Ctrl+P（Windows）或Cmd+P（Mac）
输入"Custom Frames: Open"	显示可用的帧列表	首次使用时列表仅包含预设应用
选择目标应用	右侧面板加载指定网页	首次加载可能需要登录网页账号

🔨 高级配置：打造个性化嵌入体验

自定义帧配置

当预设应用无法满足需求时，可创建自定义帧：

进入插件设置界面，点击"Add Frame"按钮
在弹出窗口中填写以下信息：
- Display Name：显示名称（如"Notion工作台"）
- URL：目标网页地址（如"https://www.notion.so"）
- Minimum Width：最小宽度（建议设为370）
点击"Add"完成创建

图2：自定义帧配置界面，可设置显示名称、URL和样式

实用配置案例

案例1：隐藏Google Keep顶部导航栏

场景：嵌入Google Keep时，顶部导航栏占用空间且影响美观
配置代码：

/* 隐藏导航栏和标题 */
header, .IZ65Hb-n0tgWb {
  display: none !important;
}

效果：移除顶部导航区域，增加笔记显示空间

案例2：调整Todoist任务列表样式

场景：使嵌入的Todoist与Obsidian深色主题更协调
配置代码：

/* 深色主题适配 */
body {
  background-color: #2d2d2d !important;
  color: #e0e0e0 !important;
}
/* 调整任务项样式 */
.task_list_item {
  border-bottom: 1px solid #444 !important;
}