Obsidian Custom Frames 完全掌握：将网页应用无缝集成到笔记系统的终极指南

你是否曾希望在 Obsidian 中直接使用 Google Keep 记笔记，或者在处理文档时同时查看 Todoist 任务？当我们在知识管理中需要频繁切换不同工具时，工作流的中断会严重影响效率。Obsidian Custom Frames 插件正是为解决这一痛点而生——它通过 iframe（可以理解为在 Obsidian 中开了扇小窗户）将网页应用直接嵌入为面板，并支持自定义样式，让你的所有工具在一个界面协同工作。本文将带你从安装到高级配置，全方位掌握这款提升工作流效率的必备插件。

为什么选择 Obsidian Custom Frames？

在信息爆炸的时代，我们的工作流常常分散在多个应用中：用 Obsidian 管理知识、Google Keep 记录灵感、Todoist 跟踪任务……频繁的应用切换不仅打断思路，还会导致信息碎片化。Obsidian Custom Frames 插件通过以下核心价值解决这些问题：

• 一站式工作环境：将第三方网页应用直接嵌入 Obsidian 侧边栏或编辑区，无需离开笔记系统即可完成多任务处理
• 个性化界面：通过自定义 CSS 样式调整嵌入应用的外观，使其与 Obsidian 主题完美融合
• 丰富预设支持：内置 Google Keep、Todoist 等常用应用的预设配置，开箱即用
• 开发者友好：使用 TypeScript（JavaScript 的强类型扩展）开发，支持自定义扩展和高级配置

快速上手：两种安装方式任选

方式一：常规用户安装（推荐）

如果你只需使用插件的基本功能，通过 Obsidian 社区插件商店安装是最简便的方式：

1. 打开 Obsidian，进入「设置」→「社区插件」
2. 关闭「安全模式」（首次安装第三方插件时需要）
3. 点击「浏览」按钮，在搜索框输入「Custom Frames」
4. 找到插件后点击「安装」，完成后点击「启用」

方式二：开发者模式安装

如果你想体验最新功能或进行二次开发，可以通过源码构建安装：

1. 克隆项目代码库到本地（确保已安装 Git）：

   git clone https://gitcode.com/gh_mirrors/ob/ObsidianCustomFrames
   

2. 进入项目目录并安装依赖（需提前安装 Node.js 和 npm）：

   cd ObsidianCustomFrames
   npm install  # 安装项目依赖包
   

3. 编译生成插件文件：

   npm run build  # 将TypeScript代码编译为Obsidian可识别的JavaScript
   

4. 手动安装到 Obsidian：

   • 打开 Obsidian 设置 →「社区插件」→「文件夹图标」（打开插件目录）
   • 将编译好的项目文件夹复制到插件目录中
   • 返回 Obsidian 刷新插件列表，启用「Custom Frames」

从零开始：配置你的第一个嵌入面板

成功安装插件后，我们来配置一个实用的嵌入面板。以 Google Keep 为例，只需三步即可完成：

步骤1：打开插件设置界面

在 Obsidian 中，进入「设置」→「社区插件」→找到「Custom Frames」→点击「设置」按钮，打开插件配置面板。

步骤2：添加预设应用

在配置界面中：

• 点击「Custom」下拉菜单，选择「Google Keep」预设
• 确认显示名称（默认"Google Keep"）和 URL（默认"https://keep.google.com"）
• 可根据需要调整最小宽度（默认370像素，设为0则禁用自动调整）

图：Google Keep 预设配置界面，可设置显示名称、URL、最小宽度和自定义CSS

步骤3：打开嵌入面板

配置完成后，使用以下任一方式打开面板：

• 按下 Ctrl+P（或 Cmd+P）打开命令面板，搜索「Custom Frames: Open」
• 在命令列表中选择刚刚配置的「Google Keep」，面板将在侧边栏打开

图：Obsidian 右侧边栏显示的 Google Keep 嵌入面板，可直接编辑笔记

进阶技巧：打造个性化嵌入体验

自定义CSS样式：让嵌入应用融入Obsidian

插件支持通过自定义CSS调整嵌入应用的外观。例如，隐藏Google Keep的顶部导航栏：

1. 在帧配置界面找到「Additional CSS」输入框
2. 添加以下CSS代码：

   /* 隐藏Google Keep的导航栏和标题 */
   .gb_Rd, .gb_Wa { display: none !important; }
   

3. 保存配置后，嵌入面板将自动应用新样式

💡 技巧：按 F12 打开浏览器开发者工具，使用元素选择器定位需要隐藏或修改的界面元素，复制其CSS类名进行自定义。

Markdown中嵌入帧：内容与工具的无缝结合

除了侧边栏面板，你还可以在Markdown文档中直接嵌入帧：

1. 创建一个代码块，指定语言为 custom-frames
2. 在代码块中填写帧名称，例如：

   Google Keep
   

3. 预览模式下将直接显示嵌入的Google Keep面板

管理多个嵌入帧：工作流的灵活切换

当配置了多个嵌入应用时，可以通过以下方式高效管理：

• 在命令面板使用「Custom Frames: Open」快速切换不同帧
• 在插件设置中调整帧的显示顺序
• 对不常用的帧点击「Remove Frame」暂时移除（配置会保存在插件数据中）

常见问题与解决方案

🚫 问题：嵌入的网页显示空白或无法加载

解决方案：

• 检查URL是否正确（需包含完整的http://或https://）
• 某些网站禁止在iframe中显示（如银行网站），这是网站的安全策略导致
• 尝试关闭浏览器扩展或防火墙，可能存在内容拦截

📱 问题：移动设备上无法使用

注意：目前插件仅支持Obsidian桌面版，移动版暂不支持iframe嵌入功能。

🎨 问题：自定义CSS不生效

解决方案：

• 确保CSS选择器正确，可使用 !important 强制应用样式
• 部分网站使用Shadow DOM隔离样式，可能需要特殊处理
• 检查是否有语法错误，如缺少闭合括号或分号

通过 Obsidian Custom Frames，你可以将整个工作流整合到单一界面，让知识管理与任务处理无缝衔接。无论是用Google Keep记录灵感，还是用Todoist管理项目，这款插件都能帮你打破应用边界，构建高效的个人工作系统。现在就动手配置你的第一个嵌入帧，体验一站式工作环境带来的效率提升吧！